Question

请考虑以下事项：

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

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

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

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

Answer 1

不，它不正确（因为，正如您所注意到的，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 spec，WHATWG definition}。
<fieldset> ^{HTML 5 spec，WHATWG definition}。
<label> ^{HTML 5 spec，WHATWG definition}。
<legend> ^{HTML 5 spec，WHATWG definition}。

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班级为only readable by screen readers。

选项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都有一个很好的描述，其他建议（例如添加＆＃34;到＆＃34;标签）则没有。选项＃2和＃3可能不是这个特定案例的最佳选择，但值得一提的是类似案例。

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

Answer 3

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

如果未指定for属性，但label元素具有可变元素后代，那么第一个树序的后代是标签元素的标记控件。

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

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

Answer 4

这个怎么样：

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

Answer 5

根据this - 标签只能包含一个输入，因为它应与仅一个控件相关联。将输入放在标签内意味着消除for属性（自动链接）。

因此，您应该将单个输入添加到标签中，或者指定for属性指向输入id并且不将输入放入标签

Answer 6

1 LABEL = 1 INPUT !!!

如果在LABEL中放入2个INPUTS，它将无法在Safari（以及iPad和iPhone）中运行...因为当您在LABEL内部单击时它会自动聚焦第一个INPUT ...因此第二个输入无法输入到。

Answer 7

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

<label id='dobRange'>DOB between</label>
<input type='text' id='start' aria-labelledby='dobRange' />
<input type='text' id='end' aria-labelledby='dobRange' />

在哈姆勒：

= f.label :dob_range
= f.search_field :dob_gteq, 'aria-label': 'dob_range'
= f.search_field :dob_lteq, 'aria-label': 'dob_range'

Answer 8

我认为您不应该将输入字段放在标签控件中。

<label for="myfield">test</label><input type="text" id="myfield" name="myfield />

标签就是那个标签。

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

8 个答案: