<option label ="...">的目的

Question

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

所有规格都要说:

指定选项的标签.

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

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

使用说明:该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中引入了更新的标签,它只是得到了增强.

Answer 1

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

请考虑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要使用属性的地方.