Question

一种用例是当我想提供多种设置相同值的方法时，例如：

const inp1 = document.getElementsByTagName('input')[0]
const inp2 = document.getElementsByTagName('input')[1]

inp1.oninput = ()=>{inp2.value = inp1.value}
inp2.oninput = ()=>{inp1.value = inp2.value}

inp1.value = 0

<label>Set turn angle:
  <input type="number" min="-90" max="90" step="any">
  <input type="range" min="-90" max="90" step="any">
</label>

当用户希望输入精确值时，他们需要输入number。否则，如果他们只想稍微转一下或保持缓慢转弯而不必快速键入，则可以使用滑块。

但是！ label元素呢？语义上，label适用于两个输入。但是，是否可以像我一样在标签中放置多个输入元素？我正在阅读docs，它似乎假定标签和相应输入之间的1-1关系。那如果不合法，在这种情况下我应该怎么办？

Answer 1

在单个标签元素中具有多个控件是无效的。标签的内容模型说：

内容定句，但没有后代可标记元素，除非它是元素的带标签控件，并且没有后代标签元素。

该元素的标签控件显然是单数。

标签主要是为了让屏幕阅读器受益，因此，当控件通过TAB键获得焦点时，标签将被读出，并且用户可以理解其设置的值。例如，在Firefox中的NVDA中进行测试，效果很好：

const inp1 = document.getElementsByTagName('input')[0]
const inp2 = document.getElementsByTagName('input')[1]

inp1.oninput = ()=>{inp2.value = inp1.value}
inp2.oninput = ()=>{inp1.value = inp2.value}

inp1.value = 0

<fieldset>
<legend>Set turn angle:</legend>
<label for="n1">by number:</label>
<input type="number" min="-90" max="90" step="any" id="n1">
<label for="r1">by range:</label>
<input type="range" min="-90" max="90" step="any" id="r1">
</fieldset>

但是，通过键盘控制时，具有两个控件的价值很小。范围控件不提供其他功能。因此，另一种方法是使范围控件不被TAB键集中。

const inp1 = document.getElementsByTagName('input')[0]
const inp2 = document.getElementsByTagName('input')[1]

inp1.oninput = ()=>{inp2.value = inp1.value}
inp2.oninput = ()=>{inp1.value = inp2.value}

inp1.value = 0

<label for="n1">Set turn angle:</label>
<input type="number" min="-90" max="90" step="any" id="n1">
<input type="range" min="-90" max="90" step="any" tabindex="-1">

在标签元素中放置多个输入是否合法？

1 个答案: