Formulaires en HTML

1. Introduction aux formulaires

Les formulaires en HTML sont un outil super important pour permettre aux utilisateurs d'interagir avec les pages web. Ils permettent de collecter des informations des utilisateurs, que ce soit du texte, une sélection dans une liste, des fichiers ou d'autres données, qui peuvent ensuite être envoyées au serveur pour traitement. En HTML, les formulaires sont créés à l'aide de nombreux éléments, chacun étant conçu pour un type spécifique de saisie de données. L'élément principal des formulaires est <form>, qui inclut d'autres éléments comme <input>, <textarea>, <button>, <select> et d'autres encore.

Éléments principaux des formulaires

Les éléments des formulaires permettent de créer des champs de saisie, des boutons, des listes déroulantes et d'autres éléments d'interface grâce auxquels l'utilisateur peut saisir des données. Les balises principales utilisées dans les formulaires sont :

• <form> — le conteneur principal pour tous les éléments du formulaire. Il définit où et comment les données seront envoyées.
• <input> — un élément universel pour créer des champs de saisie de différents types (texte, mot de passe, boutons radio, cases à cocher, etc.).
• <label> — un élément associé à un champ de saisie pour indiquer son utilité.
• <textarea> — un champ pour saisir du texte en plusieurs lignes.
• <button> — un bouton pour soumettre le formulaire ou effectuer d'autres actions.
• <select> et <option> — une liste déroulante où l'utilisateur peut choisir une ou plusieurs options.

Exemple de formulaire simple

      
    <form action="/submit" method="post">
      <label for="name">Nom:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Adresse e-mail:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Envoyer</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Nom:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Adresse e-mail:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Envoyer</button>
</form>