One Validation Error Left

[Sprink]

Let it be said first and foremost that I always have the biggest problems with forms. ^_^

I am one error away from finishing validation on a website I'm putting together. However, I just can't seem to wrap my mind around how to fix it. Any help would be greatly appreciated!

DOCTYPE is PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

The code in question is:

<div id="right_side">

...

<p>
<form name="contact_us" id="contact_us" method="post" class="form.contact_us" action="mailto:[e-mail]">
<p><label>Name
<input type="text" class="input.fields_contact_us" name="name" tabindex="1"/>
</label>
<label>E-mail
<input type="text" class="input.fields_contact_us" name="email" tabindex="2"/>
</label>
<label> Your message:
<textarea name="message" class="textarea" rows="" cols="" tabindex="3"></textarea>
</label>
<label>
<input type="submit" class="submit_button_contact" name="Submit3" value="Submit" />
</label></p>
</form>
</p>

</div>

Thank you all in advance! ^_^

[tangor]

I see, immediately, an open <p> without a close... Might want to check all those... count 'em up...

[Sprink]

I see two open <p> 's and two closed </p> 's...

Unless, they're in the wrong spots. I don't think so, but I could be wrong.

[Fotiman]

What is the validation error?

[topr8]

>>I see two open <p> 's and two closed </p> 's...

it's invalid to have a <p> inside another <p>

but also as Fotiman says, what's the error message?! it would be helpful

[Sprink]

The message I'm getting is as follows:

document type does not allow element "form" here; missing one of "object", "applet", "map", "iframe", "ins", "del" start-tag

…t_us" method="post" class="form.contact_us" action="mailto:[e-mail]">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

[Fotiman]

A <p> element can not contain a form. A <p> element can contain only inline elements. The <form> element is a block element. Remove the <p> around your form and try again.

[rocknbil]

You can drop to a 4.01 doctype or html 5 if you're not using anything *requiring* XHTML.

While you're at it, here is a "proper" application of label as well. I don't know why I see so many instances of this usage - label around the label and field - but anyway . . .

<p><label for="your-name">Name</label>
<input type="text" class="input.fields_contact_us" name="name" id="your-name" tabindex="1"/>
</p>

Note also with XHTML doctypes, hidden fields will error, they need a container (though you're not using it here: )

<div><input type="hidden" name="blah" id="blah" value="blah"/></div>

[Fotiman]

rocknbil, both usage cases are "proper".

[w3.org...]

for = idref [CS]
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

I don't know why I see so many instances of this usage - label around the label and field

I've seen it done this way for CSS purposes. I forget the exact use case though. It is more compact as well.

[SuzyUK]

both use cases are indeed proper, and I know the reasons ;) - using the label as a "wrapper" does not affect it's focus abilities (i.e. clicking the label still puts the cursor in the input box) but it does allow you to align the input to the label (container) right side or use it's overflow property to simulate columns.. not sure if that's right or wrong, but it has always validated and has always been the best way to use existing elements rather than adding an unnecessary wrapper.. I welcome the chance to be corrected if there's a newer reason not to do it this way any more

however that doesn't answer the OP, @tangor it's quite legitimate to not have a closing </p>.. browsers will auto close them.. like many other elements actually, it's only when you use and XHTML Doctype that you will learn this and then if you decide to use a transitional or HTML Doctype you no longer need to be pedantic about closing tags but you still need to know when not to close them ;)

so back to the OP: that very first <p> is closed, implicitly, by the browsers before the opening <form>, therefore making the very last closing </p> invalid.. it's not closing anything,

the one in the middle surrounding the labels and inputs is valid but quite why you would need it I'm not sure.. is a form a paragraph? - if it's styling then padding and margins (spacing) could be applied to the <form> itself

[tangor]

@suzyUK, only mentioned the <p> irregularities because of the OP's xhtml doc type... which wants all tags closed... Otherwise, agree with all you observed.

[SuzyUK]

thanks, but I just thought the

count 'em up...

statement doesn't work for any Doctype - browsers will close them anyway and I thought that to be a very misleading reply to anyone looking for a validation error, errors like that don't usually affect display due to a browsers inbuilt error recovery - they will only show up via the validator..as long as you weren't actually trying to style that <p> you're good to go ;)

[tangor]

The "count 'em up" still holds true... a </p> without an opening is gonna tank! :)