Pour rendre un formulaire interactif, vous devez y ajouter des éléments. Il existe des commandes pour saisir et sélectionner des données, des éléments qui décrivent des commandes, des éléments qui regroupent des champs et des boutons permettant d'envoyer un formulaire.
Que sont les éléments d'un formulaire ?
Deux éléments <input> s'affichent : <input type="text"> et <input type="file">. 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 des règles de validation différentes et offrent de nombreuses autres fonctionnalités. L'utilisation de la commande de formulaire appropriée vous aide à créer des formulaires de meilleure qualité.
Étiquettes pour les éléments du formulaire
Supposons que vous souhaitiez ajouter une entrée 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 remplir sa couleur préférée ?
Pour décrire des commandes de formulaire, utilisez un <label> pour chaque commande de formulaire.
<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 les entrées utilisateur
Comme son nom l'indique, l'élément <input> permet de recueillir les commentaires 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 associe <input> à <label>.
Qu'en est-il des attributs "name" et "type" de cet exemple ?
Attribut "name"
Utilisez l'attribut name pour identifier les données que l'utilisateur saisit avec la commande.
Si vous envoyez le formulaire, ce nom sera inclus dans la demande.
Supposons que vous ayez nommé une commande de formulaire mountain et que l'utilisateur ait saisi Gutenberg. La requête 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 que vous envoyez le formulaire, hill sera visible dans l'URL.
Type d'entrée
Il existe différents types de commandes de formulaire, qui sont toutes dotées 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, affiche différents claviers à l'écran, utilise différentes règles de validation, etc. Voyons comment modifier le type.
Grâce à type="checkbox", le navigateur affiche désormais une case à cocher au lieu d'un champ de texte.
La case à cocher est également accompagnée d'attributs supplémentaires.
Vous pouvez définir l'attribut checked pour qu'il soit coché.
Vous pouvez choisir d'autres types. Nous aborderons ce point en détail dans un prochain module.
Autoriser plusieurs lignes de texte
Supposons que vous ayez besoin d'un champ dans lequel l'utilisateur peut écrire un commentaire.
Dans ce cas, ne serait-il pas idéal qu'ils puissent saisir plusieurs lignes de texte ?
Il s'agit de la finalité de l'élément <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Faites votre choix dans une liste d'options
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, connectez-la à un <label> avec l'attribut id et attribuez-lui un nom unique à l'aide de l'attribut name.
Entre les balises de début et de fin de l'élément <select>, vous pouvez ajouter plusieurs éléments <option>, chacun représentant une sélection.
Chaque option est associée à un attribut value unique, ce qui vous permet de les distinguer lors du traitement des données du formulaire.
Le texte à l'intérieur de l'élément d'option correspond à la valeur lisible par l'humain.
Si vous envoyez le formulaire à l'aide de ce <select> sans modifier la sélection, la requête inclura color=orange. Mais comment le navigateur peut-il savoir quelle option utiliser ?
Le navigateur utilise la première option de la liste, sauf si:
- Un élément
<option>comporte l'attributselected. - L'utilisateur choisit une autre option.
Présélectionner une option
Avec l'attribut selected, vous pouvez présélectionner une option.
Il s'agit de la valeur par défaut, quel que soit l'ordre dans lequel les éléments <option> sont définis.
Commandes des formulaires de regroupement
Il est parfois nécessaire de 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 pensez-vous être utilisé ?
Si votre réponse est "décrire le groupe de commandes de formulaire", vous avez raison !
Chaque élément <fieldset> nécessite un élément <legend>, tout comme chaque commande de formulaire nécessite un élément <label> associé.
<legend> doit également être le tout premier élément du <fieldset>.
Après l'élément <legend>, vous pouvez définir les commandes de formulaire qui doivent faire partie du groupe.
Envoi d'un formulaire
Après avoir appris à ajouter et à regrouper des commandes de formulaire, vous vous demandez peut-être comment un utilisateur peut envoyer un formulaire.
La première option 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 de formulaire.
Vous pouvez également utiliser un élément <input> avec type="submit" au lieu d'un élément <button>.
L'entrée a l'apparence et le comportement d'une <button>. Au lieu d'utiliser un élément <label> pour décrire l'élément <input>, utilisez plutôt l'attribut value.
<input type="submit" value="Submit">
En outre, vous pouvez envoyer un formulaire à l'aide de la clé Enter lorsqu'un champ de formulaire est sélectionné.
Testez vos connaissances
Tester vos connaissances sur les éléments de formulaire
Comment connecter un <label> à une commande de formulaire ?
for='color' sur <label> et name='color' sur <input>.for='color' sur <label> et id='color' sur <input>.id='color' sur <label> et for='color' sur <input>.name='color' sur <label> et for='color sur <input>.Qu'utilisez-vous pour un contrôle de formulaire multiligne ?
<input> avec type='multi-line'.<text><textarea><input> avec type='long'.Comment envoyer un formulaire ?
<button>.Enter<input> avec type='submit'.