«

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?

--
Nick Howes

"Nick Howes" <> wrote in message
news:bne64e$68u$...
> 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" />

Nick Howes wrote:

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

--
Iso.
FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
Recommended Hosting: http://www.affordablehost.com/
Web Design Tutorial: http://www.sitepoint.com/article/1010

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

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

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!

> Why? A table is the correct structure for tabular data.
>
> --
> Iso.
> FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
> Recommended Hosting: http://www.affordablehost.com/
> Web Design Tutorial: http://www.sitepoint.com/article/1010

Isofarro wrote:
> Nick Howes wrote:
>
>
>>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.

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

Matthias Gutfeldt wrote:

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


--
Iso.
FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
Recommended Hosting: http://www.affordablehost.com/
Web Design Tutorial: http://www.sitepoint.com/article/1010