HTML Éléments de Formulaire
Ce chapitre décrit tous les différents éléments de formulaire HTML.
Les Éléments HTML <form>
L'élément HTML <form> peut contenir un ou plusieurs des éléments de formulaire suivants :
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
L'Élément <input>
L'un des éléments de formulaire les plus utilisés est l'élément <input> .
L'élément <input> peut être affiché de plusieurs manières, selon l'attribut type .
Exemple
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"> Tous les différents types de l'attribut type sont abordés dans le chapitre suivant : Types d'Entrée HTML .
L'Élément <label>
L'élément <label> définit une étiquette pour plusieurs éléments de formulaire.
L'élément <label> est utile pour les utilisateurs de lecteurs d'écran, car le lecteur d'écran lira à haute voix l'étiquette lorsque l'utilisateur se concentre sur l'élément d'entrée.
L'élément <label> aide également les utilisateurs qui ont des difficultés à cliquer sur des zones très petites (comme les boutons radio ou les cases à cocher) - car lorsque l'utilisateur clique sur le texte à l'intérieur de l'élément <label> , cela active le bouton radio ou la case à cocher.
L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément <input> pour les lier ensemble.
L'Élément <select>
L'élément <select> définit une liste déroulante :
Exemple
<label for="cars">Choisissez une voiture:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> L'élément <option> définit une option qui peut être sélectionnée.
Par défaut, le premier élément de la liste déroulante est sélectionné.
Pour définir une option pré-sélectionnée, ajoutez l'attribut selected à l'option :
Exemple
<option value="fiat" selected>Fiat</option> Valeurs Visibles :
Utilisez l'attribut size pour spécifier le nombre de valeurs visibles :
Exemple
<label for="cars">Choisissez une voiture:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Autoriser les Sélections Multiples :
Utilisez l'attribut multiple pour permettre à l'utilisateur de sélectionner plusieurs valeurs :
Exemple
<label for="cars">Choisissez une voiture:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> L'Élément <textarea>
L'élément <textarea> définit un champ de saisie multi-lignes (une zone de texte) :
Exemple
<textarea name="message" rows="10" cols="30">
Le chat jouait dans le jardin.
</textarea> L'attribut rows spécifie le nombre visible de lignes dans une zone de texte.
L'attribut cols spécifie la largeur visible d'une zone de texte.
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Vous pouvez également définir la taille de la zone de texte en utilisant CSS :
Exemple
<textarea name="message" style="width:200px; height:600px;">
Le chat jouait dans le jardin.
</textarea> L'Élément <button>
L'élément <button> définit un bouton cliquable :
Exemple
<button type="button" onclick="alert('Hello World!')">Cliquez-moi !</button> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Remarque : Spécifiez toujours l'attribut type pour l'élément bouton. Différents navigateurs peuvent utiliser différents types par défaut pour l'élément bouton.
Les Éléments <fieldset> et <legend>
L'élément <fieldset> est utilisé pour regrouper des données liées dans un formulaire.
L'élément <legend> définit une légende pour l'élément <fieldset> .
Exemple
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Soumettre">
</fieldset>
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
L'Élément <datalist>
L'élément <datalist> spécifie une liste d'options pré-définies pour un élément <input> .
Les utilisateurs verront une liste déroulante des options pré-définies au fur et à mesure qu'ils saisissent des données.
L'attribut list de l'élément <input> doit faire référence à l'attribut id de l'élément <datalist> .
Exemple
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> L'Élément <output>
L'élément <output> représente le résultat d'un calcul (comme celui effectué par un script).
Exemple
Effectuez un calcul et montrez le résultat dans un élément <output> :
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Éléments de Formulaire HTML
| Tag | Description |
|---|---|
| <form> | Définit un formulaire HTML pour la saisie utilisateur |
| <input> | Définit un contrôle d'entrée |
| <textarea> | Définit un contrôle d'entrée multi-lignes (zone de texte) |
| <label> | Définit une étiquette pour un élément <input> |
| <fieldset> | Regroupe des éléments liés dans un formulaire |
| <legend> | Définit une légende pour un élément <fieldset> |
| <select> | Définit une liste déroulante |
| <optgroup> | Définit un groupe d'options liées dans une liste déroulante |
| <option> | Définit une option dans une liste déroulante |
| <button> | Définit un bouton cliquable |
| <datalist> | Spécifie une liste d'options pré-définies pour les contrôles d'entrée |
| <output> | Définit le résultat d'un calcul |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des Balises HTML .