Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 05-19-2010, 09:28 AM
  #1
ercatli
Battler (Level 3)
 
Join Date: Jun 2007
Location: Sydney Australia
Posts: 21
iTrader: (0)
ercatli is an unknown quantity at this point
Correct code for forms

I have a simple form which consists of 3 radio buttons (it is one of those feedback questions at the bottom of a web page asking "Did you find this page helpful? Yes A little No"). I looked up several websites to get the supposedly correct code, and basically they all suggested something like this for each button:

Quote:
<label for="r1">
<input type="radio" name="group1" id="r1" value="1" /> button one</label>
The form is enclosed within <p> and <form> tags, and this is the HTML code I used for each of the buttons (with different labels and ids of course):

Quote:
<label for="n2">Yes</label>
<input type="radio" name="helpful" id="n2" value="2" onclick="hresponse('2')" >
But when I try to validate this page with the W3C validator, I get 9 errors, with the one relevant here being:

Quote:
Line 256, Column 19: document type does not allow element "LABEL" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
<label for="n2">Yes</label>

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.
If I change my code to:

Quote:
<label for="n2">Yes
<input type="radio" name="helpful" id="n2" value="2" onclick="hresponse('2')" >
</label>
I only get 6 errors, but this particular error still occurs for each button.

I am using HTML 4.01 strict. Can anyone explain what is happening here please, and how to fix it?

Thanks.
ercatli is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-19-2010, 10:06 AM
  #2
Ryaden
Novice (Level 1)
 
Join Date: Apr 2010
Posts: 8
iTrader: (0)
Ryaden is an unknown quantity at this point
Hey,

Okay ive checked it out a bit for you (and for myself also =D )

The point is, your label and the input should be indeed inside a <p></p> (or any other tag the validator spits out, like <h1> etc.)

I've made a piece of code which passed the validation test, so you can check it out.

<form action="#">
<p>
<label for="yes">Yes</label>
<input type="radio" name="helpful" id="yes" value="yes" />
<label for="no">No</label>
<input type="radio" name="helpful" id="no" value="no" />
</p>
</form>

You can ofcourse write your own code this way, i've tested it in the w3c validator with 4.01 strict and it passed.

Let me know if it worked out for you!

Edit: Though he gave me some warnings about the closing tag of <input /> I've closed it inside itself which is good, as you have to close all opening tags to get passed with strict Doctype, though it says:

<input type="radio" name="helpful" id="yes" value="2" />

The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.

I don't know any other way to close the input tag though.

Cheers,

Ryaden

Last edited by Ryaden : 05-19-2010 at 10:12 AM. Reason: some more info given
Ryaden is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-19-2010, 10:39 PM
  #3
ercatli
Battler (Level 3)
 
Join Date: Jun 2007
Location: Sydney Australia
Posts: 21
iTrader: (0)
ercatli is an unknown quantity at this point
Ryaden,

Thanks heaps! It worked first time.

You suggested two changes. (1) You replaced my "n0" with "yes", etc, but I can hardly think that made the difference. (2) You put the <p> tags inside the <form> rather than outside, and I think that must have made the difference. I can't say I understand, but if it works ....

BTW, I didn't use the backslash to close the input tag, and it seems to work fine. I don't really understand why the backslash is there in the examples I looked at, but again, if it works ....

Thanks again.
ercatli is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-20-2010, 01:59 AM
  #4
Ryaden
Novice (Level 1)
 
Join Date: Apr 2010
Posts: 8
iTrader: (0)
Ryaden is an unknown quantity at this point
Hey ercatli,

No problem at all.

Yeah, i changed the id's but that's no problem, you can put your own id's, just make sure the id's are the same as the <label for=" "> and the label closed before the input.

It's definitely the <p> tag inside the form that fixed it. I guess it's one of the rules to write strict HTML code.

About the closing tags: I always close every opening tag (like <br /> , <p></p> etc.)
But i guess thats only if you write code in XHTML (every opening tag MUST have a closing tag).
Ryaden is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-20-2010, 07:30 AM
  #5
ercatli
Battler (Level 3)
 
Join Date: Jun 2007
Location: Sydney Australia
Posts: 21
iTrader: (0)
ercatli is an unknown quantity at this point
I spoke too soon!

I spoke too soon. It validates, but now it doesn't put the data in the database.

I think what's happening is this. When a button is clicked, it activates a javascript which first of all replaces the buttons with a thank you message, then sends the data off to a php file which writes to the mysql database. To replace the text, I make the text blank then write the new text to it like so:

Quote:
document.getElementById("formfeed").innerHTML = "";
document.getElementById("feedback").innerHTML = "Thank you for your feedback.";
The elements referred to were <p id="feedback"> and<form id="formfeed" action="">. I'm thinking that now that I've put the <form> tag first, I may have to change the ids. So I think it should be OK, but I just thought I'd let you know.

Re: "About the closing tags: I always close every opening tag (like <br /> , <p></p> etc.)"

I'm not sure about this. Does a <input> tag need to be closed? I guess it should, which is why all the web examples showed it that way, but it mustn't only be unnecessary in HTML4, but actually wrong. (?)
ercatli is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-20-2010, 07:50 AM
  #6
ercatli
Battler (Level 3)
 
Join Date: Jun 2007
Location: Sydney Australia
Posts: 21
iTrader: (0)
ercatli is an unknown quantity at this point
Yeah, just swapped the two IDs over and it worked fine. Thanks again.
ercatli is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 12:13 AM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.