The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Form semantic question

  • # July 7, 2008 at 9:38 am


    This is not an issue i have with css or html, but on the best way to setup a form for semantic purposes. I’ve seen many way to setup forms an i finally started to set them in un-ordered list, but i know some people uses tables, which one is better?

    My list setup looks like this


    Or with tables

    # July 7, 2008 at 1:53 pm

    This reply has been reported for inappropriate content.

    U can also do:


    and Lists > tables

    # July 7, 2008 at 5:24 pm

    This reply has been reported for inappropriate content.

    I am often struggling with styling forms too. But using a ul for a form just doesn’t feel good to me, I think it’s mis-using it for something it wasn’t meant for. @chris: Maybe it’s a good idea to make a screencast about styling forms?

    # July 7, 2008 at 6:35 pm

    I like to use a definition lists because i see it as users are defining the form fields. The field email is defined to "" , the field name to " john doe" etc…. (its hard to explain somehow).

    But still, there are a lot of different opinions and solutions about this subject, all of them have their pros and cons.

    # July 8, 2008 at 8:39 am

    This reply has been reported for inappropriate content.

    I don’t use Lists and definately don’t use tabes – in no way can a form be considered tabular data. Forms have their own set of tags – Fieldset, Legend, Label, Select and Input will give you all of the semantic value you should need. The nature of the form content has been defined initially by the Form tag, so anything that follows is assumed to be a form element, making Lists and other non-form related elements redundant in my view. Further meaning can be implied with the addition of id and class attributes.

    # July 8, 2008 at 11:39 am

    This reply has been reported for inappropriate content.

    A lot of times you don’t need any wrapping elements at all. Just your labels and your inputs will do. I fairly regularly make forms with simply a fieldset, legend, and labels and elements.

    Is there a particular reason you need all the wrapping elements?

    # July 10, 2008 at 5:17 am
    "" wrote:
    To use the label tag, simply surround the text that you want associated with a form field with the label tag. If you don’t include the form field inside the label tag, then you should use the for attribute to associate it with the id of the form element you want to label.

    From post: The HTML Label Tag – Make Your Forms Accessible

    Label-tag support "chart":

    • IE: 4.0+[/*:m]
    • Mozilla: 1.0+[/*:m]
    • Opera: 4.0+[/*:m]
    • Safari: 1.0+[/*:m][/list:u]
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed