一个标签内的两个输入字段

Question

考虑以下：

 <label>Range from
    <input name='min_value'/> to
    <input name='max_value' />
</label>

这在语义上是否 正确，因为 W3C 推荐声明标签仅与一个表单控件相关联？

单击第二个输入会立即将焦点转移到第一个输入？这可以预防吗？

一个标记如何标记最小/最大输入组合以表明两个输入属于一起？

原文由 sqwk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，这是不正确的（因为，正如您所注意到的，a label 只与 一个 表单输入相关联）。

要标记属于一起的一组输入，请使用 <fieldset> 和 <legend> ：

 <fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>

参考：

• <input /> HTML 5 规范。
• <fieldset> HTML 5 规范。
• <label> HTML 5 规范。
• <legend> HTML 5 规范。

原文由 David Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如公认的答案所述，这是不正确的，但我认为有更好的方法可以做到这一点。

无障碍替代品：

选项 1 （使用 aria-label 属性）：

 Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />

选项 2 （使用隐藏 label 标签）：

 <label for='start'>Range start</label>
<input type='text' id='start' />

<label for='end' class='hidden'>Range end</label>
<input type='text' id='end' />

其中 .hidden 类 只能由屏幕阅读器读取。

选项 3 （使用 aria-labelledby 属性）：

 <label id='lblRange'>Range</label>
<input type='text' id='start' aria-labelledby='lblRange' />
<input type='text' id='end' aria-labelledby='lblRange' />

选项 #1 的优点：每个 input 都有一个很好的描述，其他建议（例如添加“to”标签）没有。选项 #2 和 #3 可能不是这个特定案例的最佳选择，但对于类似案例值得一提。

来源： http ://webaim.org/techniques/forms/advanced

原文由 Diego Jancic 发布，翻译遵循 CC BY-SA 3.0 许可协议