Xhtml Forms Layout - all within the standars

Lozbo

Sep 20 2005, 09:45 PM

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.

Reply

rvalkass

Sep 21 2005, 06:38 PM

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.

CODE

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.

HTML

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

Reply

Lozbo

Sep 21 2005, 09:46 PM

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:)

Reply

Tyssen

Sep 22 2005, 03:56 AM

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:

CODE

<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;
}

Reply

arboc7

Sep 22 2005, 04:30 AM

QUOTE(Tyssen @ Sep 21 2005, 10:56 PM)

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:

CODE

<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;
}

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

Reply

Lozbo

Nov 23 2005, 10:09 PM

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?

Reply

Tyssen

Nov 23 2005, 10:20 PM

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.

Reply

arboc7

Nov 23 2005, 11:59 PM

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

Thanks again...

Reply

Lozbo

Nov 25 2005, 01:52 AM

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

Reply

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE