Kevin Holler

One of the problems I ran into today while validating my work was the different restrictions there are with XHTML Strict. Previously my forms had validated fine in XHTML Transitional but suddenly they were no longer valid. Heres why and the solution to fixing this.

The Error

• document type does not allow element “label” here; missing one of “p”, “h1″, “h2″, “h3″, “h4″, “h5″, “h6″, “div”, “pre”, “address”, “fieldset”, “ins”, “del” start-tag.
• document type does not allow element “input” here; missing one of “p”, “h1″, “h2″, “h3″, “h4″, “h5″, “h6″, “div”, “pre”, “address”, “fieldset”, “ins”, “del” start-tag.

The cause of this error

In XHTML Strict the <form> tag can only container block level elements. Block level elements create blocks or large groupings of text. What this means is, your <label> and <input> tags need to be wrapped by the block level element within the <form> tag.

Here’s the code that did not validate.

<div id="form-wrapper">
<form>
<label for="name"><strong>Name:</strong></label>
<input id="contactname" name="contactname" size="35" type="text" />
</form>
</div>

What we see here is the <div> tag that encloses the form is outside of the <form> tag, which causes the error.

The Solution

<form>
<fieldset>
<legend>Contact form</legend>
<label for="name"><strong>Name:</strong></label>
<input type="text" size="35" name="contactname" id="contactname"/>
</fieldset>
</form>

As you can see here, we wrapped the block level ‘form-wrapper’ <div> element around the <label>
and <input> elements within the <form> element. We now have XHTML Strict validated code.

Update 19.9.10 – Semantic code improvement  thanks to Luke