CODEWITHSUNDEEP
htmllabel
James Gardiner
James Gardiner

Reputation: 813

Is it better to wrap the label tag around a form item or use the "for" attribute in HTML?

I know that you can use both but is it better to use one over the other? If so, why?

Example of "for" attribute:

<input type="text" id="male"><label for="male">Male</label>

Example of wrap:

<label>Age:<input type="text"></label>

Upvotes: 81

Views: 47264

Answers (9)

roundabout
roundabout

Reputation: 321

Here's the advantages of each.

Implicit label

  1. You can target this label with CSS and use flexbox or other styling with it, so you don't need a container.
  2. You avoid having to come up with a unique ID for each input.
  3. When you use templates and want to repeat a form, you don't need extra logic to make sure each ID is different.

Explicit label

  1. You can style the label text individually. Otherwise you have to make sure your label styles don't apply to inputs or use a span.
  2. The label can be in a different location from the input, like in tables.
  3. Some less advanced software is said to better understand these.

Upvotes: 0

raycohen
raycohen

Reputation: 730

according to http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html

some assistive technologies do not correctly handle implicit labels

So when you wrap, you may also want to provide the "for" attribute to the label element.

Upvotes: 30

Adam
Adam

Reputation: 1885

Embedding the input in the label also affects the wrapping behaviour. <label><checkbox/>Value with spaces</label> will wrap as a single unit by default. Whereas <checkbox id="check"/><label for="check">Value with spaces</label> will wrap the text with breaks at spaces and will wrap the label to a new line but leave the checkbox above.

Upvotes: 1

frequent
frequent

Reputation: 28493

The wrap allows to drop the for attribute, which in turn allows to omit the `id' attribute on the input element. Great for templates or any forms that need to be used in multiple instances on a page.

Upvotes: 8

lime
lime

Reputation: 7111

The relationship is more explicitly defined when using the for syntax, although I believe most browsers implement the same behaviour for both.

A matter of preference, I think. Personally I would use the for syntax as I think it makes more semantical sense than for the input element to be a part of its label element.

Upvotes: 0

Mat Richardson
Mat Richardson

Reputation: 3606

The 'label for' syntax means the label you have created is intended to be a label for the input with id 'inp'. If you click this label in most browsers the cursor focus will land on the 'inp' input element. It's a nice little way of linking a label with its corresponding form control.

I'm not aware of compatibility issues, or any around performance. To me it seems syntactically sound, and as far as I'm aware the CSS spec claims that both are valid.

Upvotes: 0

matthias.p
matthias.p

Reputation: 1544

Semantically, both possibilities are the same. But depending on what layout you want, there are advantages and disadvantages for the two possibilites. For example, if you want that the label is at an entirely different place, it would not make any sense to put the input into the label. But if you want to be able to make a hover-effect via css, that sets e. g. a background for both the label and the area around the input, it would be better to put the input into the label.

Upvotes: 47

Timothy S. Van Haren
Timothy S. Van Haren

Reputation: 8966

If it counts for anything, frameworks like ASP.NET put the label element next to the input/select/textarea elements and use the label's for attribute.

Upvotes: 0

DA.
DA.

Reputation: 40673

It doesn't matter. Both accomplish the same things in terms of defining the relationship between the label and field.

Upvotes: 2

Related Questions