Pour rendre un formulaire interactif, vous devez ajouter des éléments de formulaire. Il existe des commandes pour saisir et sélectionner des données, des éléments qui décrivent les commandes, des éléments qui regroupent les champs et des boutons pour envoyer un formulaire.
Que sont les éléments de formulaire ?
Vous voyez deux éléments <input>, <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 différentes règles de validation et proposent de nombreuses autres fonctionnalités. L'utilisation du bon élément de contrôle de formulaire vous aide à créer de meilleurs formulaires.
Libellés des éléments de formulaire
Imaginons que vous souhaitiez ajouter un champ dans lequel 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 de formulaire, utilisez un <label> pour chacun d'eux.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
L'attribut for de l'élément label correspond à l'attribut id de l'entrée.
Capturer les entrées utilisateur
Comme son nom l'indique, l'élément <input> est utilisé pour recueillir 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 associe le <input> au <label>.
Qu'en est-il des attributs "name" et "type" dans cet exemple ?
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 sera inclus dans la demande.
Supposons que vous ayez nommé un contrôle de formulaire mountain et que l'utilisateur ait saisi Gutenberg. La requête inclut ces informations sous la forme mountain=Gutenberg.
Essayez de modifier le nom du contrôle de formulaire en hill.
Si vous effectuez cette opération correctement et que vous envoyez le formulaire, hill est visible dans l'URL.
Type d'entrée
Il existe différents types de contrôles 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 et différents claviers à l'écran, utilise différentes règles de validation, etc. Découvrez 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 l'afficher comme coché.
Vous pouvez choisir parmi d'autres types. Nous les examinerons en détail dans un module ultérieur.
Autoriser plusieurs lignes de texte
Imaginons que vous ayez besoin d'un champ dans lequel un utilisateur peut écrire un commentaire.
Ne serait-il pas formidable qu'ils puissent saisir plusieurs lignes de texte ?
Il s'agit de 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 donner aux utilisateurs une liste d'options parmi lesquelles choisir ?
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 tous les autres contrôles de formulaire, vous le connectez à un <label> avec l'attribut id et lui donnez 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 possède un attribut value unique, ce qui vous permet de les distinguer lorsque vous traitez les données du formulaire.
Le texte à l'intérieur de l'élément "option" est la valeur lisible.
Si vous envoyez le formulaire à l'aide de <select> sans modifier la sélection, la demande inclura color=orange. Mais comment le navigateur sait-il quelle option utiliser ?
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
Parfois, vous devez regrouper des commandes de formulaire. Pour ce faire, utilisez 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> à l'intérieur de l'élément <fieldset> ? À quoi pensez-vous qu'il sert ?
Si vous avez répondu "pour décrire le groupe de contrôles de formulaire", vous avez raison.
Chaque élément <fieldset> nécessite un élément <legend>, tout comme chaque élément de formulaire a besoin d'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 contrôles 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 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 contrôles de formulaire.
Vous pouvez également utiliser un élément <input> avec type="submit" au lieu d'un élément <button>. L'entrée ressemble à un <button> et se comporte comme tel.
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, un formulaire peut également être envoyé à l'aide de la touche Enter lorsqu'un champ de formulaire est sélectionné.
Vérifier que vous avez bien compris
Tester vos connaissances sur les éléments de formulaire
Comment connecter un <label> à un contrôle 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'.