question about form validation

[gerg]

I am trying to produce a valid html / css layout at the site:

http://www.guardianharvest.com

I have a form in which I want all the form elements to be in a strait
line IE:

Username: <input box> Password: <input box> <submit button>

However apon validation it says that I can't have textual elements in a
form without a wrapper of some sort, <p> or <div> however apon adding
these elements around the text I can no longer keep all the elements in
a strait line. Check out the above site and you'll see what I mean.

Any ideas?

Thanks in advance.

Greg

 

[Toby Inkster]

Username: <input box> Password: <input box> <submit button>

However apon validation it says that I can't have textual elements in a
form without a wrapper of some sort, <p> or <div> however apon adding
these elements around the text I can no longer keep all the elements in
a strait line.

<form ...>
<div>
<label>Username: <input name="username"></label>
<label>Password: <input name="password" type="password"></label>
<input type="submit" value="Log In">
</div>
</form>

 

[Jukka K. Korpela]

I have a form in which I want all the form elements to be in a strait
line IE:

Username: <input box> Password: <input box> <submit button>

Stop wanting that. Such a layout reduces accessibility. Put one field,
together with its label, on one line.

However apon validation it says that I can't have textual elements in a
form without a wrapper of some sort, <p> or <div>

Yes, if your document purports to use syntax that requires it.

however apon adding
these elements around the text I can no longer keep all the elements in
a strait line.

Yes you can. You don't put each element in a block of its own. That would
actually be against the idea of block. You can wrap all the stuff inside a
single <div> or, more reasonably, use
<div>Username: <input ...></div>
<div>Password: <input ...></div>
<div>submit button</div>

 

[gerg]

gerg wrote:




<form ...>
<div>
<label>Username: <input name="username"></label>
<label>Password: <input name="password" type="password"></label>
<input type="submit" value="Log In">
</div>
</form>

Toby, thanks for the response. After changing my markup to add the
<label> tag i'm now getting this error from the validator:

Error Line 24 column 6: document type does not allow element "label"
here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div",
"pre", "address", "fieldset", "ins", "del" start-tag.

It did work as far as allowing me to keep my form in a strait line, but
the validator dosen't seem to like it.

http://www.guardianharvest.com

Thanks again Toby.

Greg

 

[gerg]

Stop wanting that. Such a layout reduces accessibility. Put one field,
together with its label, on one line.

Thank you, that's very helpful. How does it reduce accessibility?

Yes you can. You don't put each element in a block of its own. That would
actually be against the idea of block. You can wrap all the stuff inside a
single <div> or, more reasonably, use
<div>Username: <input ...></div>
<div>Password: <input ...></div>
<div>submit button</div>

If I do the <div>username <input..></div> i get the stacked layout,
which is not what I WANT. Aside from "stop wanting that" is there any
other advice you could offer?

Thanks in advance.

Greg

 

[Toby Inkster]

It did work as far as allowing me to keep my form in a strait line, but
the validator dosen't seem to like it.

I bet you left out the <DIV> element, which was in my example.

 

[Carolyn Marenger]

Thank you, that's very helpful. How does it reduce accessibility?

In a narrow viewport, the forced wrapping may end up looking like...

Username: <input box> Password:[NEW LINE]
<input box> <submit button>

I think it is more of a making your site look like the rest - standards and
the like. If you prefer your look and feel - go for it!

If I do the <div>username <input..></div> i get the stacked layout,
which is not what I WANT. Aside from "stop wanting that" is there any
other advice you could offer?

I haven't tried it, but <div> </div> creates a block, resulting in your
stacked layout. <span> </span> may resolve your issue. The second option
might be <div class="inline"> </div> around each item, and in your
stylesheet, specify display="inline" for the related class, to remove the
'block' effect.

Thanks in advance.

I hope this helps,

Carolyn

 

[gerg]

gerg wrote:

Jukka K. Korpela wrote:



Thank you, that's very helpful. How does it reduce accessibility?

In a narrow viewport, the forced wrapping may end up looking like...

Username: <input box> Password:[NEW LINE]
<input box> <submit button>

I think it is more of a making your site look like the rest - standards and
the like. If you prefer your look and feel - go for it!

If I do the <div>username <input..></div> i get the stacked layout,
which is not what I WANT. Aside from "stop wanting that" is there any
other advice you could offer?

I haven't tried it, but <div> </div> creates a block, resulting in your
stacked layout. <span> </span> may resolve your issue. The second option
might be <div class="inline"> </div> around each item, and in your
stylesheet, specify display="inline" for the related class, to remove the
'block' effect.

Thanks in advance.

I hope this helps,

Carolyn

Carolyn and Toby, Thank you for your quick and consise responses. I'm
gonna go make this work now! Thanks again.

Greg

 

[Jukka K. Korpela]

Aside from "stop wanting that" is there any
other advice you could offer?

I did, since I expected that you'll refuse to accept the good advice.
The second best advice was in my message, and you even quoted it.