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

Découvrez les principes de base de l'utilisation d'un formulaire sur le Web dans cette présentation de l'élément de formulaire.

Imaginez que vous souhaitiez interroger les visiteurs de votre site Web sur leur animal préféré. Dans un premier temps, 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>), d'un <input> avec <label> et d'un <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 comprend la balise de début <form>, des 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 ?

Lors de l'envoi d'un formulaire (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 qu'un script s'exécutant sur https://web.dev traite les données du formulaire. Comment procéder ? 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 gérer 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 de formulaire sont envoyées sous la forme d'une requête GET, où les données envoyées sont ajoutées à l'URL. Si un utilisateur soumet 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 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 d'interface ou de backend.

Quelle méthode devez-vous utiliser ?

Il existe des cas d'utilisation des 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 que par le script backend qui traite la requête. Les données ne sont pas visibles dans l'URL. Le 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 seront ainsi ajoutées à l'historique de votre navigateur à mesure qu'elles sont incluses dans l'URL. C'est souvent le cas dans les formulaires de recherche. Vous pouvez ainsi ajouter une page de résultats de recherche à vos favoris.

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

Testez vos connaissances

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

Ressources

L'élément <form>.