Next.js + Chakra UI表单<label for>属性使用错误求助

你的代码存在几个破坏表单语义化与label关联逻辑的问题，以下是具体修复方案：

错误点分析 #

• FormLabel错误包裹表单元素：Chakra UI的FormLabel不应作为Select、Textarea等控件的容器，这种结构会导致浏览器无法识别label与控件的绑定关系。
• 表单控件缺失对应id：第一个Select未设置id，导致FormLabel的htmlFor="identity"找不到匹配元素。
• FormLabel冗余设置id：给FormLabel自身添加id完全没必要，反而会混淆label与控件的关联逻辑。
• Input类型不合法：type="name"不是标准input类型，应改为type="text"。

修复后的完整代码 #

<form ref={form}>
  {/* onSubmit={sendEmail} */}
  <Stack spacing={5} w={{ base: "300px", md: "500px" }}>
    {/* 修复Select的FormLabel结构 */}
    <FormControl isRequired>
      <FormLabel htmlFor="identity" fontFamily="Figtree, sans-serif;">
        {t("input.control1")}
      </FormLabel>
      <Select
        id="identity"
        name="type"
        placeholder={t("options.option1")}
        aria-label="type"
        style={{ borderColor: "#355995" }}
      >
        <option>{t("options.option2")}</option>
        <option>{t("options.option3")}</option>
        <option>{t("options.option4")}</option>
        <option>{t("options.option5")}</option>
        <option>{t("options.option6")}</option>
        <option>{t("options.option7")}</option>
        <option>{t("options.option8")}</option>
      </Select>
    </FormControl>

    <FormControl isRequired>
      <FormLabel htmlFor="first-name" fontFamily="Figtree, sans-serif;">
        {t("input.control2")}
      </FormLabel>
      <Input
        type="text" // 修复input类型
        id="first-name"
        placeholder={t("placeholder.name")}
        aria-label="name"
        name="name"
        style={{ borderColor: "#355995" }}
        autoComplete="off"
      />
    </FormControl>

    <FormControl isRequired>
      <FormLabel htmlFor="mail" fontFamily="Figtree, sans-serif;">
        {t("input.control3")}
      </FormLabel>
      <Input
        type="email"
        id="mail"
        placeholder={t("placeholder.email")}
        aria-label="email"
        name="email"
        style={{ borderColor: "#355995" }}
        autoComplete="off"
      />
    </FormControl>

    <FormControl isRequired>
      <Text mb="8px" fontFamily="Figtree, sans-serif;">
        {t("input.control4")}
      </Text>
      {/* 修复Textarea的FormLabel结构 */}
      <FormLabel htmlFor="message" />
      <Textarea 
        placeholder={t("placeholder.message")}
        name="message"
        id="message"
        style={{ borderColor: "#355995" }}
        autoComplete="off"
        minHeight="125px"
      />
    </FormControl>

    <Button
      type="submit"
      variant="outline"
      borderColor="#355995"
      fontFamily="Figtree, sans-serif;"
    >
      {t("button")}
    </Button>
  </Stack>
</form>

关键修复说明 #

1. 统一FormControl结构：所有表单控件放入FormControl内部，FormLabel与控件同级，保证语义化结构正确。
2. 补全控件id：给第一个Select设置id="identity"，与FormLabel的htmlFor匹配。
3. 移除FormLabel冗余id：删除FormLabel上的id属性，避免关联冲突。
4. 修正Input类型：将type="name"改为标准的type="text"。
5. 调整Textarea的label结构：让FormLabel与Textarea同级，不再包裹控件，确保label关联生效。

修改后，浏览器自动填充和无障碍工具即可正常工作，同时消除label关联错误警告。

内容的提问来源于stack exchange，提问作者jules