Xhtml Forms Layout all within the standars

[Lozbo 0]

We all remember the good old tables right? When we used them to design or beloved websites. But nowadays things have change a little bit, strict code format, css, xhtml and no tables. And so when it comes finally to the design of a form, instead of having two rows (left row with the label and right row with the input tag) and those rows aligned to look nice (left row= right aligned and right row=left aligned), how can we keep order with our fancy style sheet?Thanks in advance.

[rvalkass 5]

I was having a look at this earlier today. This is the CSS I ended up using. It probably isn't perfect, but I got it to work.

div.line {     clear: both;     padding-top: 10px;}div.line span.text {     float: left;     width: 120px;     text-align: right;}div.line span.input {     float: right;     width: 350px;     text-align: left;}

Then put each line within a <div class="line"></div>
Each text label goes inside the div, between span tags, class "text".
Each input of the form goes between span tags with a class of "input".

e.g.

<form>
<div class="line">
<span class="text">Username:</span><span class="input"><input type="text" size="25"></span>
</div>
<div class="line">
<span class="text">Password:</span><span class="input"><input type="password" size="25"></span>
</div>
</form>

Hope this helps you.

[Lozbo 0]

Thanks! It does help. Actually i had already thought something like that, but never tried. Additionally, isnt there an easier way to do this? To float all p to the right and all input to the left, I dont know how but i mean to avoid having to put inside a div each line of stuff... I think you understand me... just an easier way.I mean i thank rvalkass, i do find this helpful, im just asking hehe:)

[Tyssen 0]

A better way to do it is to use the <label> tag cos that tag gives a label to each field (good for people with screen readers too). Here's an example of a form I've done:

<label for="Name"><span>Name:</span><input type="text" name="Name" id="Name" maxlength="100" value="" /></label><label for="Phone"><span>Phone:</span><input type="text" name="Phone" id="Phone" maxlength="15" value="" /></label>label { clear: left; margin-bottom: 5px; }label span { float: left; width: 120px; margin-right: 10px; }input { 	padding: 2px 0; margin-bottom: 5px;	width: 200px;	font-size: 85%;	color: #660000;	vertical-align: middle;	border: 1px solid #660000;}

[arboc7 0]

A better way to do it is to use the <label> tag cos that tag gives a label to each field (good for people with screen readers too). Here's an example of a form I've done:

 

<label for="Name"><span>Name:</span><input type="text" name="Name" id="Name" maxlength="100" value="" /></label><label for="Phone"><span>Phone:</span><input type="text" name="Phone" id="Phone" maxlength="15" value="" /></label>label { clear: left; margin-bottom: 5px; }label span { float: left; width: 120px; margin-right: 10px; }input { 	padding: 2px 0; margin-bottom: 5px;	width: 200px;	font-size: 85%;	color: #660000;	vertical-align: middle;	border: 1px solid #660000;}

188236[/snapback]

I was about to say...why use the excess <span> tags when you can use <label> tags, and besides, using <label> tags makes your script more geared toward semantic markup...

[Lozbo 0]

And is there a way of doing this without any span? just label and input floats? A way of selecting through the cointainer div and tell the form, the fieldset or whatever to float some where or something?

[Tyssen 0]

I'm not aware of a way to do it without using spans. All the CSS-driven forms I've seen have done it that way. If you want to see a souped-up CSS tableless form, check out this.

[arboc7 0]

Thanks for the link Tyssen, that's a really nice form!Thanks again...

[Lozbo 0]

Yeah cool, im glad at least that theres a way to get a tableless way to do it, though if some one knows how to do it without spans or divs i'll apreciate, though im really happy with my brand new fancy tableless design... like someone said: "Look ma... no tables!"... hehe, heard it somewhere...