一个带有两个表单输入的Html标签

Question

如果我想将一个标签与两个表单输入相关联，请说＆＃34;到期日期＆＃34;用于两个输入的标签＆＃34; ExpirationMonth＆＃34;和＆＃34; ExpirationYear＆＃34;，这样做的最佳语义方法是什么？

Answer 1

没有办法将标签与多个输入字段相关联，因为标签是definition，是单个字段的标签。使用label元素的原因是基于这样一个简单的对应关系，因此将它同时用于两个字段没有意义。

如果一方面要求您有两个输入字段，并且要遵守WCAG 2.0（另一方面要使输入框H44}强制label标记，那么您需要为每个盒子分别贴上标签。

在实践中，最好有一个字段用于月/年输入，然后您就不会遇到此问题。 （我敢肯定大多数用户会发现键入“10/12”比键入“10”更自然，点击下一个输入框 - 或点击TAB，但大多数用户没有 - 然后输入“12”任何从一个字段到另一个字段的自动标记的尝试都会引起混淆。）

Answer 2

使用标题和 aria-labelledby 属性有一个解决方案。

以下是一个例子：

<span id="bday">Birthday</span>:
<select name="bday_month" title="Month of Birth" aria-labelledby="bday">
<option 1>January
  ...
<option 12>December
</select>
<select name="bday_day" title="Day of Birth" aria-labelledby="bday">
<option 1>1
  ...
<option 31>31
</select>

这＆＃34;通过＆＃34; http://wave.webaim.org/辅助功能检查器。