Question

HTML5中label标记中<option>属性的用途是什么？

所有the spec必须说是：

指定选项的标签。

MDN提供了一个我无法理解的解释：

此属性是标签的文本，表示其含义   选项。如果未定义label属性，则其值为   元素文本内容。

使用说明：label属性旨在包含短标签   通常用于分层菜单。 value属性描述了一个   例如，设计用于在单选按钮附近使用的较长标签。

我写了a simple case我认为这可以解释一下：

<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）

属性意味着什么？

注意：原始问题假设该属性是新的。 That's incorrect。由于HTML5中引入了较新的标签，它才得到了增强。

Answer 1

实际上，它适用于datalist元素内部。我们的想法是，当不支持此元素的浏览器遇到它时，它们会按照常规原则呈现其内容，如果您希望该回退内容为空，则需要使用具有空内容的元素。 label属性允许您为选项指定人类可读的字符串，现代浏览器仍然可以正确实现datalist option个元素。

考虑HTML5 CR中的以下示例：

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

它的实现只有文本框，但如果你在那里输入“f”，现代浏览器会建议“女性”。（这里的细节有所不同，但这与问题无关。）在这里，您不需要label属性。

但是如果你想在提交的表格数据中有2和1（ISO / IEC 5218标准代码）之类的值，而不是字符串“女性”和“男性”，你会怎么做？在select元素中，您可以使用<option value=2>Female</option>，但在datalist内，这会导致旧浏览器显示字符串“Female”，这看起来很奇怪。

使用label属性，您可以编写datalist元素，如下所示：

 <datalist id=sexes>
  <option value="2" label="Female">
  <option value="1" label="Male">
 </datalist>

这意味着在用户界面中使用人类可读的单词，并将编码值2或1作为表单数据的一部分提交。在实践中，它不能很好地工作。浏览器还必须显示编码值，因为当用户选择浏览器提出的建议时，它将出现在文本框中。不同的浏览器以不同的方式解决了这个问题，都有一些缺点。例如，在IE上，专注于文本框打开一个菜单，其中包含替代“女性”和“男性”，这很好，但是，如果您单击“女性”，菜单将关闭，并且字符“2”出现在盒子。很难说浏览器应该如何处理这个问题。无论如何，这是要使用label属性的地方。

Answer 2

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

当你定义一个单独的<datalist>用作输入列表时，它看起来更有用。

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

请注意，<option>并不仅限于在<select>元素中使用，因此当<optgroup> et al。

中包含某些属性时更有用。

希望这有帮助。

<option label =“...”> </option>的目的

2 个答案: