Introduction aux formulaires HTML

En HTML, il existe plusieurs balises pour créer ce qu'on appelle des formulaires.

En informatique, un formulaire est un espace de saisie dans l'interface utilisateur, pouvant comporter plusieurs zones, ou « champs » : on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis, appuyer sur des boutons, etc.

• Définition de Wikipédia

Un exemple de formulaire très répandu sur le web : les interfaces de connexion ou de création de compte.

Selon le type de champ qu'on veut utiliser dans notre formulaire, nous utiliserons des balises différentes ou simplement des attributs différents pour une même balise.

À cela, nous allons aussi ajouter les classes Bootstrap pour les formulaires, afin de leur donner une apparence plus uniforme dans les navigateurs et les différents appareils. Non seulement les classes Bootstrap vont permettre une apparence uniforme, mais ajoutent aussi des fonctionnalités telles que la validation des champs de email.

La balise <form>

La balise <form> délimite un formulaire dans une page web.

C'est à l'intérieur de l'ouverture et fermeture de cette balise qu'on déclare ensuite les balises générant les éléments du formulaire.

Exemple :

<form>
  Prénom:<br>
  <input type="text" name="prenom">
  <br>
  Nom de famille:<br>
  <input type="text" name="nom_famille">
</form>

La balise <form> peut avoir plusieurs attributs tels que method et action.

Toutefois, ces attributs sont plus utilisés dans le cadre d'un site ayant à échanger des informations avec un serveur.

Utilité de la balise <form>

Bien qu'il soit possible de créer des formulaires sans la balise <form>, il est souvent plus facile de traiter le formulaire par JavaScript lorsqu'il est délimité par cette balise, car elle offre plusieurs méthodes permettant l'accès aux champs enfants. De plus, lorsqu'on utilise un bouton de type submit, ce dernier soumet les valeurs des champs inclus à l'intérieur du même bloc <form> que lui-même, de même que le bouton de type reset qui initialise les champs à l'intérieur du même formulaire.

La balise <label>

La balise <label> permet de créer un libellé pour un champ de formulaire.

Plutôt que de simplement afficher du texte, cette balise rend ce texte cliquable et donne le focus au champ associé. Cela apporte un niveau de convivialité suppérieur à du texte non identifié comme libellé.

Prenons des boutons radio : on facilite leur utilisation si l'utilisateur peut cliquer sur le texte plutôt que de devoir cliquer spécifiquement sur le cercle du bouton radio uniquement.

<form>
  <input type="radio" name="genre" id="idHomme" value="homme">
  <label for="idHomme">Homme</label><br>

  <input type="radio" name="genre" id="idFemme" value="femme">
  <label for="idFemme">Femme</label><br>

  <input type="radio" name="genre" id="idAutre" value="autre">
  <label for="idAutre">Non genré</label>
</form>

C'est avec l'attribut for qu'on indique à quel champ le libellé est lié.

La balise <input>

La balise <input> permet de créer une multitude de types de champs dans un formulaire.

Ce qui distingue chacun des types ? L'attribut type!

Voici la liste des types possibles :

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Deux autres attributs importants (autre que type ):

• name : attribut utilisé pour faire référence au champ lors du traitement. Noter que seuls les champs avec l'attribut name seront envoyés lors de la soumission du formulaire à un serveur de traitement.

• id : attribut utilisé pour faire référence au champ lors du traitement et à l'intérieur du formulaire lui-même (ex.: on associe un libellé à un champ grâce à son identifiant).

Quelques exemples pour <input>

Champ texte

<form>
  <label for="id_prenom">Prénom:</label>
  <input type="text" id="id_prenom" name="prenom"><br><br>
  <label for="id_famille">Nom de famille:</label>
  <input type="text" id="id_famille" name="famille"><br><br>
  <input type="button" value="Envoyer">
</form>

Notes sur les champs texte

• Les champs texte ont une longueur de 20 caractères par défaut
• Quelques attributs utiles (ceci n'est pas une liste complète des attributs possibles):
  • size : nombre de caractères pouvant être affichés dans le champ. Détermine ainsi la taille d'affichage du champ.
  • minlength : nombre minimal de caractères pour que la valeur soit considérée valide
  • maxlength : nombre maximal de caractères pouvant être écrit dans le champ (peut être plus gros / plus petit que l'attribut size)
  • placeholder : exemple de contenu affiché lorsque le champ est vide
  • value : valeur par défaut inscrite dans le champ. Doit être effacée pour pouvoir inscrire une nouvelle valeur.
  • required : indique que le champ doit obligatoirement contenir une valeur

Champ mot de passe

<form>
  <label for="id_email">Email:</label>
  <input type="email" id="id_email" name="email"><br><br>
  <label for="id_pwd">Password:</label>
  <input type="password" id="id_pwd" name="pwd" minlength="8"><br><br>
  <input type="submit" value="Envoyer">
</form>

Par défaut, un champ de type password masque les caractères par des astérisques.

Les attributs vus pour les champs texte s'appliquent aussi pour les champs password.

Champ checkbox (boîte à cocher)

La boîte à cocher permet de définir une option de sélection (coché ou décoché).

 <input type="checkbox" name="carotte" id="option_carotte">
 <label for="option_carotte">Carotte</label>

<input type="checkbox" name="brocoli" id="option_brocoli">
<label for="option_brocoli">Pepperoni</label>

<input type="checkbox" name="champignons" id="option_champignons">
<label for="option_champignons">Champignons</label>

L'attribut checked permet de cocher une case par défaut dès l'ouverture de la page web.

Champ radio

Un bouton radio en informatique permet de créer une liste de choix où un seul choix est possible en tout temps.

Dès qu'un choix est coché, alors le dernier choisi se décoche automatiquement.

<form>
  <p>Veuillez choisir votre tranche d'âge</p>
  <input type="radio" id="age1" name="age" value="30">
  <label for="age1">0 - 30</label><br>
  <input type="radio" id="age2" name="age" value="60">
  <label for="age2">31 - 60</label><br>  
  <input type="radio" id="age3" name="age" value="100">
  <label for="age3">61 - 100</label><br><br>
</form>

Important

• Les boutons radio doivent avoir la même valeur dans l'attribut name pour être considéré comme un groupe de boutons radio liés avec un seul pouvant être sélectionné.
• Les boutons radio doivent avoir l'attribut value défini pour connaître la valeur du choix coché
• L'attribut checked permet d'identifier le bouton radio qui sera coché par défaut et se met sur un seul des radios

Champ intervalle

Un champ d'intervalle (range) permet de créer une barre à glissière (slider).

Par défaut, ce type de champ permet les valeurs 0 à 100.

Quelques attributs utiles :

• min et max : plus petite et plus grande valeurs possibles
• step : intervalle d'incrément
• value : valeur par défaut

<form action="/action_page.php">
  <label for="vol">Volume min(0) - max(50) :</label>
  <input type="range" id="vol" name="volume" min="0" max="50">
</form>

Les balises <select> et <option>

Pour créer une liste déroulante, on utilise la balise <select>.

Chaque choix possible dans la liste déroulante est défini à l'aide de la balise <option>.

<form>
  <select name="voitures">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Quelques attributs utiles

• L'attribut selected sur une option permet de définir la valeur sélectionnée par défaut
• L'attribut multiple sur la balise <select> permet de sélectionner plus d'un choix
• L'attribut size sur la balise <select> permet d'indiquer le nombre d'éléments visibles
  

  <form>
    <select name="cars" size="4" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </form>
  

  

La balise <button>

La balise <button> permet de créer un bouton cliquable dans une page web.

Entre l'ouverture et la fermeture de la balise bouton, on peut inscrire du texte ou une image, pour afficher sur le bouton :

<button type="button">Cliquer ici</button>

L'attibut type doit être indiqué :

• button : génère un bouton qui doit être traité à l'aide d'un événement (onclick par exemple)
• reset : génère un bouton qui réinitialise ou efface le formulaire
• submit : génère un bouton qui soumet le formulaire, lorsque la balise <form> possède l'attribut action

Un autre attribut utile est l'attribut form qui permet de lier le bouton au formulaire en donnant comme valeur l'identifiant du formulaire.