What's the best method to semantically structure a form?

Question

I've seen several examples of how developers structure their forms using tables, divs, and lists; all of which are not very semantic. What is the best method for structuring an HTML document so it breaks each label & input group to the next line and can be easily read - without the use of CSS?

(I feel that ol's and ul's are simply a replacement for tr's and td's. A form, in my opinion, is not a content or definition list)

I almost feel like div's are the best format since a div is a clear 'division' or grouping of items but I'm not sure.

Sample HTML

<form>  
    <fieldset>  
        <legend>Your Favorites</legend>  
        <label for="color">Color</label>  
        <input id="color" name="color" type="text" />  
        <label for="food">Food</label>  
        <input id="food" name="food" type="text" />  
        <button type="submit">Submit</button>  
    </fieldset>  
</form>

Answer 1

Be careful not to get semantics and structure confused. HTML elements exist, primarily for expressing structure. Semantics is about giving the structure meaning. While there is a some semantic meaning in some HTML markup, it is very generic meaning. So my answer is broken along those lines:

Semantics

Why is it important for you to express semantic meaning through your form? Is the markup supposed to be consumed by a client other than a standard browser? Is it a special use-case?

If you need to infuse semantic meaning to the elements of your form do so by decorating your structural markup with appropriate classes and ids - you won't likely get any semantic meaning from the HTML elements in your form regardless of which element type you use to group/separate your inputs.

Structure

• If you're just looking to provide visual separation of inputs and want to use the least possible markup then use <br /> tags after your inputs.
• If you want to structurally group your inputs to their labels then use <div>, <ul>, <ol>, or <dl> - all of these tags can achieve this objective equally as well as the others.
• If it is important to imply, structurally, that the form elements belong together as a set then don't use <div> elements which indicate distinctness or separateness. List elements indicate that the different child items are a set, and, like @bookcasey says in his comment, a form is, in most cases, a list of inputs which belong together logically.

That's my 2c.

For what it's worth, without being able to use CSS, I'd use <ul> (or <ol> if the order is important) in this situation. When I have CSS I use <dl> which gives me more style control.

UPDATE:

In response to Alohci's arguments, I'm reversing my position about not using <div> elements. By wrapping them in a form or fieldset they are grouped together logically already - this alongside the use of appropriate classes (i.e. <div class="field"> as suggested by Alohci in the comments) will provide structure and appropriate semantic meaning.

Answer 2

I personally use the following:

<form>
  <fieldset>
    <legend>Legend</legend>
    <label for="element-id1"><span class="label">Label</span><input type="text" id="element-id1" /></label>
    <label for="element-id2"><span class="label">Label</span><input type="text" id="element-id2" /></label>
  </fieldset>
</form>

...and set the labels to display: block. The .labels I also set to display: block with a set width.

I'm sure some would say that the span is needless markup, but it depends on how you look at it. I think it's necessary as it allows me to structure the labels for the form elements nicely thus helping usability.

-- EDIT --

After your edit, I would recommend the following:

<form>
  <fieldset>
    <legend>Legend</legend>
    <ul>
      <li><label for="element-id1">Label</label><input type="text" id="element-id1" /></li>
      <li><label for="element-id2">Label</label><input type="text" id="element-id2" /></li>  
    </ul>
  </fieldset>
</form>