Well-aligned form fields in CSS

[Nick Howes]

I was wondering what anybody would consider the best way to present a form
with labels and fields, such that the input fields are aligned on their left
edge? Obviously this can be done with a <table> but that's what I'm trying
to avoid, hence the subject. I've seen one method which involves the label
text being floated left and having a constant width, but I'm not sure how
stable this would be across browsers etc.

Any thoughts?

 

[Woolly Mittens]

I was wondering what anybody would consider the best way to present a form
with labels and fields, such that the input fields are aligned on their left
edge? Obviously this can be done with a <table> but that's what I'm trying
to avoid, hence the subject. I've seen one method which involves the label
text being floated left and having a constant width, but I'm not sure how
stable this would be across browsers etc.

I've been trying the following. It seems to work in most browsers, while not
looking terribly broken in ANY browser.

<style>
.formspacing0 span{
position : absolute;
}
.formspacing0 img{
width : 8em;
height : 1em;
}
</style>

<label for="lkUser" class="formspacing0"><span>Name:</span><img alt=""
src="/~wmittensrdx/images/spacing.gif" /></label>
<input id="lkUser" name="lkUser" type="text" size="24" maxlength="50"
value="type name" />

 

[Isofarro]

I was wondering what anybody would consider the best way to present a form
with labels and fields, such that the input fields are aligned on their
left edge? Obviously this can be done with a <table> but that's what I'm
trying to avoid,

Why? A table is the correct structure for tabular data.

 

[Nick Howes]

I was wondering what anybody would consider the best way to present a
form

Why? A table is the correct structure for tabular data.

This is true. I guess sometimes it's okay to use a table!

 

[laura]

I agree with you!
I have defined a main container (DIV) so that all the content of the page
can be easly moved just modifying the css.
but inside it I have a two column table (label-text_field) for input data

the trick is forcing yourself to use only one table... never nested more
than one or you'll go again in the table-panic!

 

[Matthias Gutfeldt]

Nick Howes wrote:




Why? A table is the correct structure for tabular data.

A form is not really 'tabular data' in the usual sense. But tables are a
very convenient and relatively harmless way to layout forms.


Matthias

 

[Isofarro]

A form is not really 'tabular data' in the usual sense.

What convinced me is a read-only version of a form (like a confirmation
details pages so prevalent in UK direct debit screens - e.g.
<https://www.swiftnet.co.uk/dd.asp> is very typical). The first page is a
series of text fields - Bank account number, branch code, branch address,
branch postcode. Now for a form its fine and accessible to use labels and
fieldsets for indicating structure and relation.

But this can't be done on a form-less read-only confirmation screen. Here
the correct markup would be a table (and it corresponds nicely to a record
in a relational database table). Now the only difference between the two
pages is that one has input fields and labels, and one uses a table. Yet
the logical structure is the same.

Yes, its an unusual table - a one record table, but it is a legitimate one,
IMO.

But tables are a
very convenient and relatively harmless way to layout forms.

Yep.