Html 一个标签内的两个输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9004307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two input fields inside one label
提问by sqwk
Consider the following:
考虑以下：
<label>Range from
<input name='min_value'/> to
<input name='max_value' />
</label>
Is this semantically correct since the W3C recommendations state that a label is associated with exactlyone form control?
这是因为，一个标签关联的W3C建议国家语义正确的正是一种形式的控制？
Clicking into the second input shifts focus immediately to the first input? Can this be prevented?
单击第二个输入会立即将焦点转移到第一个输入？这可以防止吗？
How would one markup a min/max input combination to show that two inputs belong together?
如何标记最小/最大输入组合以显示两个输入属于一起？
回答by David says reinstate Monica
No, it's not correct (since, as you note, a labelis associated with exactly oneform input).
不，这是不正确的（因为，正如您所注意到的， alabel仅与一个表单输入相关联）。
To label a group of inputs that belong together, use a <fieldset>and a <legend>:
要标记属于一起的一组输入，请使用 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>References:
参考：
回答by Diego Jancic
As the accepted answer states, that's not correct, however I think there are better ways to do it.
正如公认的答案所述，这是不正确的，但我认为有更好的方法来做到这一点。
Accessible alternatives:
无障碍替代品：
Option 1(using the aria-labelattribute):
选项 1（使用aria-label属性）：
Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />
Option 2(using hidden labeltags):
选项 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' />
Where the .hiddenclass is only readable by screen readers.
凡.hidden类是仅由屏幕阅读器读取。
Option 3(using aria-labelledbyattributes):
选项 3（使用aria-labelledby属性）：
<label id='lblRange'>Range</label>
<input type='text' id='start' aria-labelledby='lblRange' />
<input type='text' id='end' aria-labelledby='lblRange' />
Advantages of option #1: Each inputhas a good description that other suggestions (such adding a "to" label) do not. Options #2 and #3 might not be the best for this specific case, but worth mentioning for similar cases.
选项#1 的优点：每个input都有一个很好的描述，其他建议（例如添加“to”标签）没有。选项 #2 和 #3 可能不是这种特定情况的最佳选择，但对于类似情况值得一提。
回答by user1448926
I see many answers saying it is wrong to put 2 inputs inside a label. This is actually a wrong statement in html5. The standard explicitly allow it: http://www.w3.org/TR/html5/forms.html#the-label-element
我看到很多答案都说将 2 个输入放在标签中是错误的。这实际上是 html5 中的错误陈述。标准明确允许：http: //www.w3.org/TR/html5/forms.html#the-label-element
If the for attribute is not specified, but the label element has a labelable element descendant, then the firstsuch descendant in tree order is the label element's labeled control.
If a label element has interactive content other than its labeled control, the activation behavior of the label element for events targeted at those interactive content descendants and any descendants of those must be to do nothing.
如果没有指定 for 属性，但是 label 元素有一个 labelable 元素后代，那么树顺序中的第一个这样的后代是 label 元素的标签控件。
如果 label 元素具有除其标记控件之外的交互式内容，则 label 元素对于针对那些交互式内容后代及其任何后代的事件的激活行为必须是什么都不做。
However, Safari does not respect the html5 standard here (tested on iOS 11.3). So, someone that wants to be compatible with Safari must use workarounds here or wait until Apple fixes its browser.
但是，Safari 不遵守此处的 html5 标准（在 iOS 11.3 上测试）。因此，想要与 Safari 兼容的人必须在此处使用变通方法或等待 Apple 修复其浏览器。
回答by ?ime Vidas
How about this:
这个怎么样：
<label> Range from <input name='min_value'> </label>
<label> to <input name='max_value'> </label>
回答by zysoft
According to this- label can contain only one input as it should be associated with only onecontrol. Putting input inside the label means elimination of forattribute (automatic linking).
根据这一点- 标签只能包含一个输入，因为它应该只与一个控件相关联。将输入放入标签意味着消除for属性（自动链接）。
So you should either put singleinput into label or specify forattribute which points to input idand don'tput input into label.
所以，你应该要么把单个输入标签或指定for属性，该属性点投入id并没有把输入到标签。
回答by Martin Zvarík
1 LABEL = 1 INPUT !!!
1 个标签 = 1 个输入！！！
If you put 2 INPUTS inside a LABEL, it will NOT work in Safari (and iPad and iPhone)... because when you click inside LABEL it automatically focuses the first INPUT... so the second input is impossible to type to.
如果您将 2 个输入放在 LABEL 中，它将无法在 Safari（以及 iPad 和 iPhone）中使用...因为当您在 LABEL 内单击时，它会自动聚焦第一个 INPUT...因此无法输入第二个输入。
回答by kolin
i don't think you should be putting the input field inside the label control.
我认为您不应该将输入字段放在标签控件中。
<label for="myfield">test</label><input type="text" id="myfield" name="myfield />
the label is just that, a label for something.
标签就是这样，一个东西的标签。
