Les formulaires en HTML

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

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.
• <select> : Définit une liste déroulante.
• <option> : Définit une option dans une liste déroulante.
• <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 ?

<text>

<input>

<field>

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

id

for

label

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

<input>

<textarea>

<longtext>

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

<dropdown>

<select>

<list>

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

<button>

<push>

<click>

---

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.

Une solution

Voici une solution possible :

<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="subject">Sujet :</label>
  <input type="text" id="subject" name="subject">

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

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