XHTML Strict Validation

Question

Really 2 questions. Why is it that these bits of code dont validate to XHTML 1.0 Strict. XHTML 1.0 Strict is a project requirement.

Line 2 causes the problem

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.

<form enctype="multipart/form-data" action="upload.php" method="post">
<input type="hidden" name="max_file_size" value="1048576" />
<table><tr><td><b>Image location: </b></td><td><input type="file" name="file" size="30"/></td></tr>
<tr><td><b>Caption: </b></td><td><input type="text" name="caption" size="30"/></td></tr>
<tr><td><input name="submit" type="submit" value="Upload" /></td><td>*(png, jpeg, jpg and gif files &lt; 1mb)</td></tr></table>
</form>

And for line 2 and 3

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.

<form action="#">
    <input type="text" size="30" name="query"  value="" onkeypress="return disableEnterKey(event)" />
    <input type="button" name="searchButton" value="Search" onclick="loadResults(this.form)" />
</form>

Answer 1

You need to put your form inputs in a <fieldset> or other block tag. <input> elements are inline form elements, and inline elements may not appear in a block context. Try

<fieldset>
   <input ... />
<fieldset>

Answer 2

As the message says, you can't have the input element as a direct child of the form. It must be contained within one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del".

Simplest fix may be to put them inside "p", "div" or "fieldset" elements.

Answer 3

XHTML strict requires that you do not put input elements directly within forms - you can fix the errors by placing your inputs in any of the block-level elements suggested by the validator.

Try something like this:

<form action="#">
    <div>
        <input type="text" size="30" name="query"  value="" onkeypress="return disableEnterKey(event)" />
        <input type="button" name="searchButton" value="Search" onclick="loadResults(this.form)" />
    </div>
</form>