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

考虑以下几点：

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

范围从
到

既然W3C建议声明标签与一个表单控件关联，那么这在语义上是否正确

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

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

不，这是不正确的（因为，正如您所注意到的，

标签

与一个表单输入完全相关）

要标记属于一起的一组输入，请使用

和

：

范围
分钟
马克斯

我认为不应该将输入字段放在label控件中

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

test这个怎么样：

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

范围从
到
根据-标签只能包含一个输入，因为它应该只与一个控件关联。将输入置于标签内意味着消除

属性的

（自动链接）

因此，您应该将单个输入放在标签中，或者为

属性指定

，该属性指向输入
id
，不将输入放在标签中。
正如公认的答案所指出的，这是不正确的，但是我认为有更好的方法

可获得的替代方案：

选项1（使用
aria标签
属性）：

其中
.hidden
类为

选项3（使用
aria标签by
属性）：

范围

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

来源：
1标签=1输入

如果你在一个标签里放两个输入，它在Safari（以及iPad和iPhone）中就不起作用了。。。因为当你点击标签内部时，它会自动聚焦第一个输入。。。所以第二个输入是不可能输入的。
我看到很多答案说，在标签中输入两个输入是错误的。
这在html5中实际上是一个错误的说法。标准明确允许：

如果未指定for属性，但label元素有一个可标记的元素子体，则树顺序中的第一个此类子体是label元素的标记控件

如果标签元素的交互式内容不是其标签控件，则针对这些交互式内容子体以及这些子体的任何子体的事件的标签元素的激活行为必须为“不执行任何操作”

但是，Safari不遵守html5标准（在iOS 11.3上测试）。因此，想要与Safari兼容的用户必须在此处使用变通方法，或者等到苹果修复其浏览器。
为什么需要在标签中输入内容？？为什么在语义上不从到，标签上需要一个for属性，该属性链接到一个输入的id（在整个页面范围内应该是唯一的）。@MetalFrog:将控件嵌套在标签中将提供必要的语义-在这种情况下向标签添加for属性是多余的。只有当控件出现在其他位置时，才需要for属性。也就是说，指定for属性以确保将标签与正确的控件相关联非常有用，因为当发现冲突时将引发验证错误：“具有for属性的label元素的任何输入子体必须具有与for属性匹配的ID值。”相关：顺便说一句，你的html类型在我的iPad上不起作用。无法访问第二个输入。不，将输入放在标签内是完全正确的。在一个完美的世界中，for/id关联对于这些所谓的隐式关联标签是不必要的，因为很明显，相应的标签就是这个输入的父项。在现实世界中，屏幕阅读器在很长时间内都无法获取这些信息，因此必须对/id属性使用匹配。
您的年龄（1、2或3位）
就是一个使用标签元素来显示输入右侧的帮助文本的例子，但屏幕阅读器会在正确的时间读取这些文本：在（（部分）失明之前）用户有机会在输入中键入某物。当他在输入中输入了某样东西后，帮他是没有多大帮助的；）IRL，标签不包含它的用途。标签上没有一罐泡菜，表明这是一罐泡菜。标签上只写着这是给那罐泡菜的。我可以把标签移到任何地方，但它仍然是那罐泡菜的标签。HTML表单也是如此。在我看来，标签不应该包含标签所包含的控件。它应该简单地指向那个特定的控件。如果我想通过JavaScript删除标签（出于某些我还想不起来的原因），该怎么办？我也会移除控制装置！我可以扔掉那个标签，那罐泡菜还在那儿。“IRL”，就像“在现实生活中”一样？HTML语义不是为了反映物理世界。控件可以与标签有两种关联：隐式（标签内容）或显式（“for=”）。这是规范本身定义和接受的用法（如果不受欢迎的话），这是本讨论中唯一相关的部分。@FelipeAls您能否进一步说明屏幕阅读器正确支持for属性，但不支持标签中输入的嵌套，并提供其来源或如何测试和确认它的说明？你是我见过的第一个提到这个问题的人，我在谷歌上找不到任何关于这个问题的进一步讨论。你似乎也可以使用（尽管我仍然选择你的解决方案）。你指的是一个过时的规范。在标签（）中设置多个可标记元素是正确的，但只有第一个是可标记元素
Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />

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

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

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