<option label="...">的目的是什么？

Question

<option label="...">的目的是什么？

html

9

在HTML5的<option>标签中，label属性的目的是什么？

所有规范上只是这样说：

指定该选项的标签。 MDN提供了一个我无法理解的解释：

该属性是指示选项意义的标签文本。如果未定义属性，则其值是元素文本内容的值。

使用注意事项：label属性旨在包含通常用于分层菜单的简短标签。value属性描述长标签，旨在与单选按钮附近使用，例如。

我写了一个简单的案例，我认为可以阐明一些问题。

<select name="country">
    <option value="ES" label="Spain's label">Spain</option>
    <option value="FR" label="France's label">France</option>
</select>

...并且只发现浏览器似乎会:

忽略它（Firefox 26）
完全替换标签内容（Explorer 11，Chrome 32，Opera 12）

这个属性的用途是什么？

注意：原来的问题认为该属性是新的。这是不正确的。由于HTML5中引入了新标签，因此它已经得到了增强。

- Álvaro González

新的？它并不是新的。它在HTML 4中就已经被引入了：http://www.w3.org/TR/html4/interact/forms.html#h-17.6 - Quentin

2

可能重复 (Possible duplicate)：(https://dev59.com/am865IYBdhLWcg3wQMSW) - Quentin

@Quentin - 你说得完全正确；我刚刚修复了那一部分。感谢你提出相关问题（我之前找不到它，可能是因为我在寻找HTML5的东西）。不确定是否应该重写我的内容以请求特定的HTML5注释... - Álvaro González

我已经重新表述了问题，以反映出在HTML5上下文中属性的一般目的。我的HTML示例只是一个误导性和无用的测试用例，我在试图回答问题时编写了它。链接的问题明确涉及<select>标签，这本身就是一个非常有趣的信息，但实际上是一个不同的问题。 - Álvaro González

这回答了你的问题吗？在<select>中，<option>的"label"属性有什么用？ - Ryan

2个回答

0

看这个：http://blog.paciellogroup.com/2012/08/notes-on-html5-accessibility-support-in-ie-10/

它似乎更多用于为输入定义单独的<datalist>列表。

我的其他想法是关于屏幕阅读器的使用，但我找不到任何证据。

请记住，<option>不仅限于在<select>元素中使用，因此某些属性作为<optgroup>等的一部分包含时更有用。

希望这可以帮助你。

- Martin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

实际上，它是用于在 datalist 元素内使用的。其目的是当不支持此元素的浏览器遇到它时，按照正常原则呈现其内容，如果您希望回退内容为空，则需要在那里使用内容为空的元素。label 属性可让您为选项指定易于理解的人类可读字符串，并且现代浏览器仍正确实现具有 option 元素的 datalist。

请参考以下 HTML5 CR 示例：

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

该功能实现的方式只有文本框，但如果您在其中键入“f”，现代浏览器会自动建议“女性”（细节存在差异，但与问题无关）。这里不需要使用属性。

但是，如果您想要在提交的表单数据中拥有类似2和1的值（表示性别的ISO/IEC 5218标准代码），而不是字符串“女性”和“男性”，应该怎么做？在