homepage Welcome to WebmasterWorld Guest from 54.198.25.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Form doesn't validate as XHTML
Problem validating a free form that I picked up
Gloria



 
Msg#: 4309807 posted 11:43 am on May 9, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4309807 posted 4:32 pm on May 9, 2011 (gmt 0)

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

Gloria



 
Msg#: 4309807 posted 4:54 pm on May 9, 2011 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4309807 posted 5:24 pm on May 9, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4309807 posted 5:32 pm on May 9, 2011 (gmt 0)

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



 
Msg#: 4309807 posted 5:52 pm on May 9, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4309807 posted 5:05 pm on May 11, 2011 (gmt 0)
Can you convert the template to html? It may be as easy as a mass search-and-replace of " />" with ">" throughout the document.
Gloria



 
Msg#: 4309807 posted 5:20 pm on May 11, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4309807 posted 5:33 pm on May 11, 2011 (gmt 0)
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



 
Msg#: 4309807 posted 6:50 pm on May 11, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4309807 posted 3:01 pm on May 13, 2011 (gmt 0)

Got it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved