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