CODEWITHSUNDEEP
htmlinputlabel
Raapwerk
Raapwerk

Reputation: 629

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

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!

Upvotes: 43

Views: 10743

Answers (4)

Jonathan Sayce
Jonathan Sayce

Reputation: 9679

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

Upvotes: 8

WebMonster
WebMonster

Reputation: 3031

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.

Upvotes: 23

Crab Bucket
Crab Bucket

Reputation: 6277

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

Upvotes: 28

kontur
kontur

Reputation: 5217

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 :)

Upvotes: 5

Related Questions