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

SELFHTML/Quickbar HTML Formulaires

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

Grouper des éléments

Exemple d'affichage: aperçu

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 "envoi du formulaire/interruption". Vous pouvez former de tels groupes d'éléments vous-même à partir de HTML 4.0. Un navigateur WWW doit rendre visibles de tels groupes au moyen de lignes ou d'effets semblables.

L' Explorer Internet MS interprète ces commandes depuis la version 4.x. Netscape ne connaît pas encore ces commandes dans sa version 4.x.

Exemple:

<form>

<fieldset>
<legend><b>expéditeur</b></legend>
<table>
  <tr>
    <td align=right>Votre prénom:</td>
    <td><input type=text size=40 maxlength=40></td>
  </tr><tr>
    <td align=right>Votre nom:</td>
    <td><input type=text size=40 maxlength=40"></td>
  </tr>
</table>
</fieldset>

<fieldset>
<legend><b>désir</b></legend>
<table>
  <tr>
    <td align=right>Votre souhait:</td>
    <td><input type=text size=40 maxlength=40></td>
  </tr><tr>
    <td align=right>En avez vous d'autre:</td>
    <td><input type=text size=40 maxlength=40"></td>
  </tr>
</table>
</fieldset>

<fieldset>
<legend><b>formulaire</b></legend>
<input type=submit value="envoi">
<input type=reset value="interrompre">
</fieldset>

</form>

Explication:

Des éléments de formulaire appartenant au même groupe doivent être inclus dans les repères <fieldset>...</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 (légende) pour le groupe d'éléments. 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.

Étiquettes pour éléments

Exemple d'affichage: aperçu

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. À partir de HTML 4.0 vous pouvez définir des étiquettes qui établissent ce genre de relation logique avec un élément de formulaire.

Exemple:

<form>
<table>
  <tr>
    <td><label for="prenom">Votre prénom:</label></td>
    <td><input type=text id="prenom"></td>
  </tr><tr>
    <td><label for="nom">Votre nom:</label></td>
    <td><input type=text id="nom"></td>
  </tr>
</table>
</form>

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=. Le nom id doit figurer entre guillemets. Il ne peut comporter que des lettres, des chiffres et le tiret de soulignement, le premier signe doit être une lettre et il ne peut contenir aucun caractère spécial.

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


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

SELFHTML/Quickbar HTML Formulaires