How to make a form xhtml compliant.

[Paragon]

Since we are talking standards hee. I would like to know how to make a form xhtml compliant. I tested my page using the w3.org html validator but I got errors in my form. I know "name" should be "id" now, but then the form won't work any more. here's the form:
<font color=maroon>
<form method="post" action="Security/check_user.asp">
user*<input type="text" name="UserName" size="12" value="your name" />*
pass*<input type="password" size="12" name="UserPass" />
<input type="submit" value="enter" class="input2" />
</form>
</font id=maroon>
and here's the validation link:
http://validator.w3.org/check?uri=http%3A%2F%2Fparagonxls.xs4all.nl%2FBeta %2F&charset=iso-8859-1

And yes this form is inside a div, but this is also not allowed, is it?

[ttrenka]

According to the XHTML 1.0 Strict DTD, the name attribute is allowed in an input element, so that's not a problem.

However, it looks like (from your validation) that the problem is not your form or inputs, but rather the text you have surrounding them. It may be that the validator is seeing those nodes as text nodes, and then barfing on the input nodes.

Try this:
<div>
<form ...>
<span>user</span><input type="text"... />
<span>password</span><input type="password"... />
</form>
</div>

According to the DTD, it is also not a problem to wrap a set of <form></form> tags within a <div></div>, so that should be OK.

It may also be a problem because the validator sees the input tag as a block level tag, and you can't embed a block level tag inside a inline tag (i.e. text node).

Try it and see if it works.

Tom Trenka

[paul]

If you're going to enclose the labels in an element, then for God's sake use a label element.

[Paragon]

span/label both did not work. Still getting: <font color=maroon>possible cause is an inline element containing a block-level element</font id=maroon>

[ttrenka]

<BLOCKQUOTE id=quote><font size=1 face="Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>If you're going to enclose the labels in an element, then for God's sake use a label element.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Arial, Helvetica" size=2 id=quote>
Of course, my bad.

<BLOCKQUOTE id=quote><font size=1 face="Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>span/label both did not work. Still getting: possible cause is an inline element containing a block-level element.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Arial, Helvetica" size=2 id=quote>
What I normally do is something like this:

<form ...>
<div>
<label>user:</label>
<input ... />
</div>
<div>
<label>Password</label>
<input ... />
</div>
</form>

Not necessarily the most standard compliant way, but it does the job.

And at the risk of upsetting paul....you *might* want to do it the normal way, which is to use a table to lay it out (I hear it coming....)

Unless, of course, you wish to use CSS to place the input elements, which you would do (with the above example) by placing the containing div elements, and NOT the input elements directly.


Tom Trenka

[aboodman]

you can't have an input element as a direct child of form. i have no idea why. needs to be in a block-level element (p, div, etc) first.

-a

[ttrenka]

<BLOCKQUOTE id=quote><font size=1 face="Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>you can't have an input element as a direct child of form. i have no idea why. needs to be in a block-level element (p, div, etc) first.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Arial, Helvetica" size=2 id=quote>

Ahhh...I guess then what I wrote above IS the standards-compliant way.

That seems kinda weird, though. Haven't taken a good look at the DTD myself, maybe I will tomorrow.

I always felt that the way forms are handled in X/HTML are weird anyways. For instance, it seems to me that it would be much more useful to put the "action" attribute within what ever triggers the submission, i.e. input type="submit" or input type="button". That would make life a lot easier, and at the same time create greater functionality for straight-up forms, so we wouldn't have to do all sorts of work arounds in JavaScript....

Anyone echo that sentiment?

Tom Trenka