Aller au contenu principal

Les formulaires

Notions théoriques​

Les formulaires sont des éléments essentiels sur le Web.

Ils permettent aux utilisateurs d'interagir avec les sites Web, que ce soit pour s'inscrire à une newsletter, remplir un questionnaire ou encore se connecter à un espace personnel.

Dans cette séance, nous allons découvrir comment créer des formulaires en HTML.

Un formulaire est défini par la balise <form>. À l'intérieur de cette balise, on peut utiliser différentes balises pour créer des champs de saisie, des boutons, des cases à cocher, etc.

Voici quelques-unes des balises, de formulaire, les plus couramment utilisées :

  • <input> : crée un champ de saisie. L'attribut type permet de spécifier le type de champ (texte, mot de passe, email, etc.).
  • <textarea> : crée une zone de texte pour une saisie plus longue.
  • <select> et <option> : permettent de créer une liste déroulante.
  • <button> : crée un bouton.

Exemple pratique​

Voici un exemple de formulaire simple :

<form>
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name">

  <label for="email">Email :</label>
  <input type="email" id="email" name="email">

  <label for="message">Message :</label>
  <textarea id="message" name="message"></textarea>

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

Dans cet exemple, nous avons utilisé la balise <label> pour associer un libellé à chaque champ de saisie.

L'attribut for de la balise <label> doit correspondre à l'attribut id du champ de saisie associé.

Bonne pratique - Association label et input

Toujours associer un <label> à chaque <input> via les attributs for et id car cela améliore l'accessibilité et facilite le clic sur le champ.

Les balises à connaître​

  • <form> : Définit un formulaire
  • <input> : Définit un champ de saisie. Les types les plus courants sont text, password, email, checkbox, radio, submit.
  • <label> : Définit un libellé pour un champ de saisie. L'attribut for permet d'associer le libellé à un champ de saisie.
  • <textarea> : Définit une zone de texte pour une saisie plus longue.

Zone de grand texte​

Liste déroulante d'options​

  • <select> : Définit une liste déroulante.
  • <option> : Définit une option dans une liste déroulante.

Bonne pratique - Option vide par defaut

Ajoutez un <option value="">Choisissez...</option> comme première option vide pour forcer l'utilisateur à faire un choix.

Bouton​

  • <button> : Définit un bouton.

    Le type le plus courant est submit qui permet de soumettre le formulaire.

Test de mémorisation/compréhension​


Quelle balise est utilisée pour créer un champ de saisie de texte ?


Quel attribut est utilisé pour associer un libellé à un champ de saisie ?


Quelle balise est utilisée pour créer une zone de texte pour une saisie plus longue ?


Quelle balise est utilisée pour créer une liste déroulante ?


Quelle balise est utilisée pour créer un bouton ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, vous allez créer un formulaire de contact pour un site Web.

Le formulaire doit comporter les champs suivants : nom, email, sujet et message.

N'oubliez pas d'ajouter un bouton pour soumettre le formulaire.

Bonne pratique - Type submit explicite

Toujours spécifier type="submit" sur le bouton de soumission (sans attribut type, un <button> dans un formulaire soumet par défaut, mais c'est préférable d'indiquer son type).

📌 Une solution