html - 的用途

Question

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

全部the spec不得不说的是:

Specifies a label for the option.

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

This attribute is text for the label indicating the meaning of theoption. If the label attribute isn't defined, its value is that of theelement text content.

Usage note: the label attribute is designed to contain a short labeltypically used in a hierarchical menu. The value attribute describes alonger label designed to be used near a radio button, for example.

我写了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 标准性别代码)这样​​的值，而不是字符串“Female”和“Male”，您会怎么做？在 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 的地方属性是用来使用的。