Question

We are having a discussion as I’m currently fixing an IE7 bug, as <label> and <input> tags were wrapped in a <p>.

I cannot seem to find any documentation for the correct semantics for tags contained in a <form> tag. I tend to use the following for example,

<form action="" method="post">
  <fieldset>
    <div class="formrow">
      <label for="firstname">Firstname:</label>
      <input type="text" id="firstname" name="firstname" />
    </div>
  </fieldset>
</form>

However, looking at the Zurb Foundation they don’t wrap any elements at all, perhaps for style, but for radio and checkbox they put the <input> inside the <label> which I didn’t think was valid. Although the Zurb page is using HTML5 so perhaps it’s valid on there?

The Twitter Bootstrap tends to go with a double wrapped <div> approach similar to mine. But again they too, wrap the radio and checkbox inputs inside the label.

So, to my question, are there any definitive rules for the semantics of elements inside a <form> tag?

Answer 1

If you want to know which elements are allowed to be descendants of form elements, I suggest to have a look at the forms section of the HTML4 specification (or go through the equivalent HTML5 section).

For example, any inline element is allowed inside <label>.:

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

The reason why the input elements are inside their label elements is that clicking the descriptive text also toggles the state of the checkboxes. Afaik you can achieve the same by setting the for attribute properly.