Validation Question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Validation Question

Post 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">&nbsp;</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">&nbsp;</span>
    //div removed
    <div id="f_button_0">
      <input type="submit" value="Login" />
    </div>
  </form>
</div>
it doesn't. Anyone could explain me why?
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

I dont see a problem in it mate :roll:
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">&nbsp;</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 »

erm... //div removed - this thingy is just for you to see what I removed... imagine an empty line in place of those.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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">&nbsp;</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">&nbsp;</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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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 :roll:
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 »

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.
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post 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
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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">&nbsp;</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?
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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">&nbsp;</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. :)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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">&nbsp;</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 :wink: 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??? :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

because a grandparent != parent.
Post Reply