Dans un module précédent, vous avez appris à utiliser l'élément <form>
.
Dans ce module, vous allez découvrir le fonctionnement d'un formulaire et quand l'utiliser.
Devez-vous utiliser un élément <form>
?
Vous n'avez pas toujours besoin de placer les commandes de formulaire dans un élément <form>
.
Par exemple, vous pouvez fournir un élément <select>
pour que les utilisateurs puissent choisir une catégorie de produits.
Vous n'avez pas besoin d'un élément <form>
ici, car vous ne stockez ni ne traitez de données sur votre backend.
Toutefois, dans la plupart des cas, lorsque vous stockez ou traitez des données d'utilisateurs, vous devez utiliser l'élément <form>
.
Comme vous l'apprendrez dans ce module, l'utilisation d'un <form>
vous offre de nombreuses fonctionnalités intégrées issues des navigateurs, que vous auriez normalement dû compiler vous-même.
Un <form>
dispose également de nombreuses fonctionnalités d'accessibilité intégrées par défaut.
Si vous souhaitez éviter que la page ne soit actualisée lorsqu'un utilisateur envoie un formulaire, vous pouvez toujours utiliser l'élément <form>
, mais l'améliorer avec JavaScript.
Comment fonctionne un <form>
?
Vous avez appris qu'une <form>
était le meilleur moyen de gérer les données utilisateur.
Vous vous demandez peut-être comment fonctionne un formulaire.
<form>
est un conteneur pour les commandes de formulaire interactives.
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button formaction="/name">Save</button>
</form>
Comment fonctionne l'envoi d'un formulaire ?
Lorsque vous envoyez une <form>
, le navigateur vérifie les attributs <form>
. Les données sont envoyées sous la forme d'une requête GET
ou POST
en fonction de l'attribut method
. Si aucun attribut method
n'est présent, une requête GET
est envoyée à l'URL de la page actuelle.
Comment pouvez-vous accéder aux données du formulaire et les traiter ?
Les données envoyées peuvent être gérées par JavaScript sur l'interface à l'aide d'une requête GET
, ou par du code sur le backend à l'aide d'une requête GET
ou POST
.
En savoir plus sur les types de requêtes et le transfert des données de formulaire
Une fois le formulaire envoyé, le navigateur envoie une requête à l'URL qui correspond à la valeur de l'attribut action
.
En outre, le navigateur vérifie si le bouton Envoyer comporte un attribut formaction
.
Dans ce cas, l'URL qui y est définie est utilisée.
De plus, le navigateur recherche des attributs supplémentaires au niveau de l'élément <form>
. Par exemple, pour décider si le formulaire doit être validé (novalidate
), la saisie semi-automatique doit être utilisée (autocomplete="off"
) ou l'encodage à utiliser (accept-charset
).
Essayez de créer un formulaire dans lequel les utilisateurs peuvent soumettre leur couleur préférée.
Les données doivent être envoyées sous la forme d'une requête POST
, et l'URL de traitement des données doit être /color
.
Une solution possible consiste à utiliser ce formulaire:
<form method="post" action="/color"> <label for="color">What is your favorite color?</label> <input type="text" name="color" id="color"> <button>Save</button> </form>
Vérifier que les utilisateurs peuvent envoyer votre formulaire
Il existe deux façons d'envoyer un formulaire.
Vous pouvez cliquer sur le bouton Envoyer ou appuyer sur Enter
lorsque vous utilisez une commande de formulaire.
Vous pouvez ajouter un bouton Envoyer de différentes manières.
Une option consiste à utiliser un élément <button>
dans votre formulaire.
Tant que vous n'utilisez pas type="button"
, il fonctionne comme un bouton Envoyer.
Vous pouvez également utiliser <input type="submit" value="Submit">
.
Une troisième option consiste à utiliser <input type="image" alt="Submit" src="submit.png">
pour créer un bouton graphique Submit (Envoyer).
Toutefois, maintenant que vous pouvez créer des boutons graphiques avec CSS, il n'est plus recommandé d'utiliser type="image"
.
Autoriser les utilisateurs à envoyer des fichiers
Utilisez <input type="file">
pour permettre aux utilisateurs d'importer et d'envoyer des fichiers si nécessaire.
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
Tout d'abord, ajoutez un élément <input>
avec type="file"
à votre formulaire.
Ajoutez l'attribut multiple
si les utilisateurs doivent pouvoir importer plusieurs fichiers.
Une autre modification est nécessaire pour s'assurer que les utilisateurs peuvent importer des fichiers : définissez l'attribut enctype
dans votre formulaire.
La valeur par défaut est application/x-www-form-urlencoded
.
<form method="post" enctype="multipart/form-data">
…
</form>
Pour que les fichiers puissent être envoyés, remplacez-le par multipart/form-data
.
Sans cet encodage, les fichiers ne peuvent pas être envoyés avec une requête POST
.
Testez vos connaissances
Tester vos connaissances sur l'élément du formulaire
Quelle valeur du champ enctype
devez-vous indiquer pour envoyer les fichiers ?
multipart/form-data
multipart/form-files
form-data
form-files
Est-il possible d'envoyer des données utilisateur sans <form>
Comment envoyer une <form>
?
<button>
.Enter
.<input type="image">
.