Field separation using fieldset

When a form contains a large number of fields, they are generally broken up into various blocks, each known as a fieldset in HTML.

Such blocks of fields are sequenced into ul/li type lists:

[...]
<form method="post" action="#ENV{action}"><div>
#ACTION_FORMULAIRE{#ENV{action}}
<ul>
    <li class="fieldset">
        <fieldset>
            <h3 class="legend">Section A</h3>
            <ul>
                <li> ... </li>
                <li> ... </li>
                ...
            </ul>
        </fieldset>
    </li>
    <li class="fieldset">
        <fieldset>
            <h3 class="legend">Section B</h3>
            <ul>
                <li> ... </li>
                <li> ... </li>
                ...
            </ul>
        </fieldset>
    </li>
</ul>
    <p class="boutons"><input type="submit" class="submit" value="<:pass_ok:>" /></p>
</div></form>

This example shows that you can have embedded lists, with the first <li> having the CSS class of "fieldset". Instead of providing HTML <legend> tags, a different format is provided using <h3 class="legend">, which offers a lot more opportunity for CSS tag styling.

Author Mark Baber Published : Updated : 01/06/10

Translations : English, Español, français