W3C Validation of <FORM>

[rarebit]

Hi, i'm bringing my site up to W3C standards. I use tables to ... actually I just solved it!

 

I've started so I may as well finish...

I use tables to layout my forms nicely, however i've been getting errors from W3C validator, http://validator.w3.org/.

 

Here's a basic form on it's own, it can sit fully within a table, no errors:

<table<tr><td>
<form method="POST" action="/login">
<input type="text" name="user" size='16' value="">
<input type="password" name="passwd" size='16' value="">
<input type="submit" name="login" value="login">
</form>
</td></tr></table>

 

Here's how i've been doing tables when generating in a larger set of tables:

<table>
<tr><td><form method="POST" action="login"></td></tr>
<tr><td align='right'>user:</td><td><input type="text" name="user" size='16' value=""></td></tr>
<tr><td align='right'>pass:</td><td><input type="password" name="passwd" size='16' value=""></td></tr>
<tr><td></td><td align='left' width='50px'><input type="submit" name="login" value="login"></td><td></td></tr>
<tr><td></form></td></tr>
</table>

And that gives error like:

  1.  Error  Line 21, Column 47: end tag for "FORM" omitted, but its declaration does not permit this.

          * You forgot to close a tag, or

          * you used something inside this tag that was not allowed, and the validator is complaining that the tag should be closed before such content can be allowed.

      The next message, "start tag was here" points to the particular instance of the tag in question); the positional indicator points to where the validator expected you to close the tag.

 

  2. Info Line 21, Column 8: start tag was here.

 

  3. Error Line 25, Column 14: end tag for element "FORM" which is not open.

      The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

      If this error occurred in a script section of your document, you should probably read this FAQ entry.

 

However this seems to work (tables within form tags!):

<form method="POST" action="/login">
<table<tr><td>
<input type="text" name="user" size='16' value="">
<input type="password" name="passwd" size='16' value="">
<input type="submit" name="login" value="login">
</td></tr></table>
</form>

 

And thanky, thanky, this works as well!:

<table<tr><td>
<form method="POST" action="/login">
<table<tr><td>
<input type="text" name="user" size='16' value="">
<input type="password" name="passwd" size='16' value="">
<input type="submit" name="login" value="login">
</td></tr></table>
</form>
</td></tr></table>

 

[ToonMariner]

eeeeeeuuuuuuuuuuuuuuccccccccchhhhhhhh

 

Where are the filedsets and labels??????

 

you don't need (nor should you use) a table to layout a form (remember tables are for displaying tabular data).  I often have a bit of bother grouping labels together with their input with out a div but on the whole my forms are of the following structure...

 

<form>
<fieldset>
  <legend>Login Details</legend>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" value="defaultval" />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" />
</fieldset>
</form>

 

Obviously with other fieldsets and submit buttons etc...

 

But you can style that lot to yield a beautifully layed out form.

[rarebit]

I see what your saying, however it's not giving me the ability to align (or tabulate) as I wish. For instance I like my labels each right aligned and all vertically aligned, just as my input boxes. Also I might have whole pages with multiple forms that need to be aligned. I'd rather avoid css based div's (even though I need to learn more on use of inline div properties). I gotta say I still prefer tables, layout is much easier and accurate, yes I might start using labels (because of 'for' property, even though same names in diff forms trip it). But as you said tables are for tabulating data, a form is data in it's self and used for collating data, so it sounds perfect for the job.

 

Also those boxes around the fieldset have funny corners, no, not nice and you can't specify width's. Thanks for intel but not for me, i'll stick to my draughting way's...

[ToonMariner]

label

{

float: left;

text-align: right;

width: 8em;

}

 

input.txt

{

margin-left: 8.5em;

}

 

tables are very difficult to work with compared to css. The ONLY reason people still think tables are easier to work with is because they don't try it with css.......

 

applying a css based layout you allow your siteto be visted by handheld media - or define a print style sheet to change how the page should print...

 

bottom line is divs/css are easier to work with once you know how - its just the learning bit that people shy away from - stating such [ludicrous] things as 'tables are more accurate' or 'easier to work with'.

 

I am on a crusade but I know I can't make you go and do this - you have to want it.  That increased skill in web development will save you years of work down the line - promise!

[rarebit]

I actually picked up zen css today and looked at the website the other day. I suppose i'll have a further look, but sub classing everything seems very external. However the two instances you have shown don't look like they'll solve the alignment issue. I'll have a go though, I do enjoy a good bit of css though. But I seem to be struggling to find a 'simple' way to move stuff which confirms to w3c, any ideas? I'll actually start a new topic on this in a few day's cos I have something on my list which needs it... Cheers