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 présentation. .

Imaginons que vous souhaitiez interroger les utilisateurs de votre site Web sur leur animal préféré. Pour commencer, vous avez besoin d'un moyen de collecter les données.

Comment faire avec HTML ?

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

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

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

L'élément du formulaire se compose de la balise de début <form>, attributs facultatifs définis dans la balise de début et 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 d'entrées utilisateur. Vous en apprendrez davantage 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 requête 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 exécuter un script sur https://web.dev. pour traiter les données de formulaire. Comment procéderiez-vous ? Essayer

<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 traiter les requêtes adressées à /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 en tant que requête GET, avec les données envoyées ajoutées à l'URL. Si un utilisateur envoie le mot "grenouille" dans l'exemple ci-dessus, 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 l'interface ou le backend en les obtenant via l'URL.

Si vous le souhaitez, vous pouvez indiquer 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 ces 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 accessibles uniquement par le script backend qui traite la requête. Les données ne sont pas visibles dans l'URL. Un exemple courant est le formulaire de connexion.

Si les données peuvent être partagées, vous pouvez utiliser la méthode GET. De cette façon, les données seront ajoutées à l'historique de votre navigateur au fur et à mesure qu'elles sont incluses dans l'URL. Les formulaires de recherche l'utilisent souvent. De cette façon, vous pouvez ajouter une page de résultats de recherche à vos favoris.

Maintenant que vous en savez plus sur l'élément du formulaire lui-même, il est temps de découvrir champs de formulaire afin de les rendre interactifs.

Testez vos connaissances

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

Ressources

L'élément <form>.