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 comment fonctionne un formulaire et quand l'utiliser.

Devez-vous utiliser un élément <form> ?

Il n'est pas toujours nécessaire de placer les commandes de formulaire dans un élément <form>. Par exemple, vous pouvez fournir un élément <select> afin que les utilisateurs puissent choisir une catégorie de produits. Vous n'avez pas besoin d'un élément <form> dans ce cas, car vous ne stockez ou ne traitez pas de données sur votre backend.

Cependant, dans la plupart des cas, lorsque vous stockez ou traitez les données des utilisateurs, vous devez utiliser l'élément <form>. Comme vous le verrez dans ce module, l'utilisation d'un <form> vous offre de nombreuses fonctionnalités intégrées provenant de navigateurs que vous auriez dû créer vous-même autrement. Un <form> dispose également de nombreuses fonctionnalités d'accessibilité intégrées par défaut. Pour é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'un <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 un <form>, le navigateur vérifie les attributs <form>. Les données sont envoyées sous forme de GET ou POST selon l'attribut method. Si aucun attribut method n'est présent, une La 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 code sur le backend à l'aide d'une requête GET ou POST. En savoir plus sur types de requêtes et 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. De plus, 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 sur l'élément <form>, par exemple, pour décider si le formulaire doit être validé (novalidate), la saisie semi-automatique à utiliser (autocomplete="off") ou l'encodage à utiliser (accept-charset).

Essayez de créer un formulaire dans lequel les utilisateurs peuvent envoyer leur couleur préférée. Les données doivent être envoyées en tant que requête POST, et l'URL où les données 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>

Vérifier que les utilisateurs peuvent envoyer votre formulaire

Il existe deux façons d'envoyer un formulaire. Vous pouvez cliquer sur le bouton Submit (Envoyer) ou appuyer sur Enter lorsque vous utilisez une commande de formulaire.

Vous pouvez ajouter un bouton Envoyer de différentes manières. Vous pouvez utiliser un élément <button> dans votre formulaire. Tant que vous n'utilisez pas type="button", cela 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, nous vous déconseillons 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>

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

Testez vos connaissances

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

Ressources

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