What's The Best Method To Semantically Structure A Form?

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 HTM

Solution 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.

Solution 2:

I personally use the following:

<form><fieldset><legend>Legend</legend><labelfor="element-id1"><spanclass="label">Label</span><inputtype="text"id="element-id1" /></label><labelfor="element-id2"><spanclass="label">Label</span><inputtype="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><labelfor="element-id1">Label</label><inputtype="text"id="element-id1" /></li><li><labelfor="element-id2">Label</label><inputtype="text"id="element-id2" /></li></ul></fieldset></form>