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

问题描述

考虑以下事项:

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

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

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?

推荐答案

不，这是不正确的(因为，正如您所注意到的，label 与 one 表单输入).

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>

参考文献:

• ^{HTML 5 规范, WHATWG 定义}.
• ^{HTML 5 规范、WHATWG 定义}.
• ^{HTML 5 规范、WHATWG 定义}.
• ^{HTML 5 规范、WHATWG 定义}.

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