Form doesn't validate as XHTML

Problem validating a free form that I picked up

[Gloria]

Hi,
I wonder if somebody can give me a hand here. I have picked up a free form for choosing different colours, and now I cannot get it to validate as strict xhtml, (it was probably written for html). This is what it looks like:

<form name="choseColor" action="xfer.php" method="post">
<select name="xfer" size="1">
<option selected="selected">Search by colour</option>
<option value="red.html">Red/Pink/Maroon</option>
<option value="blue.html">Blue/Purple</option>
<option value="yellow.html">Yellow</option>
<option value="green.html">Green</option>
<option value="white.html">White</option>
<option value="black.html">Black</option>
<option value="earth.html">Earth/Brown/Beige</option>
</select>
<input type="button" style="height: 22px; width: 40px" onclick="location = ''+document.choseColor.xfer.options[document.choseColor.xfer.selectedIndex].value;"
value="Go!" />
</form>

I have also got a simple back button that also doesn’t validate. That goes like this:

<script type="text/javascript">
function Back() {
window.history.back();
}
</script>
<div id="backButton"><a href="javascript:Back()"><img src="img/button.png" width="80" height="30" alt="Back Button" /></a></div>

I’m new to this so I have no idea how to go about it. I should be very grateful for some help.
Gloria

[jalarie]

You have an extra quote mark (") just after ".value;" just before the end of the form.

[Gloria]

Thank you jalarie,
That quotation mark seemed to be the closing mark for "style". (When i removed it I got an extra error!)

I still have the following errors:

there is no attribute "name"
<form name="choseColor" action="xfer.php" method="post">

and

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
<select name="xfer" size="1">

Have you got any more suggestions?

Gloria

[rocknbil]

This first suggestion is why in the heck you need XHTML. Are you outputting anything that requires XHTML features? If the answer is "no, it's straight HTML in an XHTML doctype" drop to 4.01 strict or HTML5. This is a better representation of your document anyway.

But to answer the question, named elements are only valid for form input elements (i.e., anything that needs a named attribute to be posted.) So the form name needs to be form id="...." (and you will need to change any Javascript looking for document.forms['formname'] to document.getElementById('formid'));

XHTML does **not** allow empty elements. Period. Each form element requires some kind of container.

<form...>
<div><input type="hidden" name="somename" value="somevalue"/></div>
<p><label for="email">Email:</label> <input type="text" name="email" id="email"/></p>
</form>

You'll also find target is not a supported attribute in XHTML strict, most people need to use it (the workaround is scripted new windows, this now makes those targets javascript dependent . . . )

I would drop the XHTML, life will be easier if you use an appropriate doctype (and by appropriate I mean if it's HTML, tell the client it's HTML. :-) ) XHTML doctypes have their application but most of the time are not needed.

The way to "fix" your inline Javascript would be to remove it from the source entirely and put it in an external JS (preferably an external file. ) Something like this (NOT working code, typed on the fly . . .)


<input type="button" id="choose_style" value="Go!" />
</form>

<script type="text/javascript"> 
window.onload=function() { assignBehaviors(); } 
// 
function.assignBehaviors() { 
 if (document.getElementById('choose_style')) { 
 document.getElementById('choose_style') onclick=function() { get_location(); return false; } 
 } 
} 
// 
function get_location() { 
 var loc = document.choseColor.xfer.options[document.choseColor.xfer.selectedIndex].value; 
 window.location=loc; 
} 
function Back() { 
window.history.back(); 
} 
</script>  

[edited by: rocknbil at 5:35 pm (utc) on May 9, 2011]

[jalarie]

The closing quote for "style" is just after the "40px" and I would have put a semicolon just after the "px" and before the quote just for consistency. Or maybe I'm just OCD.

The closing quote for the "onclick" is just before the "+document" item. I expect someone did not notice this and added the extra quote that you just removed.

Add a "<div class='form'>" just after your form tag and "</div>" just before the "</form>" tag and that should fix the problem. You may use any class you wish or leave it out entirely; it's the "div" that is needed.


For your script problem, "javascript:Back()" needs a semicolon just before the closing quote.

[Gloria]

Thank you jalarie, the script problem is no more ;).

Rocknbil, I wish I could go with HTML transitional which I'm more comfortable with. The reason for XHTML is that I got a template that requires it, (free from the 'net again, and btw "the client" is myself.)I tried to use html but that screwed up the template something awful.
Thank you for all the info. I have to try to get my head around it all now. I haven't been doing this for long and it is still feels difficult, but I'm learning.
Gloria

[jalarie]

Can you convert the template to html? It may be as easy as a mass search-and-replace of " />" with ">" throughout the document.

[Gloria]

Hi Jalarie, I've tried that,(took me ages!) but then I lost a lot of the formatting that makes this template ideal for my site. Thanks for the input, though. I have sent a question to the people who made the template in the first place. See if they have the time to answer. ;)
Gloria

[jalarie]

Is it private, or can you post the template code, or send it to me directly so that I can give it a try?

[Gloria]

Hi jalarie,
I tried to send you a "sticky mail" a while ago. It doesn't show in my outbox so I'm not sure you got it - did you? I sent a link to the template that I use.
Gloria

[jalarie]

Got it.