表单标签必须与控件反应相关联 - Javascript

在 HTML 中，表单元素是非常重要的一部分，这些元素包括输入框、单选框、复选框、下拉菜单等等。

为了让表单功能正常工作，HTML 提供了几个表单标签，包括 <form>、<input>、<label>、<select>、<option> 等等。

在使用表单时，我们必须确保每个表单标签都与其对应的表单控件相匹配，否则表单功能将无法正常工作。这就是本文要介绍的内容：表单标签必须与控件反应相关联。

<label> 标签

<label> 标签用于为表单控件定义标注，同时通过与控件进行关联，使用户能够单击标注来选择该控件。

<label> 标签的 for 属性可以用于将标注与控件进行关联。例如：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

上述代码中，<label> 标签中的 for 属性值与对应的 <input> 标签的 id 值相同，这就将标注与控件关联在了一起。

aria-labelledby 属性

除了使用 <label> 标签，我们还可以使用 aria-labelledby 属性将表单标签与对应的表单控件进行关联。

aria-labelledby 属性的值为一个或多个 ID，这些 ID 对应的元素用于定义控件的标注。例如：

<div id="username-label">用户名：</div>
<input type="text" aria-labelledby="username-label">

上述代码中，<div> 标签中的 id 值为 "username-label"，<input> 标签的 aria-labelledby 属性值也为 "username-label"，这样就将标注与控件关联在了一起。

检查表单控件与标签间的关系

为了确保表单标签与控件之间的关系正确，我们可以使用 JavaScript 检查标签中的 for 属性或控件中的 aria-labelledby 属性是否与标注元素的 id 属性相匹配。例如：

function validateForm() {
  const labels = document.querySelectorAll("label, [aria-labelledby]");
  for (let i = 0; i < labels.length; i++) {
    const label = labels[i];
    const forValue = label.getAttribute("for");
    const labelledbyValue = label.getAttribute("aria-labelledby");
    if (forValue) {
      const control = document.getElementById(forValue);
      if (!control) {
        console.error(`Label with for="${forValue}" is not associated with any form control`);
      }
    } else if (labelledbyValue) {
      const ids = labelledbyValue.split(/\s+/);
      let found = false;
      for (let j = 0; j < ids.length; j++) {
        const id = ids[j];
        const control = document.getElementById(id);
        if (control) {
          found = true;
          break;
        }
      }
      if (!found) {
        console.error(`Label with aria-labelledby="${labelledbyValue}" is not associated with any form control`);
      }
    } else {
      console.error("Label is not associated with any form control");
    }
  }
}

上述代码中，我们使用 querySelectorAll() 方法获取所有带有 for 属性或 aria-labelledby 属性的标签，然后使用 getAttribute() 方法获取这些属性的值。接着我们根据 for 或 aria-labelledby 属性的值寻找对应的表单控件，并使用 getElementById() 方法获取控件元素。如果控件不存在，则说明标签与控件未正确关联。

总结

表单标签必须与控件反应相关联，这可以通过使用 <label> 标签或 aria-labelledby 属性来实现。在使用表单时，我们应该确保每个表单标签都与其对应的表单控件相匹配，以保证表单功能的正常工作。