Pour rendre un formulaire interactif, vous devez ajouter des éléments de formulaire. Il existe des commandes permettant de saisir et de sélectionner des données, des éléments qui décrivent les commandes, des éléments qui regroupent des champs et des boutons permettant d'envoyer un formulaire.
Que sont les éléments de formulaire ?
Deux éléments <input>, <input type="text"> et <input type="file">, s'affichent. Pourquoi sont-ils différents ?
En fonction du nom de l'élément et de l'attribut type, les navigateurs affichent différentes interfaces utilisateur, utilisent différentes règles de validation et proposent de nombreuses autres fonctionnalités. Utiliser le contrôle de formulaire approprié vous aide à créer de meilleurs formulaires.
Libellés des éléments de formulaire
Imaginons que vous souhaitiez ajouter une zone de saisie dans laquelle l'utilisateur peut saisir sa couleur préférée.
Pour ce faire, vous devez ajouter un élément <input> à votre formulaire.
Mais comment l'utilisateur sait-il qu'il doit indiquer sa couleur préférée ?
Pour décrire les éléments de contrôle des formulaires, utilisez un <label> pour chaque élément de contrôle.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
L'attribut for de l'élément de libellé correspond à l'attribut id de l'entrée.
Capturer l'entrée utilisateur
Comme son nom l'indique, l'élément <input> permet de collecter les entrées des utilisateurs.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Comme indiqué précédemment, l'attribut id connecte le <input> au <label>.
Que se passe-t-il avec les attributs "name" et "type" dans cet exemple ?
L'attribut "name"
Utilisez l'attribut name pour identifier les données que l'utilisateur saisit avec le contrôle.
Si vous envoyez le formulaire, ce nom est inclus dans la requête.
Supposons que vous ayez nommé un contrôle de formulaire mountain et que l'utilisateur ait saisi Gutenberg. La demande inclut ces informations sous la forme mountain=Gutenberg.
Essayez de remplacer le nom de la commande de formulaire par hill.
Si vous le faites correctement et envoyez le formulaire, hill s'affiche dans l'URL.
Type d'entrée
Il existe différents types de commandes de formulaire, tous dotés de fonctionnalités intégrées utiles qui fonctionnent sur différents navigateurs et plates-formes. En fonction de l'attribut type, le navigateur affiche différentes interfaces utilisateur, différents claviers à l'écran, utilise différentes règles de validation, etc. Voyons comment modifier le type.
En utilisant type="checkbox", le navigateur affiche désormais une case à cocher au lieu d'un champ de texte.
La case à cocher est également associée à des attributs supplémentaires.
Vous pouvez définir l'attribut checked pour qu'il s'affiche comme coché.
Vous pouvez choisir parmi d'autres types. Nous en parlerons plus en détail dans un module ultérieur.
Autoriser plusieurs lignes de texte
Supposons que vous ayez besoin d'un champ dans lequel un utilisateur puisse écrire un commentaire.
Pour ce faire, ne serait-il pas pratique qu'il puisse saisir plusieurs lignes de texte ?
C'est l'objectif de l'élément <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Sélectionner une option dans une liste
Comment proposer aux utilisateurs une liste d'options à sélectionner ?
Pour ce faire, vous pouvez utiliser un élément <select>.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Commencez par ajouter un élément <select>.
Comme pour toutes les autres commandes de formulaire, vous devez la connecter à un <label> à l'aide de l'attribut id et lui attribuer un nom unique à l'aide de l'attribut name.
Entre la balise de début et la balise de fin de l'élément <select>, vous pouvez ajouter plusieurs éléments <option>, chacun représentant une sélection.
Chaque option possède un attribut value unique, ce qui vous permet de les distinguer lorsque vous traitez les données du formulaire.
Le texte de l'élément "option" correspond à la valeur lisible par l'utilisateur.
Si vous envoyez le formulaire à l'aide de cette <select> sans modifier la sélection, la requête inclura color=orange. Mais comment le navigateur sait-il quelle option doit être utilisée ?
Le navigateur utilise la première option de la liste, sauf si:
- Un élément
<option>possède l'attributselected. - L'utilisateur choisit une autre option.
Présélectionner une option
L'attribut selected vous permet de présélectionner une option.
Cette valeur devient la valeur par défaut, quel que soit l'ordre dans lequel les éléments <option> sont définis.
Regrouper les commandes de formulaire
Vous devez parfois regrouper des commandes de formulaire. Pour ce faire, vous pouvez utiliser l'élément <fieldset>.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Avez-vous remarqué l'élément <legend> dans l'élément <fieldset> ? À quoi sert-il ?
Si vous avez répondu "décrire le groupe de commandes de formulaire", vous avez raison.
Chaque élément <fieldset> nécessite un élément <legend>, tout comme chaque contrôle de formulaire nécessite un élément <label> associé.
<legend> doit également être le tout premier élément de <fieldset>.
Après l'élément <legend>, vous pouvez définir les commandes de formulaire qui doivent faire partie du groupe.
Envoyer un formulaire
Après avoir appris à ajouter des commandes de formulaire et à les regrouper, vous vous demandez peut-être comment un utilisateur peut envoyer un formulaire.
La première consiste à utiliser un élément <button>.
<button>Submit</button>
Lorsqu'un utilisateur clique sur le bouton Envoyer, le navigateur envoie une requête à l'URL spécifiée dans l'attribut action de l'élément <form> avec toutes les données des commandes du formulaire.
Vous pouvez également utiliser un élément <input> avec type="submit" au lieu d'un élément <button>.
L'entrée se présente comme une <button> et se comporte comme telle. Au lieu d'utiliser un élément <label> pour décrire le <input>, utilisez plutôt l'attribut value.
<input type="submit" value="Submit">
De plus, vous pouvez envoyer un formulaire à l'aide de la touche Enter lorsqu'un champ de formulaire est sélectionné.
Vérifier vos connaissances
Tester vos connaissances sur les éléments de formulaire
Comment connecter un <label> à une commande de formulaire ?
for='color' sur le <label> et name='color' sur le <input>.for='color' sur le <label> et id='color' sur le <input>.id='color' sur le <label> et for='color' sur le <input>.name='color' sur le <label> et for='color sur le <input>.Que pouvez-vous utiliser pour une commande de formulaire multiligne ?
<input> avec type='multi-line'.<text>.<textarea>.<input> avec type='long'.Comment envoyer un formulaire ?
<button>.Enter.<input> avec type='submit'.