我正在为一个主要网站实施WCAG可访问性报告。可以预见，经常出现的问题之一是表格中的标签。
直到现在，我还认为将表单标签与其元素相关联的正确方法是在标签的form属性中使用输入元素的名称，如下所示：
<label for="name[1]">Your name: </label>
<input type="text" name="name[1]" placeholder="Your name">
但是使用客户端的框架更喜欢吐出这样的代码：
<label for="user_first_name">Your name: </label>
<input type="text" name="name[1]" id="user_first_name" placeholder="Your name">
我的逻辑基于这样的理解，即并非所有表单元素都具有“ ID”属性，以允许它们由DOM（例如CSS和Javascript）唯一地操纵，但是 all POST-和GET -方法表单元素 do 具有'name'属性，允许将数据提交到远程服务器，这是客户端浏览器表单的最常见用法。
我不想向客户提交PR时对标签标签中“ for”属性的目的有错误的理解，这会使他们无法通过下一次WCAG审核。
那是什么？
答案 0 :(得分：5)
标签元素的for属性值必须是非隐藏表单控件的ID 。
或者您可以将输入字段包装在标签内，例如
<label>Your name:<br>
<input type="text" name="name[1]"></label>
答案 1 :(得分：3)
标签的for属性始终引用该字段的 id 。
不幸的是，命名可能会令人困惑，但实际上，正如您提到的， name 的唯一用法实际上是在服务器端使用。
如果完全使用JavaScript处理过，则完全有可能使用一个ID为ID但没有名称的字段。对于像Angular或React这样的框架，这种情况越来越普遍。
相反，如果没有ID，则不会有任何标签链接到该字段。由于一个字段必须带有一个标签，告诉您期望输入什么，所以每个字段都应该有一个ID。否则，您的网站或应用程序将无法访问。
答案 2 :(得分：2)
只需完成前面的答案，html spec for the FOR attribute of the <label>就很清楚：
可以指定
的 IDfor属性以指示具有以下内容的表单控件 标题要关联的。如果指定了属性， 该属性的值必须是labelable element ...
虽然@Erikm隐式标签的示例从规格角度来说在技术上是正确的，但有些屏幕阅读器不会将标签与没有for属性的输入相关联。屏幕阅读器是一个错误，但是您仍然应该通过指定for来解决它。
<label for='myid'>Your name:<br>
<input type="text" name="name[1]" id='myid'></label>
请注意，拥有<label for="some-id">不仅将标签与输入字段相关联，这对于屏幕阅读器用户来说是必不可少的，而且对于有视力的鼠标用户也有好处，因为他们可以单击标签，并且焦点将移至输入字段。
答案 3 :(得分：0)
可以指定
for属性以指示与标题相关联的表单控件。如果指定了属性，则属性的值必须是与label元素在同一Document中的可标记元素的ID。如果指定了属性，并且文档中有一个元素的ID等于for属性的值，并且第一个这样的元素是可标记的元素，则该元素是label元素的标记为控件。
换句话说，for属性引用了诸如id，input或textarea之类的表单元素的select属性。 id属性必须在整个文档中具有唯一的值（这适用于任何元素的id attribute），而name attribute不必唯一。例如，一组单选按钮中的radio buttons具有相同的名称。
由于HTML5.x是为浏览器开发人员而不是为Web开发人员编写的，因此与现在已被取代的HTML 4.01规范相比，有时更难发现。 HTML 4.01规范有一个table of attributes，其中包含有关每个属性类型的信息：
id的类型为ID，这意味着它的值在整个文档中必须是唯一的，for的类型为IDREF，其值引用类型为ID的属性，name的类型为CDATA，即“文档字符集中的一系列字符”。（类型ID，IDREF和CDATA来自SGML DTD，在引入XSD和其他模式语言之前，它们最初也用于XML文档。HTML5并非使用任何正式的SGML或XML模式语言。）
因此如果您想使用label属性将for元素连接到表单元素，则这些表单元素将需要一个id属性。 WCAG 2.x的Technique H44中也反映了这一点，其中examples显示了for和id技术。