HTML Éléments de formulaire
Ce chapitre décrit tous les différents éléments du 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, en fonction de l'attribut type.
Exemple
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Try it Yourself »
Toutes les différentes valeurs de l'attribut type sont abordées 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 l'étiquette à haute voix lorsque l'utilisateur se concentrera sur l'élément d'entrée.
L'élément <label> aide également les utilisateurs qui ont des difficultés à cliquer sur de très petites régions (telles que des boutons radio ou des cases à cocher) — car lorsque l'utilisateur clique sur le texte dans le <label>, il active le bouton radio/la case à cocher.
L'attribut for de la balise <label> doit être égal au 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">Choose a car:</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>
Try it Yourself »
Les éléments <option> définissent 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 :
Valeurs visibles :
Utilisez l'attribut size pour spécifier le nombre de valeurs visibles :
Exemple
<label for="cars">Choose a car:</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>
Try it Yourself »
Autoriser plusieurs sélections :
Utilisez l'attribut multiple pour permettre à l'utilisateur de sélectionner plusieurs valeurs :
Exemple
<label for="cars">Choose a car:</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>
Try it Yourself »
L'élément <textarea>
L'élément <textarea> définit un champ de saisie multiligne (une zone de texte) :
Exemple
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself »
L'attribut rows spécifie le nombre de lignes visibles 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;">
The cat was playing in the garden.
</textarea>
Try it Yourself »
L'élément <button>
L'élément <button> définit un bouton cliquable :
Exemple
<button type="button" onclick="alert('Gloire à l’Ukraine !')">Click Me!</button>
Try it Yourself »
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 les données associées dans un formulaire.
L'élément <legend> définit une légende pour l'élément <fieldset>.
Exemple
<form action="/action_page.html">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Try it Yourself »
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 saisiront 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.html">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself »
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 affichez le résultat dans un élément <output> :
<form action="/action_page.html"
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>
Try it Yourself »
HTML Exercices
HTML Éléments de formulaire
| Étiquette | Description |
|---|---|
| <form> | Définit un formulaire HTML pour la saisie de l'utilisateur |
| <input> | Définir un contrôle d'entrée |
| <textarea> | Définit un contrôle de saisie multiligne (zone de texte) |
| <label> | Définit une étiquette pour un élément an <input> |
| <fieldset> | Regroupe les éléments liés dans un formulaire |
| <legend> | Définit une légende pour un élément <fieldset> |
| <select> | Définir une liste déroulante |
| <optgroup> | Définit un groupe d'options associées dans une liste déroulante |
| <option> | Définir une option dans une liste déroulante |
| <button> | Définir un bouton cliquable |
| <datalist> | Spécifier 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 la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
