Page 1 of 1
Validation Question
Posted: Mon Aug 22, 2005 4:44 am
by Ree
If I use this form
Code: Select all
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
<div>
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
</div>
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
it validates XHTML 1.1.
If I use
Code: Select all
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
//div removed
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
//div removed
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
it doesn't. Anyone could explain me why?
Posted: Mon Aug 22, 2005 5:30 am
by raghavan20
I dont see a problem in it mate
but I am pretty sure you did not remove the div tag using //
Code: Select all
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
//div removed <!---you wont have removed using //. do you?-->
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
//div removed <!---you wont have removed using //. do you?-->
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
may be you should check
http://www.w3.org for more details on forms
Posted: Mon Aug 22, 2005 6:22 am
by Ree
erm... //div removed - this thingy is just for you to see what I removed... imagine an empty line in place of those.
Posted: Tue Aug 23, 2005 4:21 am
by raghavan20
i hope you should have got some errors in few line numbers when you validated thru XHTML validator at
http://www.w3.org
Posted: Tue Aug 23, 2005 5:15 am
by Ree
No errors at all if you're talking about the valid code I posted.
Here you go - must be really clear now.
Valid XHTML 1.1:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
<div>
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
</div>
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
</body>
</html>
Invalid:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
</body>
</html>
I am interested why that div is required there. So far I haven't found an answer at
http://www.w3.org.
Posted: Tue Aug 23, 2005 5:21 am
by raghavan20
use this link and upload your file; it shows up seven errors all because of one elusive error ...we have to find out
http://validator.w3.org/
Posted: Tue Aug 23, 2005 6:03 am
by Roja
Ree wrote:
I am interested why that div is required there. So far I haven't found an answer at
http://www.w3.org.
The validator answers the question, although its a hard to understand answer.
document type does not allow element "label" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag.
In a nutshell, form isn't a valid parent for label, but div is. Another page that says similar is here:
http://learningforlife.fsu.edu/webmaste ... /label.cfm
Unfortunately, the xhtml standards pages are not much more than an xml dtd, which makes it far harder to point you to the relevant section.
Posted: Tue Aug 23, 2005 11:59 am
by wwwapu
Form is kind of funny "inlineblock" like blockquote is: Basically they both are block elements, but they require block elements inside. I have not yet found a proper explanation for this, but as long it is remembered it makes no harm.
Forms are explained of course at W3C
http://www.w3.org/TR/html4/interact/forms.html they are the same for XHTML
Making understanable forms is advised (surprise surprise) at W3C
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms
Posted: Tue Aug 23, 2005 5:20 pm
by raghavan20
Code: Select all
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
<div>
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
</div>
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
why cant it take the div , f_container?? Does it require a container to just before the image tag?
Posted: Tue Aug 23, 2005 5:37 pm
by nielsene
I normally nest the fieldset element inside the form. I don't exactly understand why they want it, but it makes more sense to me than a div. The fieldset has something to do with acccessibility, but I don't understand what it offeres on top of the "normal" stuff like good tab order, access keys, etc.
Posted: Tue Aug 23, 2005 5:47 pm
by Roja
raghavan20 wrote:Code: Select all
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
<div>
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
</div>
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
why cant it take the div , f_container?? Does it require a container to just before the image tag?
Because f_container isn't the
parent. Parent is the key. In this layout, the div (blank) under form is the parent.
Just because it's parent's, parent's parent is a div doesn't mean much.

Posted: Tue Aug 23, 2005 6:07 pm
by raghavan20
Code: Select all
<div id="f_container" class="med_bg">
<span>Please login below:</span><br /><br />
<form method="post" action="../process/authorize.php">
<label class="f_label_0" for="user">Username:</label>
<input class="pass_f" type="text" name="user" id="user" /><br />
<label class="f_label_0" for="pass">Password:</label>
<input class="pass_f" type="password" name="pass" id="pass" /><br />
<span class="f_label_0"> </span>
<div id="f_button_0">
<input type="submit" value="Login" />
</div>
</form>
</div>
This is actually the case I am talking about. no parent div for label..it died now

and we have the grandparent div or the f_container div...
now why can't the label take 'f_container div' as the parent div???

Posted: Tue Aug 23, 2005 6:36 pm
by feyd
because a grandparent != parent.