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.

Faut-il 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 permettre aux utilisateurs de choisir une catégorie de produits. Vous n'avez pas besoin d'un élément <form> ici, car vous ne stockez ni ne traitez pas de données sur votre backend.

Toutefois, dans la plupart des cas, lorsque vous stockez ou traitez des données provenant d'utilisateurs, vous devez utiliser l'élément <form>. Comme vous le découvrirez dans ce module, l'utilisation d'un <form> vous permet de bénéficier de nombreuses fonctionnalités intégrées des navigateurs que vous auriez autrement dû créer vous-même. Un <form> intègre également de nombreuses fonctionnalités d'accessibilité par défaut. Si vous souhaitez éviter le rechargement de la page 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'un <form> est 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 de formulaires ?

Lorsque vous envoyez un <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 côté client à l'aide d'une requête GET ou par code côté serveur à 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

Lorsque le formulaire est envoyé, le navigateur envoie une requête à l'URL correspondant à la valeur de l'attribut action. De plus, le navigateur vérifie si le bouton Envoyer possède un attribut formaction. Dans ce cas, l'URL définie est utilisée.

En outre, le navigateur recherche des attributs supplémentaires sur l'élément <form>, par exemple pour déterminer si le formulaire doit être validé (novalidate), si la saisie semi-automatique doit être utilisée (autocomplete="off") ou quel encodage doit être utilisé (accept-charset).

Essayez de créer un formulaire dans lequel les utilisateurs peuvent indiquer leur couleur préférée. Les données doivent être envoyées sous forme de requête POST, et l'URL où elles seront traitées doit être /color.

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

Assurez-vous que les utilisateurs peuvent envoyer votre formulaire

Il existe deux façons de soumettre un formulaire. Vous pouvez cliquer sur le bouton Envoyer ou appuyer sur Enter lorsque vous utilisez un contrôle de formulaire.

Vous pouvez ajouter un bouton Envoyer de différentes manières. Vous pouvez par exemple 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 Envoyer graphique. Toutefois, maintenant que vous pouvez créer des boutons graphiques avec CSS, il est déconseillé d'utiliser type="image".

Autoriser les utilisateurs à envoyer des fichiers

Utilisez <input type="file"> pour autoriser les utilisateurs à importer et à envoyer des fichiers si nécessaire.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Commencez par ajouter 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 vous assurer que les utilisateurs peuvent importer des fichiers : définissez l'attribut enctype sur votre formulaire. La valeur par défaut est application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
…
</form>

Pour vous assurer que les fichiers peuvent ê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.

Vérifier vos connaissances

Tester vos connaissances sur l'élément de formulaire

Ressources

• Élément HTML du formulaire
• Bonnes pratiques concernant le bouton "Envoyer"