What is the recomended method for Laying out HTML forms?

Discussion in 'HTML' started by Owen Brunker, Feb 28, 2008.

  1. Owen Brunker

    Owen Brunker Guest

    DIVs decidedly makes life easier in most layouts. But laying out forms is
    still time consuming. I'm currently using the following technique to layout
    the labels

    <div style="clear: both;">
    <div style="float: left; etc">
    <label> ...</label>
    </div>
    <div style="float: left; etc">
    <input>
    </div>
    </div>

    I dont see any real difference between what I have done above when compared
    with the following

    <table>
    <tr>
    <td><label>...</label></td>
    <td><input></td>
    </tr>
    </table>

    Am I on the right track with this?

    What are others doing in this area?

    Thanks
    Owen Brunker
     
    Owen Brunker, Feb 28, 2008
    #1
    1. Advertising

  2. Owen Brunker

    Els Guest

    Owen Brunker wrote:

    > DIVs decidedly makes life easier in most layouts. But laying out forms is
    > still time consuming.


    When trying to do it with divs and floats, yes.

    > What are others doing in this area?


    For forms, I use tables.

    --
    Els http://locusmeus.com/
     
    Els, Feb 28, 2008
    #2
    1. Advertising

  3. On Feb 28, 8:48 am, Els <> wrote:
    > For forms, I use tables.


    BLASPHEMY!!!!
     
    Travis Newbury, Feb 28, 2008
    #3
  4. Owen Brunker

    Els Guest

    Travis Newbury wrote:

    > On Feb 28, 8:48 am, Els <> wrote:
    >> For forms, I use tables.

    >
    > BLASPHEMY!!!!


    I can do worse than that: I've recently built a site that had...
    Flash in it!

    --
    Els http://locusmeus.com/
     
    Els, Feb 28, 2008
    #4
  5. Owen Brunker

    C A Upsdell Guest

    Owen Brunker wrote:
    >
    > I dont see any real difference between what I have done above when compared
    > with the following
    >
    > <table>
    > <tr>
    > <td><label>...</label></td>
    > <td><input></td>
    > </tr>
    > </table>
    >
    > Am I on the right track with this?


    I would go with the table in this case, but change the first column to
    TH instead of TD.
     
    C A Upsdell, Feb 28, 2008
    #5
  6. Owen Brunker

    place57 Guest

    On Feb 28, 10:00 am, Els <> wrote:
    > >> For forms, I use tables.

    > > BLASPHEMY!!!!

    > I can do worse than that: I've recently built a site that had...
    > Flash in it!


    Flash is the Saviour of the internet... (o_0)
     
    place57, Feb 28, 2008
    #6
  7. Gazing into my crystal ball I observed "Owen Brunker"
    <> writing in
    news:uUyxj.20386$:

    > DIVs decidedly makes life easier in most layouts. But laying out
    > forms is still time consuming. I'm currently using the following
    > technique to layout the labels
    >
    ><div style="clear: both;">
    > <div style="float: left; etc">
    > <label> ...</label>
    > </div>
    > <div style="float: left; etc">
    > <input>
    > </div>
    ></div>


    Too complicated, IMHO. See below.

    >
    > I dont see any real difference between what I have done above when
    > compared with the following
    >
    ><table>
    > <tr>
    > <td><label>...</label></td>
    > <td><input></td>
    > </tr>
    ></table>


    You _could_ do that, but ...

    >
    > Am I on the right track with this?


    See below.

    >
    > What are others doing in this area?
    >


    <form method="post" action="whatever">
    <fieldset><legend>Section or form title</legend>
    <label for="field1" id="field11">Field1 </label> <input type="text"
    name="field1" id="field1"><br>
    <label for="field2" id="field21">Field2 </label> <input type="text"
    name="field2" id="field2"><br>
    <input type="submit" value="Submit">
    </fieldset>
    </form>

    CSS:
    label {display:block; float:left; width: 7em; text-align: right; margin-
    right:1em;}
    form br {clear:left}

    With scripting, you can give the user a visual indication that a
    required field is missing, like so:

    CSS (if field1 were is missing perhaps)
    #field11 {background-color:#ffff00; color: #ff0000} /*red on yellow*/
    #field1 {background-color: #ffc0cb; color: #000} /*black on pink */

    Have a look at [http://intraproducts.com/usenet/requiredfields.asp].
    It's in ASP Classic but can easily be used by any other scripting
    language.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Feb 28, 2008
    #7
  8. Owen Brunker

    mrcakey Guest

    "Els" <> wrote in message
    news:sh06k0mu0yfo.su28vquhcbe5$...
    > Travis Newbury wrote:
    >
    >> On Feb 28, 8:48 am, Els <> wrote:
    >>> For forms, I use tables.

    >>
    >> BLASPHEMY!!!!

    >
    > I can do worse than that: I've recently built a site that had...
    > Flash in it!
    >
    > --
    > Els http://locusmeus.com/


    Let's start a breakaway group: alt.html.heretics!!!

    +mrcakey
     
    mrcakey, Feb 28, 2008
    #8
  9. Owen Brunker

    Els Guest

    mrcakey wrote:

    > "Els" <> wrote in message
    > news:sh06k0mu0yfo.su28vquhcbe5$...
    >> Travis Newbury wrote:
    >>
    >>> On Feb 28, 8:48 am, Els <> wrote:
    >>>> For forms, I use tables.
    >>>
    >>> BLASPHEMY!!!!

    >>
    >> I can do worse than that: I've recently built a site that had...
    >> Flash in it!

    >
    > Let's start a breakaway group: alt.html.heretics!!!


    Sure you don't mean alt.html.erratics ? ;-)

    --
    Els http://locusmeus.com/
     
    Els, Feb 28, 2008
    #9
  10. Owen Brunker

    mrcakey Guest

    "Els" <> wrote in message
    news:z9zhbuy1l0x3$...
    > mrcakey wrote:
    >
    >> "Els" <> wrote in message
    >> news:sh06k0mu0yfo.su28vquhcbe5$...
    >>> Travis Newbury wrote:
    >>>
    >>>> On Feb 28, 8:48 am, Els <> wrote:
    >>>>> For forms, I use tables.
    >>>>
    >>>> BLASPHEMY!!!!
    >>>
    >>> I can do worse than that: I've recently built a site that had...
    >>> Flash in it!

    >>
    >> Let's start a breakaway group: alt.html.heretics!!!

    >
    > Sure you don't mean alt.html.erratics ? ;-)
    >
    > --
    > Els http://locusmeus.com/


    Let's do that too!

    +mrcakey
     
    mrcakey, Feb 28, 2008
    #10
  11. Owen Brunker wrote:
    > DIVs decidedly makes life easier in most layouts. But laying out forms is
    > still time consuming. I'm currently using the following technique to layout
    > the labels
    >
    > <div style="clear: both;">
    > <div style="float: left; etc">
    > <label> ...</label>
    > </div>
    > <div style="float: left; etc">
    > <input>
    > </div>
    > </div>



    First of all you do know that label & input elements are inline by
    default so there is no need float...

    <div>
    <label for="fn">First Name:</label>
    <input id="fn" name="fn" type="text">
    </div>
    <div>
    <label for="ln">Last Name:</label>
    <input id="ln" name="ln" type="text">
    </div>


    >
    > I dont see any real difference between what I have done above when compared
    > with the following
    >
    > <table>
    > <tr>
    > <td><label>...</label></td>
    > <td><input></td>
    > </tr>
    > </table>
    >


    But then again form data is usually name-value pairs so you can make
    that case that the relationship of the label to the input field is
    tabular. A two column table, label (name) column and an input (value)
    column.

    Lets straighten out a common misconception, using CSS stylesheets does
    *not* mean tables are no longer valid. If it's tabular then use a table
    for heavens sake! What you should not do is use a table (and nested
    tables) as a framework to 'hang' a webpage, i.e., place a logo here and
    a menu there...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 28, 2008
    #11
  12. Owen Brunker

    Els Guest

    Jonathan N. Little wrote:

    > First of all you do know that label & input elements are inline by
    > default so there is no need float...


    Unless you want the input elements to line up nicely.

    > Lets straighten out a common misconception, using CSS stylesheets does
    > *not* mean tables are no longer valid. If it's tabular then use a table
    > for heavens sake! What you should not do is use a table (and nested
    > tables) as a framework to 'hang' a webpage, i.e., place a logo here and
    > a menu there...


    Exactly.

    --
    Els http://locusmeus.com/
     
    Els, Feb 28, 2008
    #12
  13. Owen Brunker

    mrcakey Guest

    "Jonathan N. Little" <> wrote in message
    news:c76ce$47c6ee34$40cba7bd$...
    > Owen Brunker wrote:

    <snip>
    >
    > Lets straighten out a common misconception, using CSS stylesheets does
    > *not* mean tables are no longer valid. If it's tabular then use a table


    Hear hear!

    +mrcakey
     
    mrcakey, Feb 28, 2008
    #13
  14. mrcakey wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:c76ce$47c6ee34$40cba7bd$...
    >> Owen Brunker wrote:

    > <snip>
    >> Lets straighten out a common misconception, using CSS stylesheets does
    >> *not* mean tables are no longer valid. If it's tabular then use a table

    >
    > Hear hear!


    Just been a bit frustrating seeing noobs go through all kinds of
    gyrations to avoid tables. They're either doing that or the other
    extreme of nested tables, colspan and rowspan monsters! Why always
    either|or? Where are they getting these ideas?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 28, 2008
    #14
  15. Jonathan N. Little wrote:

    > Where are they getting these ideas?


    They never heard the words "tabular data" before?

    Or saw Dr. Codd at a conference?

    --
    -bts
    -long-time database guy
     
    Beauregard T. Shagnasty, Feb 28, 2008
    #15
  16. On 2008-02-28, place57 wrote:
    > On Feb 28, 10:00 am, Els <> wrote:
    >> >> For forms, I use tables.
    >> > BLASPHEMY!!!!

    >> I can do worse than that: I've recently built a site that had...
    >> Flash in it!

    >
    > Flash is the Saviour of the internet... (o_0)


    ...and should be crucified?

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Feb 28, 2008
    #16
  17. Beauregard T. Shagnasty wrote:
    > Jonathan N. Little wrote:
    >
    >> Where are they getting these ideas?

    >
    > They never heard the words "tabular data" before?
    >
    > Or saw Dr. Codd at a conference?
    >

    Must be dense today--not sure what you mean?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 28, 2008
    #17
  18. Jonathan N. Little wrote:

    > Beauregard T. Shagnasty wrote:
    >> Jonathan N. Little wrote:
    >>> Where are they getting these ideas?

    >>
    >> They never heard the words "tabular data" before?
    >>
    >> Or saw Dr. Codd at a conference?
    >>

    > Must be dense today--not sure what you mean?


    http://en.wikipedia.org/wiki/Edgar_F._Codd

    He is the gentleman usually considered the "Father of Relational
    Database Theory." See other links there as well: the 12 Rules, Database
    Normalization, etc. My databases are always 3NF.
    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Feb 28, 2008
    #18
  19. Owen Brunker

    Neredbojias Guest

    On 28 Feb 2008, Chris F.A. Johnson wrote:

    > On 2008-02-28, place57 wrote:
    >> On Feb 28, 10:00 am, Els <> wrote:
    >>> >> For forms, I use tables.
    >>> > BLASPHEMY!!!!
    >>> I can do worse than that: I've recently built a site that had...
    >>> Flash in it!

    >>
    >> Flash is the Saviour of the internet... (o_0)

    >
    > ...and should be crucified?


    Nope, quartered and cremated. You wouldn't want to take a chance on a
    resurrection, would you? <g>

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
     
    Neredbojias, Feb 29, 2008
    #19
  20. Owen Brunker

    Owen Brunker Guest

    "Jonathan N. Little" <> wrote in message
    news:c3e2b$47c6f5c1$40cba7bd$...
    >
    > Just been a bit frustrating seeing noobs go through all kinds of gyrations
    > to avoid tables. They're either doing that or the other extreme of nested
    > tables, colspan and rowspan monsters! Why always either|or? Where are they
    > getting these ideas?
    >


    Thankyou for clearing this up Jonathan.

    By the way, where did I get the ideas from? From mis-interpreting the flack
    that others get when they use tables instead of divs. ;-))

    Seriously though, this has cleared up a misconception that I have had.

    Cheers
    Owen Brunker
     
    Owen Brunker, Feb 29, 2008
    #20
    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. Jack Black
    Replies:
    0
    Views:
    377
    Jack Black
    Sep 28, 2004
  2. John Goche
    Replies:
    0
    Views:
    595
    John Goche
    Feb 5, 2006
  3. frank

    Laying out a form in java

    frank, Dec 8, 2006, in forum: Java
    Replies:
    10
    Views:
    578
    Ian Wilson
    Dec 11, 2006
  4. David
    Replies:
    3
    Views:
    562
    David
    Jul 17, 2009
  5. Roger Stenson

    ASP Version 2 Beginner Question - Laying out Complex Forms

    Roger Stenson, Apr 30, 2008, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    225
Loading...

Share This Page