SELFHTML: HTML/XHTML / Formulaires / Grouper des éléments et étiquette pour des éléments

	Grouper des éléments et étiquette pour des éléments
	Grouper des éléments Étiquette pour des éléments Autres informations

Grouper des éléments

Des formulaires plus importants sont souvent constitués de groupes d'éléments. Un formulaire typique de commande par exemple est constitué de groupes d'éléments comme "expéditeur", "produits commandés" et "envoyer/interrompre le formulaire". Vous pouvez former de tels groupes d'éléments vous-même à partir de HTML 4.0. Un navigateur Web doit rendre visibles de tels groupes au moyen de lignes ou d'effets semblables.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Faites votre choix!</h1>

<form action="fieldset_legend.htm">
<fieldset><legend><b>expediteur</b></legend>
<table>
  <tr>
    <td>Votre prénom:</td>
    <td><input type="text" size="40" maxlength="40" name="prenom"></td>
  </tr><tr>
    <td>Votre nom de famille:</td>
    <td><input type="text" size="40" maxlength="40" name="nom"></td>
  </tr>
</table>
</fieldset>
<fieldset>
<legend><b>souhaits</b></legend>
<table>
  <tr>
    <td>Votre principal souhait:</td>
    <td><input type="text" size="40" maxlength="40" name="souhaitprincipal"></td>
  </tr><tr>
    <td>En avez vous d'autre:</td>
    <td><input type="text" size="40" maxlength="40" name="autresouhait"></td>
  </tr>
</table>
</fieldset>
</form>

</body>
</html>

Explication:

Des éléments de formulaire appartenant au même groupe doivent être inclus dans les repères <fieldset>... et </fieldset> (fieldset = groupe de champs). Entre ces repères vous pouvez définir les parties de votre formulaire que vous désirez.

Sous le repère d'ouverture <fieldset> et avant le premier contenu de formulaire du groupe, vous devez affecter un titre de groupe pour le groupe d'éléments (légende). Insérez le texte de titre de groupe dans les repères <legend>... et </legend>. Vous pouvez formater comme vous le voulez le texte qui s'y trouve à l'aide de HTML/CSS.

Étiquette pour des éléments

Pour les éléments de formulaires comme les champs de saisie et les listes de choix, il n'y avait jusqu'alors aucune possibilité logique d'inscription. Vous pouvez bien mettre du texte devant un élément tel qu'une "adresse électronique", mais un tel texte est du texte HTML normal qui n'a aucune relation définie avec l'élément pour lequel il sert d'inscription. À l'aide d'étiquettes vous pouvez pourtant définir ce genre de relation logique avec un élément de formulaire.

Exemple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Mon inscription m'appartient comme mon nom sur la porte!</h1>

<form action="label.htm">
<table>
  <tr>
    <td><label for="prenom">Votre prénom:</label></td>
    <td><input type="text" id="prenom" name="prenom"></td>
  </tr><tr>
    <td><label for="nom">Votre nom de famille:</label></td>
    <td><input type="text" id="nom" name="nom"></td>
  </tr>
</table>
</form>

</body>
</html>

Explication:

L'exemple montre comment vous pouvez à l'aide d'un tableau "sans quadrillage" formater proprement les inscriptions et les champs de saisie d'un formulaire. Ce qu'il y a de particulier, c'est qu'une relation logique est établie entre l'inscription et le champ de saisie.

De plus l'élément de formulaire lui-même doit, dans l'exemple ci-dessus deux champs de saisie, recevoir un nom sans équivoque, à l'aide de l' attribut universel id=. N'attribuez pas un nom trop long. Les noms ne doivent pas comporter d'espace ni de caractère spécial ni de caractère avec accent. Le premier signe doit être une lettre. Ensuite les chiffres sont également permis. N'utilisez comme caractères spéciaux tout au plus que le tiret de soulignement (_), le trait d'union (-), les deux points (:) ou le point (.).

Le texte d'inscription que vous affectez à un tel élément doit être placé entre les repères <label> et </label>. Le texte d'inscription peut contenir toute forme de formatage de HTML/CSS. Le repère label lui même n'a aucun effet visible à l'écran, il sert en fait à établir la relation logique avec l'élément de formulaire. Vous définissez cette relation dans le repère d'ouverture <label> avec l'attribut for= (for = pour). Mentionnez ensuite entre guillemets le nom exact id de l'élément de formulaire auquel doit se rapporter l'étiquette.

Attention:

Le repère label peut aussi être utilisé sur d'autres éléments de formulaire, par exemple sur textarea ou select.

Autres informations

Dans le sommaire de référence HTML vous trouverez des données précisant où les éléments décrits ici peuvent être mis, quels attributs ils peuvent avoir et ce à quoi il faut veiller pour ces différents attributs:
référence pour les éléments pour le groupement d'éléments (<fieldset>...</fieldset>)
référence pour les attributs pour le groupement d'éléments (<fieldset>...</fieldset>)
référence pour les éléments pour les légendes de groupes (<legend>...</legend>)
référence pour les attributs pour les légendes de groupes (<legend>...</legend>)
référence pour les éléments pour les étiquettes (<label>...</label>)
référence pour les attributs pour les étiquettes (<label>...</label>)


	Recherche par tabulateur, raccourcis clavier et mise en grisé
	Éléments cachés dans les formulaires

SELFHTML/Aides à la navigation

HTML/XHML

Formulaires