Grow your CSS skills. Land your dream job.

Form semantic question

  • # July 7, 2008 at 9:38 am

    Hi,

    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

    Code:

    Or with tables

    Code:
    .V1
    # July 7, 2008 at 1:53 pm

    U can also do:

    Code:

    and Lists > tables

    # July 7, 2008 at 5:24 pm

    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 "test@test.com" , 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.

    box
    # July 8, 2008 at 8:39 am

    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

    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
    "about.com" 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.

*May or may not contain any actual "CSS" or "Tricks".