Formulaires HTML

Les formulaires HTML

Les formulaires HTML permettent aux utilisateurs de saisir des données et de les envoyer au serveur. Ils sont très courants sur les sites web, par exemple pour s'inscrire, se connecter, ou soumettre des commentaires.

Pour créer un formulaire, on utilise la balise <form>. Cette balise contient différents éléments qui permettent de collecter des informations, appelés "éléments de formulaire" (ou "inputs"). Voici un exemple simple :

<form action="/submit" method="post">
  <label for="username">Nom d'utilisateur :</label>
  <input type="text" id="username" name="username">

  <label for="password">Mot de passe :</label>
  <input type="password" id="password" name="password">

  <button type="submit">Envoyer</button>
</form>

Dans cet exemple :

• La balise <form> a un attribut action qui définit l'URL où les données du formulaire seront envoyées, et un attribut method qui spécifie la méthode HTTP (ici, post).
• <input type="text"> est utilisé pour créer une zone de texte pour que l'utilisateur puisse saisir son nom d'utilisateur.
• <input type="password"> crée une zone pour le mot de passe qui masque le texte saisi.
• <button type="submit"> permet d'envoyer le formulaire.

Les méthodes GET et POST

Les formulaires HTML peuvent utiliser deux méthodes principales pour envoyer des données : GET et POST.

Méthode GET

La méthode GET est utilisée lorsque l'on veut récupérer une ressource, et elle envoie les données du formulaire en les ajoutant à l'URL sous forme de paramètres de requête. Cela signifie que les données sont visibles dans l'URL, ce qui rend cette méthode adaptée pour des requêtes non sensibles, par exemple une recherche sur un site.

Exemple :

<form action="/search" method="get">
  <label for="query">Recherche :</label>
  <input type="text" id="query" name="q">
  <button type="submit">Rechercher</button>
</form>

Dans cet exemple, lorsque l'utilisateur soumet le formulaire, l'URL ressemblera à quelque chose comme /search?q=valeur_saisie. La méthode GET est pratique pour des actions qui n'ont pas d'effet persistant sur le serveur, comme consulter des informations.

https://docs.gitlab.com/ee/api/topics.html
https://forge.apps.education.fr/api/v4/topics
https://docs.gitlab.com/ee/api/projects.html#list-all-projects
https://forge.apps.education.fr/api/v4/projects?topic=NSI

Méthode POST

La méthode POST est utilisée pour envoyer des données au serveur, souvent lorsque ces données doivent être traitées ou stockées (par exemple lors de la création d'un compte). Les données ne sont pas ajoutées à l'URL mais sont envoyées dans le corps de la requête, ce qui les rend plus sûres que GET pour des informations sensibles.

Exemple :

<form action="/submit" method="post">
  <label for="username">Nom d'utilisateur :</label>
  <input type="text" id="username" name="username">

  <label for="password">Mot de passe :</label>
  <input type="password" id="password" name="password">

  <button type="submit">Envoyer</button>
</form>

Dans cet exemple, les données sont envoyées dans le corps de la requête, ce qui est plus sécurisé, surtout pour des informations confidentielles comme les mots de passe.

Les différents types d'input

Les éléments <input> peuvent avoir différents types, spécifiés par l'attribut type, comme text, password, email, number, etc. Chaque type d'input permet de collecter un type particulier de donnée (par exemple, type="email" est utilisé pour saisir une adresse e-mail).

Pour découvrir tous les types d'input disponibles et leurs particularités, je vous invite à consulter la documentation MDN : Input types sur MDN.