CODEWITHSUNDEEP
htmlformsdomlabelstandards
Swader
Swader

Reputation: 11597

Is putting form fields inside label tags a good or bad idea?

I notice this trend in a lot of frameworks, auto-generated code (Zend) and layout templates. The approach I'm talking about is such:

<label for="someField">
    <input id="someField" name="someName" />
</label>

What are the pros and cons of this approach vs. the regular one, and why do people tend to take this approach at all?

Upvotes: 2

Views: 533

Answers (1)

dsgriffin
dsgriffin

Reputation: 68626

It seems to be fine judging by W3C standards in both HTML4.01 and HTML5:

HTML4:

"To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control."

In this example, we implicitly associate a labels with a text input control:

<form action="..." method="post">
  <p>
    <label>
      First Name
      <input type="text" name="firstname">
    </label>
  </p>
</form>

It is still fine as of HTML5:

"The label element 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 the for attribute, or by putting the form control inside the label element itself. - W3C.

Upvotes: 2

Related Questions