43

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!

Improve this question
3
  • 1
    Like WebMonster stated, it's fine to do it your way. Just keep your use consistent throughout your code. Commented Jan 4, 2012 at 12:26
  • 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. Commented Oct 22, 2013 at 16:37
  • I also have this question. So many online "answers" pretend the question is whether to associate labels with particular elements at all, as though the person asking didn't care about accessibility. That is not the question. The question is whether to use for when it is technically redundant because the label directly contains the labeled element; and if so, why? Commented Sep 17, 2022 at 15:33

4 Answers 4

Reset to default
28

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Eh, too much work. Get your site running first, then if you have free time to spare, add in all the accessibility stuff.
Although your site isn't really "running" if many users can't use it (due to broken accessibility).
24
+50

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.

Improve this answer

Comments

9

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" />
Improve this answer

2 Comments

An input tag can be inside a label. See dev.w3.org/html5/spec-LC/…
Thanks @SarathSMenon - I've removed that bit
5

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.