modifier

Le HTML fournit un ensemble de balises pour construire des formulaires qui sont les éléments de base pour développer des pages interactives où l’utilisateur peut saisir des données, cliquer des boutons et sélectionner un ensemble de choix. Ces données peuvent être envoyées au serveur Web ou interceptées et utilisées par la page Web en utilisant le langage de programmation Web JavaScript. La mise en forme des formulaires avec CSS et le traitements dynamiques des ces formulaires avec JavaScript seront présentés dans des sections ultérieures.

Création d’un formulaire

Les formulaires doivent être délimités par la balise <form> et </form>. Comme celui-ci :

<form action="https://example.com/page-traitement" method="post">
</form>

C’est un élément conteneur définissant un formulaire. Pour spécifier la manière dont il se comporte, on ajoute les attributs action et method :

action : définit l’URL de la page où doivent être envoyées les données collectées par le formulaire.
method : définit la méthode HTTP utilisée pour envoyer les données (“get” ou “post”).

On ajoute ensuite les balises du formulaire. HTML5 a enrichi la liste de ces balises pour supporter différents types de données à saisir et a amélioré l’intégration avec le système.

Éléments d’un formulaire

Le HTML5 contient un nombre riche d’éléments de formulaire supportant des multiples types de données à saisir et améliorant l’intégration avec le système.

Champ de texte simple

C’est l’élément le plus basique de saisie. Il permet la saisie d’une seule ligne de texte.

<input type="text" />

Mot de passe

Il permet la saisie d’une seule ligne de données sensible à la casse (mot de passe). Le texte saisi n’est pas affiché mais des astérisques ou des points seront affichés.

<input type="password" />

Nombre

Il permet la saisie d’un nombre. On peut spécifier le nombre minimal possible par l’attribut min et le maximal par max et le pas entre les nombres possibles step

<input type="number" placeholder="Temperature en °C" min="-50" max="150" step="0.2" />

Zone de texte

Il permet de saisir un texte de plusieurs lignes. On peut changer sa hauteur et sa largeur en nombre des caractères.

<textarea cols="30" rows="3"></textarea>

Étiquette / label

La balise <label> permet de décrire le champ à saisir. On utilise l’attribut for pour spécifier l’identificateur de l’élément correspondant.

<label for="nom">Donnez votre nom :</label>
<input type="text" id="nom" />

Case à cocher

Elle permet de sélectionner de multiple choix dans une liste proposée (soit zéro ou un ou multiple choix). Les choix doivent appartenir au même groupe en leur donnant le même nom (même valeur de l’attribut name) mais chaque choix doit avoir une valeur différente de l’attribut value.

<p>
  <label>
    <input type="checkbox" name="food" value="végétarian" />
    Végétarien
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="fruit-de-mer" />
    Fruit de mer
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="steak" />
    Steak
  </label>
</p>

Groupe radio

Il permet de sélectionner un seul choix dans une liste proposée. Les choix qui sont les boutons radios doivent appartenir au même groupe en leur donnant le même nom (même valeur de l’attribut name) mais chaque choix (chaque bouton radio de même groupe) doit avoir une valeur différente de l’attribut value.

<p>
  <label>
    <input type="radio" name="reponse" value="vrai" />
    Vrai
  </label>
</p>
<p>
  <label>
    <input type="radio" name="reponse" value="faux" />
    Faux
  </label>
</p>

Bouton d’envoi

Il permet l’envoi des données saisies à l’URL spécifié dans l’attribut action du formulaire en utilisant la méthode HTTP spécifiée dans l’attribut method du formulaire. La création du bouton d’envoi peut être à travers un élément <input> de type submit ou d’un élément <button> qui est par défaut de type submit.

<p>
  <input type="submit" value="Envoyé le formulaire" />
</p>
<p>
  <button>Envoyé le <mark>formulaire</mark></button>
</p>

Bouton de réinitialisation

Il permet la réinitialisation des champs du formulaire. La création du bouton de réinitialisation peut être à travers un élément <input> de type reset ou d’un élément <button> de type reset.

<form>
  <input type="text" />
  <input type="reset" value="Réinitialiser" />
  <button type="reset"><b>Réinitialiser</b></button>
</form>

Liste à choix multiple

Il permet de sélectionner un seul (ou plusieurs) choix dans une liste d’options déroulante. Les choix sont des balises <option> avec différentes valeurs de l’attribut value. Elles sont toutes regroupées dans une balise <select>. L’attribut multiple permet la sélection de multiples choix dans une liste non déroulante.

<p>
  <select>
    <option value="tn">Tunisie</option>
    <option value="fr">France</option>
    <option value="us">États-Unis</option>
  </select>
</p>
<p>
  <select multiple>
    <option value="m">Musique</option>
    <option value="v">Vidéo</option>
    <option value="p">Photo</option>
  </select>
</p>

Fichier

Il permet de sélectionner un fichier depuis l’appareil de l’utilisateur pour le télécharger (uploader) vers le serveur. L’attribut enctype du formulaire doit être égal à “multipart/form-data” pour que le formulaire peut uploader le fichier. L’attribut multiple permet la sélection de fichier multiples. L’attribut accept peut être utilisé pour définir les types de fichier que le contrôle permet de sélectionner sous la forme d’une liste d’extensions de fichier ou de types MIME séparés par des virgules.

<form enctype="multipart/form-data">
  <input type="file" accept="image/*" />
</form>

Dates / Temps

Cette classe de type permet de saisir une date, un horaire ou les deux en utilisant respectivement les types date, time, datetime-local sans fuseau horaire. En plus, il permet de saisir une semaine d’une année et un mois d’une année en utilisant le type week et month respectivement. Le navigateur utilisera une interface pour améliorer l’expérience utilisateur. On peut spécifier la valeur minimale et la valeur maximale et le pas pour ces champs en utilisant respectivement les attributs min, max et step.

<p>
  <label>Champ de Date :</label>
  <input type="date" />
</p>
<p>
  <label>Champ de temps :</label>
  <input type="time" min="13:00" max="18:30" />
</p>
<p>
  <label>Champ de date et temps local:</label>
  <input type="datetime-local" />
</p>
<p>
  <label>Champ de mois:</label>
  <input type="month" />
</p>
<p>
  <label>Champ de semaine:</label>
  <input type="week" />
</p>

Noté bien: Le support des champs de type datetime-local, week et month ne sont pas encore supporté par la version bureautique du Firefox et Safari.

Couleur

Il permet la sélection d’une couleur en utilisant un sélecteur des couleurs.

<input type="color" />

Zone de recherche

Permet de saisir une seul ligne du texte. La différence entre ce type et le type texte est qu’il peut avoir une mise en forme différente qui dépend du navigateur utilisé.

<input type="search" />

Champ email

Il permet la saisie d’une ou de plusieurs adresses électroniques (email) qui sera/seront validée(s) par le navigateur. Le clavier tactile du smartphone sera optimisé pour la saisie des email. L’attribut multiple permet le saisir de multiple emails séparés par des virgules.

<input type="email" />

Champ URL

Il permet la saisie d’un URL absolu qui sera validé par le navigateur. Le clavier tactile du smartphone sera optimisé pour la saisie des URL.

<input type="url" />

Champ Téléphone

Il permet la saisie d’un numéro de téléphone. Il ne sera pas validé par le navigateur par ce que leurs formats varient beaucoup entre les pays. Le clavier tactile du smartphone sera optimisé pour leur saisie.

<input type="tel" />

Les attributs du formulaire

name

Définir le nom de l’élément du formulaire qui sera utilisé lors de l’envoi des données saisies au serveur qui peut les manipuler correctement. Cet attribut est obligatoire à tous les champs de saisie dont les valeurs seront envoyées au serveur.

type

Cet attribut spécifie le type du champ de saisie pour les éléments <input> et le type du bouton pour l’élément <button>.

value

Spécifie la valeur par défaut du champ et sera modifiée en cas de saisie.

autocomplete

Indiquer que le champ peut avoir sa valeur par défaut complétée automatiquement par le navigateur en utilisant les valeurs anciennement saisies. L’attribut autocomplete supporte un ensemble de valeurs permettant de spécifier le type de données à compléter, par exemple, la valeur “country-name” indique que le navigateur peut compléter le champ par le nom du pays de l’utilisateur. La liste complète des valeurs possible est accessible dans Mozilla Developer Network.

autofocus

Un attribut booléen pour mettre l’élément en focus lorsque la page est chargée. Un seul élément peut avoir le focus.

placeholder

Spécifier le texte à afficher dans le champ en gris à moitié transparent quand le champ est vide pour donner plus d’allusion à l’utilisateur.

<input type="email" placeholder="Exemple: contact@exemple.com" />

max, min, step

Spécifier la valeur maximale, la valeur minimale et le pas entre les valeurs possible pour les champs numériques ou des dates et des temps.

<p>
  <label>Saisi un nombre entre 5 et 10</label>
  <input type="number" min="5" max="10" />
</p>
<p>
  <label>Saisi un nombre entre -Inf et 100</label>
  <input type="number" step="10" max="100" />
</p>
<p>
  <label>Saisi un horaire entre 13:00 et 18:30</label>
  <input type="time" min="13:00" max="18:30" />
</p>

maxlength, minlength

Spécifier la longueur maximale et la longueur minimale du texte saisi pour les champs textuels.

<p>
  <label>Text de longeur maximale 20 lettres</label>
  <input type="text" maxlength="20" />
</p>
<p>
  <label>Mot de passe de longeur entre 8 et 32 lettres</label>
  <input type="password" minlength="8" maxlength="32" required />
</p>

checked, selected

Deux attributs booléens:

pour spécifier les choix sélectionnés par défaut dans une liste de cases à cocher ou dans une liste de choix sélectionné ou encore dans une liste de boutons radios en utilisant l’attribut checked
pour spécifier le(s) choix sélectionné(s) par défaut dans une liste d’options en utilisant l’attribut selected.

<label>
  <input type="radio" name="genre" value="h" checked />
  Homme
</label>
<label>
  <input type="radio" name="genre" value="f" />
  Femme
</label>


<p>
  <label>
    <input type="checkbox" name="food" value="végétarian" checked />
    Végétarien
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="fruit-de-mer" />
    Fruit de mer
  </label>
</p>
<p>
  <label>
    <input type="checkbox" name="food" value="steak" checked />
    Steak
  </label>
</p>

<p>
  <select>
    <option value="fr">France</option>
    <option selected value="tn">Tunisie</option>
    <option value="us">États-Unis</option>
  </select>
</p>
<p>
  <select multiple>
    <option selected value="m">Musique</option>
    <option value="v">Vidéo</option>
    <option selected value="p">Photo</option>
  </select>
</p>

required

Indique que la saisie des données (avec validation si supportée) dans le champ est obligatoire avant l’envoi des données. Dans le cas des boutons radios ou d’une liste de choix, l’attribut booléen indique que, un des choix doit être coché/sélectionné. Dans le cas de cases à cocher, il indique que ce choix doit être coché. Dans un élément de type fichier, il indique qu’un fichier doit être sélectionné.

<form>
  <p>
    <input type="text" />
  </p>
  <p>
    <input type="text" required />
  </p>
  <p>
    <label>
      <input type="radio" name="quiz" value="c1" />
      Choix 1
    </label>
    <label>
      <input type="radio" name="quiz" value="c2" required />
      Choix 2
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="check" value="c1" />
      Case 1
    </label>
    <label>
      <input type="checkbox" name="check" value="c2" required />
      Case 2 (Obligatoire)
    </label>
  </p>
  <p>
    <select multiple required>
      <option value="m">Musique</option>
      <option value="v">Vidéo</option>
      <option value="p">Photo</option>
    </select>
  </p>
  <input type="submit" value="Valider et Envoyez" />
</form>

pattern

Spécifier l’expression régulière des valeurs valides à saisir dans les champs textuels. Dans le cas d’un champ d’email ou d’URL, l’attribut est appliqué seulement si l’email ou l’URL est déjà de format valide.

Dans le premier exemple, on va limiter le texte saisi seulement à des chiffres hexadécimaux. On va utiliser une expression régulière qui accepte seulement des chiffres décimaux (‘0’…‘9’) et les lettres ‘A’ à ‘F’ en minuscule et en majuscule.

<form>
  <p>
    <label>Solution 1</label>
    <input type="text" pattern="[a-fA-F0-9]*" required />
  </p>
  <p>
    <label>Solution 2</label>
    <input type="text" pattern="[a-fA-F\d]*" required />
  </p>
  <input type="submit" value="Valider" />
</form>

Dans le deuxième exemple, on veut limiter les emails saisis aux emails du Google Mail (gmail) seulement. On a besoin donc d’une expression régulière qui soit valide si le nom du domaine de l’email est “gmail.com”, nous n’avons pas besoin de valider le format d’email (le contenu saisi avant ‘@’) car le format est validé avant la validation avec le pattern.

<form action="#">
  <input type="email" pattern=".+@gmail.com" required />
  <button>Vérifier</button>
</form>

disabled, readonly

Attributs booléens dont disabled spécifie que l’élément ne doit pas réagir à toutes les intéractions d’utilisateur (clic, sélection, …) et ne doit pas être envoyé au serveur. Tantdis que readonly spécifie que la valeur de l’élément ne doit pas être modifiée par l’utilisateur mais son contenu doit être envoyé au serveur.

<p>
  <input type="text" value="Je suis disabled" disabled />
</p>
<p>
  <input type="text" value="Je suis readonly" readonly />
</p>

Application

Premier formulaire

On va créer un formulaire simple de contact qui permet de saisir le nom et le prénom, l’email, le téléphone et le message. Il ne contient que quatre champs de texte, chacun ayant un libellé. Le premier est un champ texte pour la saisie du nom et prénom, le deuxième est un champ texte qui n’accepte qu’une adresse email valide, le troisième est un champ texte pour la saisie d’un numéro de téléphone et finalement un champ de type texte de plusieurs lignes pour la saisie du message de contact.

<form action="/contact.php" method="post">
  <p>
    <label for="nom">Nom et Prénom :</label>
    <input type="text" id="nom" name="nom" />
  </p>
  <p>
    <label for="email">Email :</label>
    <input type="email" id="email" name="mail" />
  </p>
  <p>
    <label for="phone">Téléphone :</label>
    <input type="tel" id="phone" name="phone" />
  </p>
  <p>
    <label for="message">Message :</label>
    <textarea id="message" rows="4" cols="30" name="msg"></textarea>
  </p>
  <p>
    <input type="submit" value="Envoyez" />
    <input type="reset" value="Réinitialiser" />
  </p>
</form>

L’utilisation de la balise <p> ici est juste pour structurer notre code et séparer visuellement les différents champs sans besoin de CSS. Chaque champ est accompagné d’une étiquette (veuillez noter la balise <label>). Pour faire la relation logique entre le champ et son étiquette, on utilise l’attribut for de l’étiquette pour référencer l’identificateur du champ (l’attribut id). Un des avantages de lier l’étiquette à son élément correspondant est de permettre à l’utilisateur de cliquer sur l’étiquette pour activer le champ correspondant.

Les trois premiers champs sont des éléments <input> dont on a utilisé l’attribut type pour spécifier le type de données à saisir. Le HTML5 supporte de différents types :

le type text permet de saisir une seule ligne de texte (nom et prénom dans notre cas) sans contrôle ni validation,
le type email permet de saisir une adresse email qui doit forcément être une adresse électronique valide,
le type tel permet la saisie d’un numéro de téléphone malgré il n’y a pas contrôle de numéros de téléphone car ils ne sont pas “standard international”, L’utilisation du champ de type tel améliore l’intégration avec les téléphones en affichant un clavier virtuel adapté à la saisie des numéros de téléphone (aussi pour le cas de champ de type email).
Le quatrième élément est un champ de texte de plusieurs lignes, on peut dimensionner ce champ en nombre de caractères visibles par ligne en utilisant l’attribut cols et le nombre de lignes visibles en utilisant l’attribut rows.

Les boutons sont des éléments <input>. Le premier bouton avec le type submit pour spécifier que ce bouton doit envoyer les données saisies à notre serveur. Le deuxième bouton est un autre élément de type reset pour spécifier que ce bouton doit réinitialiser les champs de notre formulaire. Pour changer le contenu de ces boutons, on utilise l’attribut value.

Deuxième formulaire

Donc, on va créer un nouveau formulaire utile et fonctionnel qui permettra de chercher un terme dans le moteur de recherche Google. Le moteur de recherche Google attend de passer le terme à rechercher avec le nom q (query) à https://www.google.com/search en utilisant la méthode “get”.

<form action="https://www.google.com/search" method="get" target="_blank">
  <input type="search" name="q" placeholder="Entrez votre terme..." required />
  <button>Recherche en <i>Google</i></button>
</form>

Pour le champ texte de saisie du terme, on a utilisé un élément <input> de type search. C’est un élément équivalent au champ de type text mais qui peut avoir une différente mise en forme qui dépend du navigateur utilisé. On a nommé ce champ q en utilisant l’attribut name puisque le moteur de recherche Google attend le terme à chercher passé avec le nom q. Deux nouveaux attributs utilisés dans cet élément sont placeholder qui permet de définir le texte à afficher en gris à moitié transparent dans le champ s’il est vide et qui peut être utilisé au lieu ou avec l’étiquette. L’autre attribut est required qui indique que ce champ est obligatoire à saisir avant l’envoi des données au serveur.

On a aussi utilisé l’élément <button> au lieu du <input type="submit" />. Ils ont presque le même rôle. En effet, l’élément <button> est plus flexible et supporte la mise en forme de son contenu tandis que <input type="submit" /> ne peut accepter qu’un texte simple dans l’attribut value sans des balises de mise en forme.

Remarque

Pendant la conception de votre formulaire, il est important de garder la quantité de données à saisir par l’utilisateur le minimum possible, parce que par expérience, plus que vous demandez de données, plus vous risquez que l’utilisateur s’en aille. De plus, de point de vue de la sécurité et de la confidentialité, plus que vous stockez des données à propos de vos utilisateurs dans vos serveurs plus que vous augmentez le dommage en cas d’une faille de sécurité et fuite des données personnelles de vos utilisateurs.