Formulaires HTML
Un formulaire HTML est utilisé pour collecter les entrées des utilisateurs. L'entrée de l'utilisateur est le plus souvent envoyée à un serveur pour traitement.
Exemple
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' <form>élément est un conteneur pour différents types d'éléments d'entrée, tels que : champs de texte, cases à cocher, boutons radio, boutons d'envoi, etc.
Tous les différents éléments de formulaire sont traité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 <input>élément peut être affiché de plusieurs façons, selon l' type
attribut.
Voici quelques exemples:
| Taper | La description |
|---|---|
| <type d'entrée="texte"> | Affiche un champ de saisie de texte sur une seule ligne |
| <type d'entrée="radio"> | Affiche un bouton radio (pour sélectionner l'un des nombreux choix) |
| <type d'entrée="case à cocher"> | Affiche une case à cocher (pour sélectionner zéro ou plusieurs choix) |
| <type d'entrée="soumettre"> | Affiche un bouton de soumission (pour soumettre le formulaire) |
| <type d'entrée="bouton"> | 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>
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>
Remarquez l'utilisation de l' <label>élément dans l'exemple ci-dessus.
La <label>balise définit une étiquette pour de nombreux éléments de formulaire.
L' <label>élément est utile pour les utilisateurs de lecteurs d'écran, car le lecteur d'écran lira à haute voix l'étiquette lorsque l'utilisateur se concentrera sur l'élément d'entrée.
L' <label>élément 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 l' <label>élément, il bascule le bouton radio/case à cocher.
L' forattribut de la <label>balise doit être égal à l' idattribut de l' <input>
élément 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 parmi un nombre limité de choix.
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>
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Choisissez votre langage Web préféré :
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>
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 le traitement des données d'entrée.
Le gestionnaire de formulaire est spécifié dans l' action
attribut du formulaire.
Exemple
Un formulaire avec un bouton soumettre :
<form action="/action_page.php">
<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>
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 nameattribut pour être soumis.
Si l' nameattribut est omis, la valeur du champ de saisie ne sera pas envoyée du tout.
Exemple
Cet exemple ne soumettra pas la valeur du champ de saisie "Prénom" :
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>