SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Forms - Tables with CSS or CSS only?

    I am needing to put together an order form and the rest of the site is CSS as much as possible. I have searched and haven't found much if any information on the best way to handle forms. Which would be the better way to do this?

    Thanks in advance,

    John

  2. #2
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Osnabrück, Germany
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use tables to arrange the input fields.
    If you want to customize the fields I would use several classes for text inputs and buttons.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jodmcc
    I am needing to put together an order form and the rest of the site is CSS as much as possible. I have searched and haven't found much if any information on the best way to handle forms. Which would be the better way to do this?

    Thanks in advance,

    John
    I would definitely recomment trying to tackle forms using only CSS if you can. Not only do you reduce the amount of code in your documents (as there aren't loads of tr and td tags lying around), but it will be easier to maintain and alter in the future and you'll have more chance of a high search engine ranking (again, as there aren't loadsa tr or td tags you will have a higher keyword density)

    A good tutorial on styling forms using CSS only is at

    http://www.sitepoint.com/article/style-web-forms-css

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Using a table is a generally accepted way to lay out forms, even among most CSS-heads. If you decide to go this route, keep your table code as light as possible. For a tableless way to lay forms out, I recommend taking a look at http://alistapart.com/articles/practicalcss/

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is possible to get very compact HTML and use CSS to layout a form.
    This single collum form has no table (CSS)
    and this multi collum version also uses CSS for layout.
    Once you get used to it, it's much simplar then using a table, with lot's less HTML.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just use <fieldset> and <legend>, it'll allow you to create perfectly fine form layouts without any silly table-clutter.
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  7. #7
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only time you may struggle with CSS and FORMs is with radio options and checkboxes. The alignment never seems to work right.
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but you can solve that with position: relative; top: Xpx;

    Although the actual value you want there will vary from browser to browser...
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  9. #9
    SitePoint Member r3nooo's Avatar
    Join Date
    Apr 2004
    Location
    White Lake, Michigan
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John, I suggest looking into the book, "Defensive Design for the Web" by 37signals (http://www.37signals.com). They had Chapter 4: Bulletproof Forms listed as a PDF-downloadable link at this address, http://www.37signals.com/book/, but it appears they've since changed it! Maybe it'll come back, but regardless, I'd bookmark 37signals because they're top-notch CSS designers.

    Also, I've got the SitePoint book, "Designing Without Tables," and it looks into forms a bit, too, to line up text and input form areas better then with tables. Maybe SitePoint has exerpts of this elsewhere on their site, since they are the book publisher.

    Hope this is of some help!
    -Steve


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •