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

Question

考虑以下:

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

这是语义正确的,因为W3C建议指出的标签与相关正好一种形式的控制？

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

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

Answer 1

不,它不正确(因为,正如您所注意到的,a label与一个表单输入相关联).

要标记属于一起的一组输入,请使用a <fieldset>和a <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规范,WHATWG定义}.
• <fieldset>^{HTML 5规范,WHATWG定义}.
• <label>^{HTML 5规范,WHATWG定义}.
• <legend>^{HTML 5规范,WHATWG定义}.

Answer 2

我看到很多答案都说将 2 个输入放在标签中是错误的。这实际上是 html5 中的错误陈述。标准明确允许：http : //www.w3.org/TR/html5/forms.html#the-label-element

如果没有指定 for 属性，但 label 元素有一个 labelable 元素后代，那么树顺序中的第一个这样的后代是 label 元素的标签控件。

如果 label 元素具有除其标记控件之外的交互式内容，则 label 元素对于针对那些交互式内容后代及其任何后代的事件的激活行为必须是什么都不做。

但是，Safari 不遵守此处的 html5 标准（在 iOS 11.3 上测试）。因此，想要与 Safari 兼容的人必须在此处使用变通方法或等待 Apple 修复其浏览器。

Answer 3

正如公认的答案所述,这是不正确的,但我认为有更好的方法来做到这一点.

无障碍替代品:

选项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都有一个很好的描述,其他建议(如添加"到"标签)不.选项#2和#3可能不是这个特定案例的最佳选择,但值得一提的是类似案例.

资料来源:http://webaim.org/techniques/forms/advanced