Is “for” attribute necessary in HTML label if the target input is nested inside the label?

34
votes

I've noticed that a HTML label tag doesn't need the 'for' attribute when you put your input element into the label element:

<label><input type="text">Last name</label>

But I was wondering what's the best practise. Can anybody help me with that?

Thanks!

4
htmlinputlabel
Like WebMonster stated, it's fine to do it your way. Just keep your use consistent throughout your code. – Crontab
I noticed today that Bootstrap's documentation uses both in the same form. It seems that the for attribute is intended only if you can't or don't put the <input> inside the <label> itself, and either approach is acceptable. – Blazemonger

4 Answers

23
votes

It's used for accessibility for screen readers and the like i.e.

use_the_label_element_to_make_your_html_forms_accessible

So you should use it. And here is a link to convince you about the importance of accessibily.

And here is a little story - making your site accessible can benefit all users - i always was amazed at the amount of effort civic authorities went to for wheelchair accessibilty until I had a daughter and use a push chair. I think websites follow the same rule - everyone benefits.

Apologies for the polemic

22
votes

Both the W3 HTML 5.2 standard and the WhatWG Living Standard state (in almost exact terms, quote is from the latter):

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same tree as the label element. If the attribute is specified and there is an element in the tree whose ID is equal to the value of the for attribute, and the first such element in tree order is a labelable element, then that element is the label element's labeled control.

So it's okay to use it that way in terms of following the HTML standard.

7
votes

The for attribute doesn't make much difference with a text input, but is very useful with a checkbox input, as it allows users to click on the label as well as the checkbox itself:

<label for="chk">Checkbox</label><input type="checkbox" id="chk" />
6
votes

You can include the input in your label and it is associated with the label, or if for some reason you have to have your label element elsewhere in the DOM, you can specify it's meaning with the for attribute. It never hurts to use the forattribute though either way :)