Le langage HTML permet de regrouper différents éléments d'un formulaire dans un cadre représentant un thème permettant par là d'améliorer la lisibilité de la page.
La commande <fieldset> marque le début d'un regroupement.
La commande </fieldset> marque la fin du regroupement.
La commande <legend> attribue une légende au regroupement.
La commande </legend> permet de fermer la légende.
L'attribut align="Type d'alignement"* définit un alignement pour la légende.
L'attribut accesskey="Raccourci" définit un raccourci (lettre + Alt).
* Les options possibles d'alignement sont "Left" (par défaut) pour la gauche, "right" pour la droite, "bottom" pour le bas ou "top" pour le haut.
<html>
<head>
<title>Un titre pertinent</title>
<meta name="Description" content="...">
<meta http-equiv="Date" content="01/01/2000">
...
</head>
<body>
<form>
<fieldset>
<legend align="Type d'alignement">
Légende
</legend>
<input
name="Nom du champ"
type="Type de champ">
<input
type="checkbox"
name="Nom de la commande"
value="Nom de l'option">
<input
type="checkbox"
name="Nom de la commande"
value="Nom de l'option">
<input
type="checkbox"
name="Nom de la commande"
value="Nom de l'option">
<textarea
name="Nom du champ"
cols="Valeur"
rows="Valeur">
Contenu par défaut
</textarea>
...
<input
type="checkbox"
name="Nom de la commande"
value="Nom de l'option">
</fieldset>
...
</form>
...
Diverses commandes HTML
...
</body>
</html> |
<fieldset align="center">
<legend align="left">
Exemple de regroupement
</legend>
<table cellpadding="30" align="center">
<tr>
<td colspan="2" align="center" width="100%">
<input
type="text" name="boitetxt"
size="38" maxlength="240"
value="Ceci est une champ de saisie">
</td>
</tr>
<tr>
<td>
<select name="listsimple" size="5">
<option value="Premier item">
Premier item</option>
<option value="Second item">
Second item</option>
<option value="Troisième item">
Troisième item</option>
<option value="Quatrième item">
Quatrième item</option>
<option value="Cinquième item">
Cinquième item</option>
</select>
</td>
<td rowspan="3" width="35%">
<input
type="radio" name="CaseRadio"
value="Premier item">Premier item<br>
<input
type="radio" name="CaseRadio"
value="Second item">Second item<br>
<input
type="radio" name="CaseRadio"
value="Troisième item">Troisième item<br>
<input
type="radio" name="CaseRadio"
value="Quatrième item">Second item<br>
<input
type="radio" name="CaseRadio"
value="Cinquième item">Cinquième item
<br><br>
<input
type="checkbox" name="CaseCocher"
value="Premier item">Premier item<br>
<input
type="checkbox" name="CaseCocher"
value="Second item">Second item<br>
<input
type="checkbox" name="CaseCocher"
value="Troisième item">Troisième item<br>
<input
type="checkbox" name="CaseCocher"
value="Quatrième item">Quatrième item<br>
<input
type="checkbox" name="CaseCocher"
value="Cinquième item">Cinquième item
</td>
</tr>
<tr>
<td>
<select name="listsimple" size="1">
<option value="Premier item">Premier item</option>
<option value="Second item">Second item</option>
<option value="Troisième item">Troisième item</option>
<option value="Quatrième item">Quatrième item</option>
<option value="Cinquième item">Cinquième item</option>
<option value="Premier item">Sixième item</option>
<option value="Second item">Septième item</option>
<option value="Troisième item">Huitième item</option>
<option value="Quatrième item">Neuvième item</option>
<option value="Cinquième item">Dixième item</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Bouton">
</td>
</tr>
</table>
</fieldset> |