fix: form htmlFor not work, close #5384

Author: tangjinzhou

components/_util/pickAttrs.ts

@@ -3,7 +3,7 @@ alt async autocomplete autofocus autoplay capture cellpadding cellspacing challe
 charset checked classid classname colspan cols content contenteditable contextmenu
 controls coords crossorigin data datetime default defer dir disabled download draggable
 enctype form formaction formenctype formmethod formnovalidate formtarget frameborder
-headers height hidden high href hreflang htmlfor httpequiv icon id inputmode integrity
+headers height hidden high href hreflang htmlfor for httpequiv icon id inputmode integrity
 is keyparams keytype kind label lang list loop low manifest marginheight marginwidth max maxlength media
 mediagroup method min minlength multiple muted name novalidate nonce open
 optimum pattern placeholder poster preload radiogroup readonly rel required

components/form/FormItem.tsx

@@ -304,9 +304,11 @@ export default defineComponent({
         validateDisabled.value = false;
       });
     };
-
+    const htmlFor = computed(() => {
+      return props.htmlFor === undefined ? fieldId.value : props.htmlFor;
+    });
     const onLabelClick = () => {
-      const id = fieldId.value;
+      const id = htmlFor.value;
       if (!id || !inputRef.value) {
         return;
       }
@@ -409,7 +411,7 @@ export default defineComponent({
                 {/* Label */}
                 <FormItemLabel
                   {...props}
-                  htmlFor={fieldId.value}
+                  htmlFor={htmlFor.value}
                   required={isRequired.value}
                   requiredMark={formContext.requiredMark.value}
                   prefixCls={prefixCls.value}

components/form/FormItemLabel.tsx

@@ -85,7 +85,7 @@ const FormItemLabel: FunctionalComponent<FormItemLabelProps> = (props, { slots,
   return (
     <Col {...mergedLabelCol} class={labelColClassName}>
       <label
-        html-for={htmlFor}
+        for={htmlFor}
         class={labelClassName}
         title={typeof label === 'string' ? label : ''}
         onClick={e => emit('click', e)}