[SOLVED] Validating form markup

[alex3]

Hi,

 

I've got this code for a form

 

<form action="blank.php" method="get">
<label for="username">Username:</label><br>
<input id="username" type="text"><br>
<label for="password">Password:</label><br>
<input id="password" type="password">
<input id="submit" type="submit" value="Submit">
</form>

 

And the W3C validator tells me it's invalid. It's main complaint is that

"document type does not allow element "label"/"br"/"input" here;  missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag".

It also tells me that

end tag for "FORM" which is not finished

 

I can't see a problem, sites usually teach this sort of form formatting; should I actually be wrapping every element inside <p> tags or something? <form> is a block level element so I'm a bit lost as to what to do.

 

Cheers

[alex3]

Forgot to mention, doctype is HTML 4.01 strict.

[J.Daniels]

Apparently, forms are block elements, but can only contain block level children.  I'm not sure how reliable this is, but i got it from here:  http://dorward.me.uk/www/element-not-allowed/

[haku]

You have to wrap all the elements inside the <form> tags with one more more divs in strict doctypes. That will get rid of your second error as well.

[J.Daniels]

You can use any block type elements including all the ones listed in the error or the fieldset / legend elements.

[alex3]

You have to wrap all the elements inside the <form> tags with one more more divs in strict doctypes. That will get rid of your second error as well.

 

Do you mean wrap the entire form in a div (which it is) or wrap every component of the form in a div? Like:

 

<div>
<form>
<div><label></div>
<div>input</div>
</form>
</div>

 

Because that just seems nonsensical to me. Unless you mean something like

 

<div>
<form>
<div>
<label>
<input>
</div>
</form>
</div>

[haku]

I'm not sure if you can put the form tags themselves in the div (I don't). But you can wrap all the elements in a div, or wrap each element individually in a div. The second one is nice for grouping labels and inputs together for styling.

[alex3]

I have the entire form in a div as the form appears in it's own 'window' when called.

 

I put everything inside the <form></form> in to one div (the second option in my previous post) and now the errors (all nine of them!) have disappeared.

 

Thanks very much for the help!