JavaScript and client side scripting.
Moderator: General Moderators
Ree
Forum Regular
Posts: 592 Joined: Fri Jun 10, 2005 1:43 am
Location: LT
Post
by Ree » Mon Aug 22, 2005 4:44 am
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?
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Mon Aug 22, 2005 5:30 am
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
Ree
Forum Regular
Posts: 592 Joined: Fri Jun 10, 2005 1:43 am
Location: LT
Post
by Ree » Mon Aug 22, 2005 6:22 am
erm... //div removed - this thingy is just for you to see what I removed... imagine an empty line in place of those.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 23, 2005 4:21 am
i hope you should have got some errors in few line numbers when you validated thru XHTML validator at
http://www.w3.org
Ree
Forum Regular
Posts: 592 Joined: Fri Jun 10, 2005 1:43 am
Location: LT
Post
by Ree » Tue Aug 23, 2005 5:15 am
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 .
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 23, 2005 5:21 am
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/
Last edited by
raghavan20 on Tue Aug 23, 2005 5:17 pm, edited 2 times in total.
Roja
Tutorials Group
Posts: 2692 Joined: Sun Jan 04, 2004 10:30 pm
Post
by Roja » Tue Aug 23, 2005 6:03 am
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.
wwwapu
Forum Contributor
Posts: 197 Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland
Post
by wwwapu » Tue Aug 23, 2005 11:59 am
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
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 23, 2005 5:20 pm
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?
nielsene
DevNet Resident
Posts: 1834 Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA
Post
by nielsene » Tue Aug 23, 2005 5:37 pm
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.
Roja
Tutorials Group
Posts: 2692 Joined: Sun Jan 04, 2004 10:30 pm
Post
by Roja » Tue Aug 23, 2005 5:47 pm
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.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Tue Aug 23, 2005 6:07 pm
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???
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Tue Aug 23, 2005 6:36 pm
because a grandparent != parent.