6

I've been reading the w3.org HTML5 form spec, and was surprised to see the following HTML:

<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>

Semantically, this confuses me. Wouldn't a <label> make more sense as a sibling to an <input>, rather than as its parent?

In the wild, I'm more used to seeing the following configuration:

<p>
  <label for="customer_name">Customer name:</label>
  <input id="customer_name" name="customer[name]">
</p>

I know that a large majority of markup out there is malformed, but I'm interested to hear others' thoughts on what the proper convention should be.

I stand corrected, but it seems every markup generator and form helper I've used essentially violates the W3's suggestions - even those that claim HTML5 support, making use of client-side validations and the like.

Thoughts?

Jeriko
  • 6,547
  • 4
  • 28
  • 40
  • Could a mod please make this into a community wiki, I don't seem to be able. – Jeriko Oct 30 '11 at 12:04
  • Note that while using the `for` attribute is fine, the example you provide is not. The value of the `for` attribute should match the value of an `id` on an element, not the value of a `name`. See the quote in @pbyrne's answer. – Alohci Oct 30 '11 at 15:55
  • Ah yes, you're right. My bad, fixed. – Jeriko Oct 30 '11 at 22:42
  • 1
    See this question, which while not html5 specific, deals with the same topic: [Should I put input tag inside label tag?](http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag) – User Sep 17 '12 at 17:45

3 Answers3

6

Both forms are valid, per the spec:

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 form-associated element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable form-associated element, then that element is the label element's labeled control.

If the for attribute is not specified, but the label element has a labelable form-associated element descendant, then the first such descendant in tree order is the label element's labeled control.

You can either use nesting, if that makes sense for your markup, or use the for attribute if you're unable to use implicit nesting. Neither is more or less correct than the other. I presume most people favor using the for attribute since that gives the author the most flexibility by allowing the two elements to be decoupled from each other.

pbyrne
  • 553
  • 2
  • 8
0

Here it is very well explained- http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/

Pav
  • 1,156
  • 1
  • 7
  • 10
0

Underneath that it says:

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.

The nested way is often less practical, being able to separate the label and input is often useful (for instance when using columns in the form).

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • Perhaps I shouldn't say pages are violating the spec, since both methods work. My question was why the suggested markup is, as you said, seemingly less practical. – Jeriko Oct 30 '11 at 12:20
  • I guess just that nesting is the simpler case. To be honest, I can't think of many situations where either wouldn't be basically equivalent anyway. – Rich Bradshaw Oct 30 '11 at 13:24