HTML Formulaires
Un formulaire HTML est utilisé pour collecter les entrées des utilisateurs. Les entrées de l'utilisateur sont le plus souvent envoyées à un serveur pour traitement.
L'élément <form>
L'élément HTML <form> est utilisé pour créer un formulaire HTML pour la saisie de l'utilisateur :
<form>
.
form elements
.
</form>
L'élément <form> est un conteneur pour différents types d'éléments de saisie, tels que : des champs de texte, des cases à cocher, des boutons radio, des boutons de soumission, etc.
Tous les différents éléments du formulaire sont abordés dans ce chapitre : Éléments de formulaire HTML.
L'élément <input>
L'élément HTML <input> est l'élément de formulaire le plus utilisé.
Un élément <input> peut être affiché de plusieurs manières, en fonction de l'attribut type.
Voici quelques exemples :
| Tapez | Description |
|---|---|
| <input type="text"> | Affiche un champ de saisie de texte sur une seule ligne |
| <input type="radio"> | Affiche un bouton radio (pour sélectionner l'un des nombreux choix) |
| <input type="checkbox"> | Affiche une case à cocher (pour sélectionner zéro ou plusieurs choix parmi de nombreux choix) |
| <input type="submit"> | Affiche un bouton soumis (pour soumettre le formulaire) |
| <input type="button"> | Affiche un bouton cliquable |
Tous les différents types d'entrée sont couverts dans ce chapitre : Types d'entrée HTML.
Champs de texte
Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
Exemple
Un formulaire avec des champs de saisie pour le texte :
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Remarque : Le formulaire lui-même n'est pas visible. Notez également que la largeur par défaut d'un champ de saisie est de 20 caractères.
L'élément <label>
Notez l'utilisation de l'élément <label> dans l'exemple ci-dessus.
La balise <label> définit une étiquette pour de nombreux éléments du 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.
Boutons radio
Le <input type="radio"> définit un bouton radio.
Les boutons radio permettent à un utilisateur de sélectionner UN choix parmi un nombre limité.
Exemple
Un formulaire avec des boutons radio :
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Choisissez votre langue Web préférée :
Cases à cocher
Le <input type="checkbox"> définit une case à cocher.
Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou PLUS d'options parmi un nombre limité de choix.
Exemple
Un formulaire avec des cases à cocher :
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Le bouton Soumettre
Le <input type="submit"> définit un bouton pour soumettre les données du formulaire à un gestionnaire de formulaire.
Le gestionnaire de formulaire est généralement un fichier sur le serveur avec un script pour traiter les données d'entrée.
Le gestionnaire de formulaire est spécifié dans l'attribut action du formulaire.
Exemple
Un formulaire avec un bouton soumis :
<form action="/action_page.html">
<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">
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
L'attribut de nom pour <input>
Notez que chaque champ de saisie doit avoir un attribut name pour être soumis.
Si l'attribut name est omis, la valeur du champ de saisie ne sera pas envoyée du tout.
Exemple
Cet exemple ne soumettra pas la valeur du "First name" input field:
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
HTML Exercices
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.
HTML — Formulaires — Vidéo W3Schools
Cette vidéo explique les formulaires et comment les utiliser en HTML.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
