Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use multiple labels for a form element?

Tags:

html

forms

Would the following be a valid usage of the label element in HTML5?

<label for="select">Some text</label>
<select id="select">
   ...
</select>
<label for="select">...more text</label>

The HTML5 specs don't seem to have anything to say about it.

edit: This question is now old. In the current wording it is clear that one element can have multiple labels (but not the other way around):

Labelable elements have a NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question.

like image 856
leo Avatar asked Jun 13 '14 11:06

leo


2 Answers

You can have multiple labels that point to the same form control and it's legal.

According to HTML 4 Documentation:

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

like image 59
Mohsen Esmailpour Avatar answered Oct 14 '22 07:10

Mohsen Esmailpour


I just tested whether current screen reader / browser combinations will behave as expected, meaning: they associate all existing labels with the input and announce them all when focusing the input. This is useful especially when tabbing through form inputs with Windows desktop screen readers.

<label for="name">Your name:</label>
<input id="name" />
<label for="name">If forgotten, please consult your birth certificate.

Codepen: https://codepen.io/jmuheim/pen/OJvxzVG

  • NVDA+Chrome: Works ✅
  • NVDA+FF: Works ✅
  • JAWS+Chrome: Works ✅
  • JAWS+FF: Works ✅

Note: mobile screen readers not tested, as they do not offer tabbing, which renders the above irrelevant.

like image 1
Joshua Muheim Avatar answered Oct 14 '22 06:10

Joshua Muheim