Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Well-aligned form fields in CSS

Reply
Thread Tools

Well-aligned form fields in CSS

 
 
Nick Howes
Guest
Posts: n/a
 
      10-25-2003
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


 
Reply With Quote
 
 
 
 
Woolly Mittens
Guest
Posts: n/a
 
      10-25-2003

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


 
Reply With Quote
 
 
 
 
Isofarro
Guest
Posts: n/a
 
      10-25-2003
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
 
Reply With Quote
 
Nick Howes
Guest
Posts: n/a
 
      10-26-2003
> > 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!


 
Reply With Quote
 
laura
Guest
Posts: n/a
 
      10-27-2003
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



 
Reply With Quote
 
Matthias Gutfeldt
Guest
Posts: n/a
 
      10-27-2003
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

 
Reply With Quote
 
Isofarro
Guest
Posts: n/a
 
      10-27-2003
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Request.Form to retrieve looped form fields David ASP General 2 09-20-2007 01:33 PM
get all the form fields in a form Mr. SweatyFinger ASP .Net 20 01-31-2007 08:24 AM
document.form.submit() doesn't work for large form fields alan_atwood Javascript 2 03-02-2006 04:25 PM
Populate form values based on previous same form fields Rizyak Javascript 4 06-11-2004 10:31 PM
Form Validation Problem...Persisiting form fields on validation failure. bnp Javascript 4 05-12-2004 12:16 PM



Advertisments