xhtml form validation error

[andyjamesnelson]

Hey I'm making a form:

<form method="post" enctype="text/plain" action="">

<p><textarea class="message" name="contact" cols="60" rows="11">
</textarea></p>

<p><input class="submit" type="submit" value="Send"></input></p>

</form>

Without the <p> tags around the textarea and the input so that the html would not validate?

Still this seems a little crazy, not to mention inheriting CSS from <p> with no need for classes.

Andy

 

[r.j.s]

I'm not sure what you're getting at with the <p> tags, but shouldn't your method be POST, not post?

Are you saying it wouldn't validate without the <p> tags around the form elements?

 

[andyjamesnelson]

Yes it won't validate without the <p> tags!

Sorry my 1st post wasn't very clear.

It won't validate like this:

<form method="post" enctype="text/plain" action="">

<textarea class="message" name="contact" cols="60" rows="11"></textarea>

<input class="submit" type="submit" value="Send"></input>

</form>

But if I add <p> tags around the textarea and the input it will?

Also I think with xhtml strict its post and not POST?

Andy

 

[Mitthrawnuruodo]

Try <div> tags instead of <p> tags...

 

[r.j.s]

Also I think with xhtml strict its post and not POST?

Andy

I guess you are right, my bad.

 

[andyjamesnelson]

Ok cool yes that works. One to remember for sure!

I am wondering if there is a way of removing the outline that happens on a submit button in Firefox?

Thanks for the tip.

 

[angelwatt]

Tags like input and textarea are kind of like a span or strong tag. They're inline and need a block parent. With forms you have a few different options. I often go with a fieldset since they are designed for this kind of job. You can also use other block tags like p, div, ol, ul, etc.

You also miss wrote the input tag. It'a a self closing tag,

<input ... />

 

[r.j.s]

Tags like input and textarea are kind of like a span or strong tag. They're inline and need a block parent. With forms you have a few different options. I often go with a fieldset since they are designed for this kind of job. You can also use other block tags like p, div, ol, ul, etc.

So the OP could put the entire form in a <p> or <div> tag, instead of each element?

 

[angelwatt]

So the OP could put the entire form in a <p> or <div> tag, instead of each element?

No, the p would have to be inside the form tag, otherwise that wouldn't validate. Form is a block element.

 

[Melrose]

No, the p would have to be inside the form tag, otherwise that wouldn't validate. Form is a block element.

Beat me to it.

P is a block-level element as well but meant for handling the copy text itself, not larger elements on the page like forms.

 

[andyjamesnelson]

Any suggestions on loosing the outline in Firefox when the button is pressed?

 

[angelwatt]

Any suggestions on loosing the outline in Firefox when the button is pressed?

I'm not completely convinced I know what outline you're talking about, but here are some things to try.

input:active, input:focus {
 outline: none;
}

 

[andyjamesnelson]

Hey I created a test page to illustrate the problem:

http://andyjamesnelson.co.uk/hiptest/

click the send button and you will see the outline

also if you see the page in Safari there seems to be a 2px gap between the button and the textarea?

 

[angelwatt]

OK, I tracked it down. The answer I gave before is something that works for the border that shows up on links, but apparently doesn't apply to input buttons. Digging through Firefox I found their styling properties for it.

Disclaimer: I'll give the solution, but consider the consequences as well. The highlighting border is an accessibility feature for people using the keyboard to navigate the outline shows them what is currently selected. Applying this solution will result in a less accessible site. /disclaimer.

input[type="submit"]::-moz-focus-inner {
 border: 0px dotted #0f0;
}

 

[memco]

Browsers often have their own internal styles for margin padding etc., and when it comes to forms, these are notoriously difficult to compensate for cross-browser. Two articles you might find helpful are http://www.sitepoint.com/article/style-web-forms-css/ and the more recent: http://www.sitepoint.com/article/fancy-form-design-css/. There are also some custom javascript libraries that handle styling of form elements, but their names escape me at the moment.