6

Say I have a set of radio <input>s. I'm not a caveman, so I know I need to associate <label> with those <input>s. I'm fond of wrapping the radio buttons within their corresponding labels, for reasons enumerated here.

So, for example:

<fieldset>
    <legend>Should I provide a "for" attribute?</legend>
    <label><input type="radio" name="define_the_for_attribute" id="define_the_for_attribute_yes" value="yes" />Yep, if you know what's good for you</label>
    <label><input type="radio" name="define_the_for_attribute" id="define_the_for_attribute_no" value="no" />Nah, that would be redundant and repetitive</label>
</fieldset>

This wrapping associates the corresponding radio button with the label. Do I also need to define the label's for attribute?

<fieldset>
    <legend>Should I provide a "for" attribute?</legend>
    <label for="define_the_for_attribute_yes"><input type="radio" name="define_the_for_attribute" id="define_the_for_attribute_yes" value="yes" />Yep, if you know what's good for you</label>
    <label for="define_the_for_attribute_no"><input type="radio" name="define_the_for_attribute" id="define_the_for_attribute_no" value="no" />Nah, that would be redundant and repetitive</label>
</fieldset>

As pointed out by @Peter, "The for attribute of the label element must refer to a form control" (see http://www.w3.org/TR/html-markup/label.html), but this could be read to mean "if you specify the optional for attribute, it must refer to a valid form control".

Community
  • 1
  • 1
Jeromy French
  • 11,812
  • 19
  • 76
  • 129
  • How this is associated with accessibility? – c-smile Jan 07 '15 at 19:27
  • 5
    Associating input elements with their labels is one of the foundational techniques for making web applications accessible. – Jeromy French Jan 07 '15 at 19:28
  • 3
    @c-smile labels are very important for making forms accessible. They let the user of a screen reader know what a given field is for. – Nick Jan 07 '15 at 19:28
  • 1
    @c-smile: The `for` attribute is mainly a accessibility feature, relating a short description to a field. Also has functional uses, such as in checkbox: clicking its label also toggles its state. – This company is turning evil. Jan 07 '15 at 19:29
  • @Nick I believe you are mixing usability and accessibility here. There are aria-labeledby, aria-description and the like attributes. The `for` and `label` wrapping in HTML is strictly UI/UX feature. They have some a11y value as they establish association between input with some readable text. – c-smile Jan 07 '15 at 19:50
  • @c-smile the `for` attribute is important for both UX and a11y cases. Not all browsers and screenreaders understand `aria-*` attributes. See: http://www.w3.org/TR/WCAG20-TECHS/H44.html – steveax Jan 08 '15 at 04:15

2 Answers2

10

According to the HTML5 spec - "If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control."

http://www.w3.org/TR/html5/forms.html#category-label

So basically, no it is not required as long as it is wrapping any of these elements: button, input (if the type attribute is not in the hidden state), keygen, meter, output, progress, select, or textarea

lemonaida
  • 128
  • 1
  • 8
3

By the specifications, you don’t need the for attribute when the control element is wrapped inside a label element. This principle also applies to all modern browsers, though some very old versions of IE supported only the explicit association with for attributes.

People may still prefer to use the for attribute on logical grounds: a control is logically not part of a label, so it should be placed outside it. And then you need the for attribute in order to benefit from label markup at all.

The for attribute is necessarily when the control cannot be a descendant of a label element, e.g. when you have labels in one column of a table element, controls in another column.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390