Well-aligned form fields in CSS

Discussion in 'HTML' started by Nick Howes, Oct 25, 2003.

  1. Nick Howes

    Nick Howes Guest

    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, Oct 25, 2003
    #1
    1. Advertising

  2. "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" />
     
    Woolly Mittens, Oct 25, 2003
    #2
    1. Advertising

  3. Nick Howes

    Isofarro Guest

    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
     
    Isofarro, Oct 25, 2003
    #3
  4. Nick Howes

    Nick Howes Guest

    > > 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!
     
    Nick Howes, Oct 26, 2003
    #4
  5. Nick Howes

    laura Guest

    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
     
    laura, Oct 27, 2003
    #5
  6. 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, Oct 27, 2003
    #6
  7. Nick Howes

    Isofarro Guest

    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
     
    Isofarro, Oct 27, 2003
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DU
    Replies:
    8
    Views:
    657
    Toby A Inkster
    Oct 8, 2003
  2. Nick Howes

    right-aligned img in a div

    Nick Howes, Oct 13, 2003, in forum: HTML
    Replies:
    6
    Views:
    458
    David Dorward
    Oct 16, 2003
  3. Replies:
    0
    Views:
    432
  4. Guest
    Replies:
    2
    Views:
    161
    Bob Barrows [MVP]
    Feb 20, 2006
  5. Replies:
    23
    Views:
    561
    Tim Streater
    Dec 18, 2013
Loading...

Share This Page