一个标签内有两个输入字段 [英] Two input fields inside one label

问题描述

 < label>范围从
< input name ='min_value'/ > to 
< input name ='max_value'/> 
< / label> 
  

这是否正确，因为W3C建议声明标签与完全相关一种形式控制？

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

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

解决方案

不，这是不正确的（因为，正如您注意到的，标签与 一个 表单输入）。

要标记属于一组的输入，请使用< fieldset> 和一个<图例> ：
$ b

<字段集> <图例>范围< /图例> < label for =min> Min< / label> < input id =minname =min/> < label for =max> Max< / label> < input id =maxname =max/>< / fieldset>

参考文献：



• < input /> ^{HTML 5规范， WHATWG定义} 。 < fieldset> < sup> HTML 5规范， WHATWG定义 。


• < label> HTML 5规范， WHATWG定义 。


• <图例> ^{HTML 5规范， WHATWG定义} 。

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 exactly one form control?

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?

解决方案

No, it's not correct (since, as you note, a label is associated with exactly one form input).

To label a group of inputs that belong together, use a <fieldset> and 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:

• <input />^{HTML 5 spec, WHATWG definition}.
• <fieldset>^{HTML 5 spec, WHATWG definition}.
• <label>^{HTML 5 spec, WHATWG definition}.
• <legend>^{HTML 5 spec, WHATWG definition}.

这篇关于一个标签内有两个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！