Utiliser des formulaires pour collecter des données auprès des utilisateurs

Découvrez les bases de l'utilisation d'un formulaire sur le Web grâce à cette introduction à l'élément de formulaire.

Imaginons que vous souhaitiez demander aux visiteurs de votre site Web quel est leur animal préféré. Pour commencer, vous devez trouver un moyen de collecter les données.

En HTML, vous pouvez créer ce formulaire à l'aide de l'élément de formulaire (<form>), d'un <input> avec un <label> et d'un <button> d'envoi.

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Qu'est-ce qu'un élément de formulaire ?

L'élément de formulaire se compose de la balise de début <form>, d'attributs facultatifs définis dans la balise de début et d'une balise de fin </form>.

Entre les balises de début et de fin, vous pouvez inclure des éléments de formulaire tels que <input> et <textarea> pour différents types de saisie utilisateur. Vous en saurez plus sur les éléments de formulaire dans le module suivant.

Où les données sont-elles traitées ?

Lorsqu'un formulaire est envoyé (par exemple, lorsque l'utilisateur clique sur le bouton Envoyer), le navigateur envoie une requête. Un script peut répondre à cette demande et traiter les données.

Par défaut, la demande est envoyée à la page sur laquelle le formulaire est affiché.

Supposons que vous souhaitiez qu'un script s'exécute à https://web.dev pour traiter les données du formulaire. Comment feriez-vous ? Essayez-le sur CodePen !

      <form action="https://example.com/animals"></form>

L'exemple précédent envoie une requête à https://example.com/animals. Un script sur le backend example.com peut gérer les requêtes vers /animals et traiter les données du formulaire.

Comment les données sont-elles transférées ?

Par défaut, les données du formulaire sont envoyées sous forme de requête GET, avec les données envoyées ajoutées à l'URL. Si un utilisateur saisit "grenouille" dans l'exemple précédent, le navigateur envoie une requête à l'URL suivante :

https://example.com/animals?animal=frog

Dans ce cas, vous pouvez accéder aux données sur le frontend ou le backend en les récupérant à partir de l'URL.

Si vous le souhaitez, vous pouvez demander au formulaire d'utiliser une requête POST en modifiant l'attribut de méthode.

<form method="post">
...
</form>

Avec POST, les données sont incluses dans le corps de la requête.

Les données ne seront pas visibles dans l'URL et ne seront accessibles qu'à partir d'un script frontend ou backend.

Quelle méthode devez-vous utiliser ?

Il existe des cas d'utilisation pour les deux méthodes.

Pour les formulaires qui traitent des données sensibles, utilisez la méthode POST. Les données sont chiffrées (si vous utilisez HTTPS) et ne sont accessibles qu'au script de backend qui traite la requête. Les données ne sont pas visibles dans l'URL. Un formulaire de connexion en est un exemple courant.

Si les données peuvent être partagées, vous pouvez utiliser la méthode GET. Les données sont ensuite ajoutées à l'historique de votre navigateur, car elles sont incluses dans l'URL. Les formulaires de recherche l'utilisent souvent. Cela vous permet de mettre en favori une page de résultats de recherche.

Maintenant que vous avez découvert l'élément de formulaire lui-même, il est temps d'en savoir plus sur les champs de formulaire pour rendre vos formulaires interactifs.

Vérifier que vous avez bien compris

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

Ressources

L'élément <form>.