HTML Formulaires
Un formulaire HTML est utilisé pour collecter les saisies de l'utilisateur. Ces saisies sont le plus souvent envoyées à un serveur pour traitement.
Exemple
L'élément <form>
L'élément HTML <form> est utilisé pour créer un formulaire HTML pour les saisies de l'utilisateur :
<form>
.
éléments de formulaire
.
</form>
L'élément <form> est un conteneur pour différents types d'éléments d'entrée, tels que : champs de texte, cases à cocher, boutons radio, boutons de soumission, etc.
Tous les différents éléments de formulaire sont couverts 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, selon l'attribut type .
Voici quelques exemples :
| Type | 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 un des nombreux choix) |
| <input type="checkbox"> | Affiche une case à cocher (pour sélectionner zéro ou plusieurs choix) |
| <input type="submit"> | Affiche un bouton de soumission (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 d'entrée sur une seule ligne pour la saisie de texte.
Exemple
Un formulaire avec des champs d'entrée pour le texte :
<form>
<label for="fname">Prénom :</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nom de famille :</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 d'entrée est de 20 caractères.
L'élément <label>
Remarquez l'utilisation de l'élément <label> dans l'exemple ci-dessus.
La balise <label> définit une étiquette pour de nombreux é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 régions 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 bascule le bouton radio/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.
Boutons radio
L'élément <input type="radio"> définit un bouton radio.
Les boutons radio permettent à un utilisateur de sélectionner UN des choix limités.
Exemple
Un formulaire avec des boutons radio :
<p>Choisissez votre langage Web préféré :</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
L'élément <input type="checkbox"> définit une case à cocher .
Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou PLUSIEURS 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"> J'ai un vélo</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> J'ai une voiture</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> J'ai un bateau</label>
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Le bouton de soumission
L'élément <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 de soumission :
<form action="/action_page.php">
<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">
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
L'attribut Name pour <input>
Remarquez que chaque champ d'entrée doit avoir un attribut name pour être soumis.
Si l'attribut name est omis, la valeur du champ d'entrée ne sera pas envoyée du tout.
Exemple
Cet exemple ne soumettra pas la valeur du champ d'entrée "Prénom" :
<form action="/action_page.php">
<label for="fname">Prénom :</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Soumettre">
</form>