Informations détaillées sur l'élément du formulaire

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> ?

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 1

Source

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.

Afficher le formulaire

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
Essayez encore.
form-data
Essayez encore.
form-files
Essayez encore.

Est-il possible d'envoyer des données utilisateur sans <form>

Non
Essayez encore.
Oui, avec JavaScript.
🎉
Oui, avec Flash.
Essayez encore.
Oui, avec HTML5.
Essayez encore.

Comment envoyer une <form> ?

Cliquez sur une <button>.
Essayez encore.
Appuyez sur la touche Enter.
Essayez encore.
Cliquez sur une <input type="image">.
Essayez encore.
Tout ça à la fois.
🎉

Ressources