Search code examples
htmlformssemantics

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

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