SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - Form formatting without table's. How to ?

    Hi,

    I am Coldfusion programmer and I have been using tables for formatting the html forms.

    Recently, I made a new site which is totally css i.e. div's only and no tables.

    My question is how could I align form elements without using tables and using only div's? Is there a how to guide?

    Please advise.

    Thanks,

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want to be careful that you aren't just using CSS because it is "the new fangled thing".

    Tables should still be used for tabular data, and one could very easily argue that a form with the label on the left and the input on the right, are an instance of this.

    I remember when I first learnt CSS, I made all my forms with it. However recently I have been making more and more complicated ones with tables instead.

    I do believe that very simple forms like a simple contact form should be CSS (I just made "label" display:block).

    However ones like I describe above, I would do with tables. You will have to decide this for yourself, since it is personal preference.

    If you do decide to go for CSS, this article is very good.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't personally use a table for a form - I don't think it's tabular data.

    Personally I just have the label and input, a line break and the input box under the label.

    If you want something fancier then a combination of this: http://www.sitepoint.com/article/fancy-form-design-css/ and this: http://www.websemantics.co.uk/tutori...essible_forms/ should do the trick.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  4. #4
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Divs and Spans

    Quote Originally Posted by ajashadi View Post
    Hi,

    My question is how could I align form elements without using tables and using only div's? Is there a how to guide?
    Use Spans inside the divs and give them a specific width but do not forget to float them left or right.

    Good Luck
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained

  5. #5
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you everyone, that really helps.... I will use what you have mentioned. In only extreme cases, where it would be difficult to use css i will go with tables like AleCrust mentioned in his post.

    Thanks again

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use the proper elements for the job. For a "section heading" use a legend (which requires the use of a fieldset around that "section"); for a form label, use the LABEL element and associate it with an ID, and so on. As for the styling of them, it will depend on what your form will look like, though I tend to add a DIV around my fieldsets and a SPAN around the text in my legends.

    I'll also float my labels and use margins/padding as needed. For an example of what I'm talking about, check out this example CSS form I made last year.


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
  •