L'élément de formulaire en détail

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.

Faut-il utiliser un élément <form> ?

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Vous n'avez pas toujours besoin de placer les contrôles 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 produit. Vous n'avez pas besoin d'é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 utilisateur, 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 des navigateurs que vous devriez autrement créer vous-même. Un <form> intègre également de nombreuses fonctionnalités d'accessibilité par défaut. Si vous souhaitez éviter un rechargement de page lorsqu'un utilisateur envoie un formulaire, vous pouvez toujours utiliser l'élément <form>, mais l'améliorer avec JavaScript.

Comment fonctionne <form> ?

Vous avez appris qu'un <form> est la meilleure façon 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 forme de 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 accéder aux données du formulaire et les traiter ? Les données envoyées peuvent être traitées par JavaScript sur le frontend, avec une requête GET, ou par du code sur le backend, avec une requête GET ou POST. En savoir plus sur les types de demandes et le transfert des données de formulaire

Lorsque le formulaire est 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 Submit (Envoyer) comporte un attribut formaction. Dans ce cas, l'URL définie est utilisée.

De plus, 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ù les données sont traité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>

Assurez-vous que les utilisateurs peuvent envoyer votre formulaire

Il existe deux façons d'envoyer un formulaire. Vous pouvez cliquer sur un bouton Envoyer ou appuyer sur Enter lorsque vous utilisez un élément de formulaire.

Utilisez toujours un langage orienté action lorsque vous créez votre bouton Envoyer. Par exemple, Passer au paiement ou Enregistrer les modifications. Cela aide vos utilisateurs à comprendre les prochaines étapes de votre 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 Envoyer graphique. Toutefois, maintenant que vous pouvez créer des boutons graphiques avec CSS, il n'est pas recommandé d'utiliser type="image".

Enfin, évitez d'ajouter des délais d'attente. Laissez aux utilisateurs le temps qu'ils souhaitent pour envoyer un formulaire. Les délais d'expiration entraînent une perte de données et frustrent vos utilisateurs. Consultez les consignes W3C sur le délai d'inactivité des formulaires.

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>

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 dernière modification est nécessaire pour que les utilisateurs puissent 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, définissez-le sur multipart/form-data. Sans cet encodage, les fichiers ne peuvent pas être envoyés avec une requête POST.

Vérifier que vous avez bien compris

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

Quelle valeur enctype est nécessaire pour envoyer des 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 un <form> ?

Cliquez sur un <button>.
Essayez encore.
Appuyez sur la touche Enter.
Essayez encore.
Cliquez sur un <input type="image">.
Essayez encore.
Toutes les réponses sont correctes.
🎉

Ressources