Pour rendre un formulaire interactif, vous devez y ajouter des éléments. Il y a des commandes pour saisir et sélectionner des données, des éléments qui décrivent les commandes, regroupant des 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 ?
Basé sur le nom de l'élément et l'attribut type : différents navigateurs affichent différentes interfaces utilisateur, utilisez différentes règles de validation, et offrent de nombreuses autres fonctionnalités. L'utilisation d'une commande de formulaire appropriée vous permet de créer de meilleurs formulaires.
Étiquettes pour les éléments de formulaire
Supposons que vous souhaitiez ajouter une entrée pour que l'utilisateur puisse 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 les commandes de formulaire, utilisez un <label> pour chacune d'elles.
<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 connecte le <input> au <label>.
Qu'en est-il de l'attribut "name" et "type" dans cet exemple ?
Attribut "name" (nom)
Utilisez l'attribut name pour identifier les données que l'utilisateur saisit avec la commande.
Si vous envoyez le formulaire, ce nom est inclus dans la demande.
Supposons que vous ayez nommé une commande de formulaire mountain et que l'utilisateur ait saisi Gutenberg,
la demande inclut ces informations sous la forme mountain=Gutenberg.
Essayer de changer
le nom de la commande de formulaire sur hill.
Si vous procédez correctement et envoyez le formulaire, hill sera visible dans l'URL.
Type d'entrée
Il existe différents
types de sélecteurs de formulaire, tous
avec des fonctionnalités intégrées utiles qui fonctionnent
sur différents navigateurs et plateformes. D'après type
le navigateur affiche différentes interfaces utilisateur, différents claviers à l'écran, utilise
règles de validation différentes, 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 comporte également des attributs supplémentaires.
Vous pouvez définir l'attribut checked pour qu'il soit coché.
Vous pouvez choisir d'autres types. Nous y reviendrons 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 peut écrire un commentaire.
Pour cela, ne serait-il pas idéal s'ils pouvaient 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>
Faites votre choix dans une liste d'options
Comment fournir 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>
Tout d'abord, ajoutez un élément <select>.
Comme pour toutes les autres commandes de formulaire, vous la connectez à 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 différencier lorsque vous traitez les données du formulaire.
Le texte dans l'élément option est 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 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.
Il s'agit de la valeur par défaut, quel que soit l'ordre dans lequel les éléments <option> sont définis.
Regrouper les commandes de formulaire
Il est parfois nécessaire de regrouper les 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-elle, selon vous ?
Si votre réponse est « Pour 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 de <fieldset>.
Après l'élément <legend>, vous pouvez définir les commandes de formulaire à inclure dans le groupe.
Envoi d'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'élément <form>
attribut action
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 ressemble à une <button> et se comporte comme telle. Au lieu d'utiliser un élément <label> pour décrire
<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é.
Testez vos connaissances
Tester vos connaissances sur les éléments du 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 une commande de formulaire sur plusieurs lignes ?
<input> avec type='multi-line'.<text>.<textarea>.<input> avec type='long'.Comment envoyer un formulaire ?
<button>.Enter<input> avec type='submit'.