What's the point of the <option> "label" attribute inside <select>?

In that example, the long text will be sent to the server when the form is submitted.

Given the existence of the value attribute, it is redundant.


As per the definition of the option tag by the w3c :

"This attribute allows authors to specify a shorter label for an option than the content of the OPTION element. When specified, user agents should use the value of this attribute rather than the content of the OPTION element as the option label."

David's answer is pretty good, I just wanted to add a link to the official definition. :D


The label attribute explicitly sets the label. Allow me to improve your example:

<select>
  <option label='Volvo (Latin for "I roll")'>Volvo</option>
  <option label="Saab (Swedish Aeroplane AB)">Saab</option>
</select>

The text content of <option> is used as default for both: the visual labeling and the “technical” form/script value for that option. You can overwrite the default for each with the label and the value attribute, respectively.

All three can be accessed by Javascript.

Firefox did not support label in <option> for 20 years and fixed it in version 77 (2020-06-02). (It “always” worked in <optgroup>, though.)—Or should I say “almost fixed it”: the implementation breaks some new cases: regression.

Thus, my current recommendation: always set the text content of <option> for the label and overwrite the “technical” value with the value attribute if needed. Avoid the label attribute on <option> elements if you care about Firefox.

Tags:

Html