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">&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?

Posted: Mon Aug 22, 2005 5:30 am
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

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">&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.

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 :roll:
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">&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?

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">&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. :)

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">&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??? :)

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