Forms are an essential and vital part of any good website. Problem is, if you're using someone else's script, it most probably comes complete with errors which, if you're coding XHTML Strict and want your page to validate, can be both a nuisance and time-consuming. Conversely, if you're doing your own forms, a couple of tips could save cleaning up the mess later.
One is to put paragraph or <p></p> tags between the <form></form> tags, and the other is to make sure all the <option> tags are closed.
The following code and the non-validating, simple form it displays is shown below with the 14 errors it contained when I got it:
If you click on the xhtml button in the form above and scroll down the list of errors, you can see that although 14 errors are listed, it's really only the first two that matter; the rest are just cascading results that stem from them: (Incidentally, to return to the form just hit the back button on your browser.)
Error 1 - Line 61 column 21: document type does not allow element "select" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
This means that the <select> tags need to be contained within a block element of some sort - I've chosen the <p> tag because for me, it's usually the easiest one to use. This also applies to the <option> and <input> tags as we get the same error message for them as for the <select> tags.
Simply put the opening <p> tag immediately after the opening <form> tag, and just before the opening <select> tag, like so:
and put the closing </p> tag immediately before the closing </form> tag, like so:
Note that it's not necessary to put <p></p> tags around 'select', 'option', and 'input' areas individually - just once after the opening <form> tag and before the closing </form> tag and that's it.
Error 2 - Line 63 column 18: document type does not allow element "option" here.
The remaining error messages for this form all deal with <option> tags and all that's left to do is close each one with an </option> tag like so:
Self-closing tags are not allowed, so each one has to be closed individually. Once this is done, the form validates XHTML Strict as does the CSS with the final markup for the form looking like this:
And that's about it - a very simple solution to a pesky problem!
I tried it but couldnt get it to work, couldnt see the code Anyone who can post the code so I can see it or email it to me (admin AT mapzone DOT net) ?
I tried fixing my skin with this but couldnt get it to work. This site doesnt display the actual code you used and I tried but just couldnt figure it out and get it to validate. Anyway you could email me the code? admin AT mapzone DOT net. Thanks.
now I have some work to do
I'm pretty dumb sometimes..