Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

If an element is wrapped by a label, does the label require the "for" attribute?

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".

like image 739
Jeromy French Avatar asked Jan 07 '15 19:01

Jeromy French


People also ask

Is the for attribute mandatory for label?

Yes, but that doesn't mean the for attribute is required. For example, if the input is nested inside the label, the label is “for” that input implicitly. It's always a good idea to give a label a 'for' attribute and link it to the control's ID.

What do we use the for attribute in the label element for?

The for attribute is an allowed attribute for <label> and <output> . When used on a <label> element it indicates the form element that this label describes.

What happens when you put a label element around an input element?

Think of an implicit label as hugging an input, and an explicit label as standing next to an input and holding its hand. An explicit label's for attribute value must match its input's id value. For example, if for has a value of name , then id should also have a value of name .

Is label an attribute?

The HTML label Attribute is used to specify the title of the Text Track. The title of the Text Track is used by the browser when listing available text tracks. It is used in <track> element.


2 Answers

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

like image 110
lemonaida Avatar answered Oct 17 '22 11:10

lemonaida


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.

like image 44
Jukka K. Korpela Avatar answered Oct 17 '22 13:10

Jukka K. Korpela