Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

input

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!

like image 524
Raapwerk Avatar asked Jan 04 '12 12:01

Raapwerk


People also ask

Is the for attribute necessary for a 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.

Should I nest input inside label?

Tell us what's happening: You should nest the input elements within the label elements.

What does for attribute used for inside label?

The for attribute specifies which form element a label is bound to.

Why is for attribute used in label tag?

The HTML <label> for Attribute is used to specify the type of form element a label is bound to. Attribute Values: It contains the value i.e element_id which specify the id of the element that the label is bound to. Example: This Example that illustrates the use of for attribute in <label> element.


Video Answer


4 Answers

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

like image 70
Crab Bucket Avatar answered Oct 19 '22 09:10

Crab Bucket


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.

like image 20
WebMonster Avatar answered Oct 19 '22 09:10

WebMonster


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" />
like image 6
Jonathan Sayce Avatar answered Oct 19 '22 10:10

Jonathan Sayce


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

like image 5
kontur Avatar answered Oct 19 '22 09:10

kontur