SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Your Opinions RE form markup

    Hi guys,

    I'm questioning my 'judgement' with regards to form markup.
    For the last few years i've been using dls to contain my forms, with the dts containing the labels and the dds containing the inputs with a dd with the class of btns containing the submits, etc.
    Like this;
    Code:
    <dl>
    <dt><label for="input">Label</label></dt>
    <dd><input type="text".... (you get the idea)
    <dd class="btns">
    ... form submits here ...
    </dd>
    </dl>
    I know this isn't how dls are meant to be used but it's been a nice and tidy method of handling forms, especially when it comes to 'inline' forms where the label and the input are on the same line so to speak.

    I've been looking at admin/CMS templates recently on themeforest and noticed that the vast majority of them use divs or tables to contain the forms.
    Personally I detest the table method as its too rigid and doesn't allow the pages to flow naturally on smaller resolutions and I think tables are used far, far too much for the wrong purposes.
    The div method isn't too bad, but not ideal.

    What do you guys think? What's your preferred method?
    Do you have any views related to my 'method'?

    Cheers.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Neither TABLE nor DL for that type of form. A Form Control associates those items on a form NOT a DL and I suspect in the majority of cases the TABLE was used because those web authors were cutting corners on layout.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Semantically, a form is neither (normally) about tabular data or definitions, so I wouldn't use either. I prefer to use a fieldset to group form elements. For any more fine-grained control, a few divs might be thrown in too.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Neither TABLE nor DL for that type of form. A Form Control associates those items on a form NOT a DL and I suspect in the majority of cases the TABLE was used because those web authors were cutting corners on layout.
    Quote Originally Posted by ralph.m View Post
    Semantically, a form is neither (normally) about tabular data or definitions, so I wouldn't use either. I prefer to use a fieldset to group form elements. For any more fine-grained control, a few divs might be thrown in too.

    Yes, i use the fieldset.
    The question I asked was more about how do you handle the subsequent content.
    Personally, I don't like the idea of having numerous labels and inputs floating around within a fieldset. A fieldset is for a group of fields, not just one.

    Can you offer examples of forms you've created or offer some HTML examples?

    Cheers

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a tutorial here at 24Ways where an OL is used for a form...
    http://24ways.org/2009/have-a-field-...th-html5-forms

  6. #6
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS for positioning and layout. HTML is about structure, so form and fieldset is the way to go with a div thrown in when necessary.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by L4DD13 View Post
    Personally, I don't like the idea of having numerous labels and inputs floating around within a fieldset.
    Why not? It depends on how you lay them out, but there's nothing wrong with having them all display: block if they are stacked, or separating them with a simple <br>, or floating them or using display: inline-block if they sit side by side. You can wrap them in simple <div>s if you like, but I don't see much advantage.

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    A FIELDSET is a form control group container so unless the form is extremely basic and has one item only, it makes sense to use it, as it's supposed to be used - even with one item form it is perfectly fine. Though some think it slightly overkill aesthetically if a form only contains a single input control.

    If you want to see some form demos Poes the yowling cat; is really, really into them: http://www.stommepoes.nl/forms.html and that's one of her main work tasks. And as you can see there are no lists used there because there is not any list association in that type of form.

    People often fall into the trap of using 'wrapping' OL or UL unnecessarily like they do with DL purely because they probably don't fully grasp semantics... trying to make certain tags do things there were never designed for to make themselves feel good about tentative element associations and relationships.

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input guys.
    I'm going to give the 'floating' approach a go even though there's a voice in my head screaming at me lol.

    Cheers


Tags for this Thread

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
  •