3.1 Balises de formulaire HTML

Je vous propose ici un résumé des principales balises de formulaire HTML.

• Attributs qu'on peut retrouver dans la plupart des balises de formulaire
  • Attribut id
  • Attribut value
  • Attribut name
  • Attribut class
• Attributs qu'on peut retrouver dans certaines balises de saisie textuelles
  • Attribut required
  • Attribut maxlength
  • Attribut autofocus
  • Attribut placeholder
  • Attribut pattern
  • Attribut title
  • Attribut readonly
  • Attribut disabled
  • Attribut autocomplete
• Balises de formulaires
  • <form>
  • <input type="text">
  • <textarea>
  • <select>
  • <datalist>
  • <input type="checkbox">
  • <input type="radio">
  • <input type="date">
  • <input type="number">
  • <input type="color">
  • <input type="url">, <input type="email">, etc.
  • <fieldset> et <legend>
  • <input type="submit">, <input type="button">, <button>

Attributs qu'on peut retrouver dans la plupart des balises de formulaire

Attribut id

L'identifiant (id) d'un élément HTML doit être unique dans toute la page Web. Il permet d'identifier l'élément de façon unique.

Cet attribut est optionnel.

L'identifiant peut tenir plusieurs rôles :

• Pour les contrôles de saisie de données, un des rôle de l'identifiant consiste à associer un libellé à ce contrôle. Ainsi, un clic sur le libellé mettra le focus sur le contrôle associé.

  Ex :

  HTML

  <label for="usager">Usager :</label>

  <input type="text" id="usager">

  

• L'identifiant pourra également permettre de retrouver l'élément dans le code JavaScript.

  Ex :

  JavaScript

  var usager = document.getElementById("usager");

• Un autre rôle de l'élément id est de permettre de spécifier un style dans la feuille de style.

  Ex :

  CSS

  #usager {

     width: 75px;

  }

• ou d'affecter un gestionnaire d'événement avec jQuery.

  Ex :

  JQuery

  $('#usager').change(function () {

     ...

  });

• En bonus, l'identifiant peut servir d'ancre pour qu'un lien hypertexte ou une URL place une page vis-à-vis cet élément.

  Ex :

  HTML

  <a href="https://mondomaine.com/index.php#usager">...</a>

Attribut value

L'attribut value permet de spécifier la valeur associée à un contrôle de saisie de données. 

Cet attribut est optionnel.

Dans le cas des contrôles permettant d'entrer une valeur (ex : <input type="text">), si un attribut value est ajouté à la balise HTML, il s'agira de la valeur par défaut.

Dans le cas de contrôles où il n'est pas possible d'entrer une valeur, par exemple les listes déroulantes ou les boutons radio, la valeur est toujours entrée directement dans la balise HTML. Lorsque les contrôles sont créés à partir d'informations tirées de la base de données, la valeur correspondra souvent à la clé primaire de l'enregistrement.

Dans cet exemple, on a donné un attribut name pour montrer son interaction avec l'attribut value (démontré dans l'exemple plus bas).

Ex :

Attribut name

Le nom d'un élément, bien qu'il soit souvent confondu avec l'identifiant, joue un rôle un peu différent. Il permet d'identifier l'information dans le formulaire.

Malgré cela, la plupart du temps, on donnera la même valeur aux attributs name et id.

L'attribut name est optionnel.

Cet attribut n'a pas besoin d'être unique dans la page Web.

Dans le cas particulier des boutons radio, on donnera le même attribut name à tous les boutons radio qui doivent être mutuellement exclusifs.

On utilisera l'attribut name pour retrouver la valeur d'un élément de formulaire.

Ex :

Attribut class

La classe d'un élément HTML permet de styliser l'élément ou de lui affecter un gestionnaire d'événement avec jQuery.

L'utilisation d'une classe plutôt que d'un identifiant pour spécifier un style permet d'utiliser une même règle CSS pour plusieurs éléments.

Cet attribut est optionnel.

Il est possible de spécifier plusieurs classes pour un même élément HTML en séparant les classes par un espace.

Ex :

Attributs qu'on peut retrouver dans certaines balises de saisie textuelles

Ces attributs peuvent être utilisés dans des balises telles que <input type="text">, <input type="email">, <textarea>, etc.

Attribut required

L'attribut required permet d'obliger l'internaute à entrer une information. Tant que l'information n'est pas entrée, il ne sera pas possible d'envoyer le formulaire au serveur pour qu'il soit traité.

Ex :

Si l'internaute tente d'envoyer le formulaire sans entrer de valeur, le message « Veuillez renseigner ce champ. » apparaîtra automatiquement.

Notez bien : même lorsque vous utilisez l'attribut required, vous devez ajouter un astérisque devant le libellé afin d'indiquer clairement à l'internaute que le champ est obligatoire. Ceci rendra l'expérience utilisateur plus agréable.

Attribut maxlength

Lorsque le contenu d'un champ textuel doit être enregistré dans une base de données, il est important de s'assurer que le nombre de caractères entrés ne dépasse pas la taille du champ concerné.

L'attribut maxlength, qui existait déjà en HTML 4, assure qu'il sera impossible d'entrer plus de caractères qu'indiqué. Par exemple, si on a un maxlength de 10 et qu'on tente d'entrer un 11e caractère, il ne sera simplement pas pris en considération.

Ceci joue un rôle au niveau de l'ergonomie puisque l'usager verra qu'il a atteint la limite et donc il ne sera pas porté à continuer à entrer des caractères inutilement.

Ex :

Attribut autofocus

Cet attribut permet de donner le focus à un contrôle de saisie dès que le formulaire est affiché. Si plus d'un contrôle ont cet attribut, c'est le premier qui se verra donner le focus.

Ex :

Attribut placeholder

Un placeholder permet d'afficher un texte dans une boîte de saisie afin de donner une indication sur ce qui est attendu. Ce texte sera effacé dès que l'internaute commencera à entrer du texte.

Ex :

Notez bien : Vous devez utiliser un libellé devant le contrôle de saisie même lorsque vous utilisez un placeholder. En effet, dès que l'internaute commencera à écrire dans le contrôle, le placeholder disparaîtra et seul le libellé lui rappellera ce qui devait être entré dans le contrôle.

Il existe une exception à cette règle : lorsque le rôle du contrôle est absolument évident, on pourra utiliser un placeholder sans libellé.

Attribut pattern

Un pattern permet d'effectuer une validation côté client sur l'information entrée dans le champ. On spécifiera une expression régulière pour indiquer les valeurs valides.

Si l'information saisie ne correspond pas à l'expression régulière, le message « Veuillez respecter le format requis. » apparaîtra automatiquement. 

Ex :

Attribut title

L'attribut title peut être appliqué sur une foule de contrôles. Mais attention : l'information qui y est encodée ne sera pas visible pour plusieurs utilisateurs, notamment pour ceux utilisant des appareils mobiles. Il faut donc toujours s'assurer que l'information entrée dans l'attribut title ne soit pas cruciale ou encore qu'elle soit affichée ailleurs pour les internautes n'y ayant pas accès.

Voici cependant un exemple d'utilisation intéressant : dans le cas d'un contrôle utilisant l'attribut pattern, la balise title permet de préciser le message d'erreur. Le texte de cette balise apparaîtra sous le texte « Veuillez respecter le format requis. ». Il peut s'agir d'un texte très court, comme dans l'exemple précédent, ou encore d'un texte plus explicite, comme dans l'exemple qui suit.

Ex :

Attribut readonly

L'attribut readonly, comme son nom l'indique, permet de mettre un contrôle d'édition en lecture seule. Un contrôle readonly pourra encore obtenir le focus mais sa valeur ne pourra pas être modifiée.

Il peut être appliqué aux balises <input> et <textarea>. 

Ex :

Par défaut, l'ajout de l'attribut readonly ne modifiera pas l'apparence du contrôle. Il est cependant possible de modifier cette apparence par CSS.

Ex :

Note : avec HTML5, on ne donne pas de valeur à l'attribut readonly. Sa simple présence indique que le contrôle est en lecture seule. Avec XHTML, la syntaxe serait plutôt readonly="readonly".

Attribut disabled

Tout comme avec l'attribut readonly, il n'est pas possible de modifier la valeur d'un contrôle contenant l'attribut disabled. Mais il s'agit là de la seule ressemblance entre ces deux attributs.

Lorsqu'un contrôle est marqué avec disabled, il ne peut pas avoir le focus. Cet attribut est donc approprié pour une foule de contrôles :

• <a>
• <button>
• <form>
• <input type="button">
• <input type="checkbox">
• <input type="file">
• <input type="image">
• <input type="radio">
• <input type="submit">
• <input type="text">
• <select>
• <textarea>
• etc.

L'apparence des contrôles marqués avec disabled sera généralement grisée.

De plus, lors de la soumission du formulaire, le navigateur ne tiendra pas compte des contrôles marqués avec disabled. Ce sera comme s'ils n'existaient carrément pas.

Ex :

Ex :

Ex :

Attribut autocomplete

L'attribut autocomplete indique au navigateur s'il doit compléter automatiquement les balises <input> à partir d'informations que l'usager a déjà entrées. On peut l'utiliser sur la balise <form> pour que le comportement soit donné à toutes les balises admissibles dans ce formulaire ou encore à un élément particulier du formulaire.

Pour le formulaire, la valeur par défaut de l'attribut autocomplete est "on". Ceci signifie que par défaut, tous les champs admissibles du formulaire seront complétés automatiquement par le navigateur.

Notez qu'il n'est pas possible de compléter automatiquement des cases à cocher ou des listes déroulantes.

Balises de formulaires

<form>

Tous les contrôles du formulaire doivent être définis entre les balises <form> et </form>. 

Il n'est pas permis d'imbriquer deux balises <form>. Si vous le faites, le formulaire aura un comportement imprévisible.

Ex :

Attribut action

C'est à cet endroit que vous devez spécifier le nom de la page qui traitera les informations entrées dans le formuaire.

Vous devez entrer l'URL d'une page Web écrite à l'aide d'un langage de programmation Web comme PHP ou ASP.NET par exemple. Le code de cette page se chargera de traiter l'information reçue.

Attribut method

Cet attribut indique comment les informations du formulaire seront envoyées.

Deux choix sont possibles :

• post : Il s'agit de la méthode la plus employée. Les données seront envoyées de façon invisibles et la quantité d'information envoyée n'est pas limitée.
• get : Avec cette méthode, les données sont limitées à 255 caractères et elles apparaîtront en clair dans l'URL de la page associée à l'attribut action.

Contenu du formulaire

Pour que le formulaire respecte les normes du W3C, vous devez vous assurer que chaque élément du tableau soit entouré d'une balise conteneur. Souvent, on placera chaque ligne d'un formulaire entre des balises de paragraphe : <p> et </p>.

<input type="text">

Pour permettre la saisie de texte, vous utiliserez la balise <input type="text">.

Ex :

Résultat :

Si un attribut value est ajouté, le texte de cet attribut sera écrit par défaut dans la case de saisie. Ce comportement sera très utile pour les formulaires de modification, où les valeurs originales doivent apparaître dans les cases.

<textarea>

Le contrôle textarea permet de saisir plusieurs lignes de texte.

Attention : il n'est pas permis de refermer la balise comme suit : <textarea ... />.

Ex :

Résultat :

Pour donner une valeur par défaut au texterea, il faut inscrire cette valeur entre les balises <textarea> et </textarea>.

Ex :

<select>

La balise <select> permet de créer une liste déroulante, parfois appelée drop down list. Ce type de liste est utile lorsque l'internaute doit choisir une option dans une liste relativement courte.

Cette balise est souvent utilisée pour saisir la valeur d'une clé étrangère, par exemple la catégorie d'un item.

Attention : si les options de la liste proviennent d'une base de données, il ne faut pas oublier de les placer en ordre alphabétique.

Dans plusieurs cas, la liste d'options commencera par une option indiquant à l'internaute qu'il doit choisir un élément.

L'attribut value d'une option correspondra généralement à un identifiant (id) tiré de la base de données.

Le fait de spécifier une taille de 1 permettra de n'afficher qu'un seul élément lorsque la liste n'est pas déroulée.

Ex :

Il est possible de sélectionner par programmation un ou plusieurs éléments en ajoutant l'attribut selected à la balise <option>.

Ex :

<datalist> (input list)

La balise <datalist>, contrairement à la plupart des autres balises de formulaire, ne peut pas être utilisée seule.

Son rôle est de fournir une liste de réponses possibles à une balise <input list>. Elle aide l'usager à remplir le <input> mais elle ne lui impose aucune valeur. Il sera possible d'entrer n'importe quelle information même si elle ne fait pas partie du <datalist>.

Ce type de boîte de saisie est parfois appelé Boîte combo (en anglais : ComboBox).

Attention : la balise <datalist> n'est pas intéressante pour saisir la valeur d'une clé étrangère (par exemple la catégorie d'un item). La balise <select> est plus appropriée pour cet usager.

• D'abord, avec une balise <datalist>, l'usager peut entrer n'importe quoi comme valeur. Les options du <datalist> ne sont que des suggestions alors que la clé étrangère doit être choisie parmi une liste déterminée de valeurs.
• Ensuite, dans un <datalist>, on ne peut pas fournir une valeur ET un texte pour chacune des options. Pourtant, lorsqu'on saisit une clé étrangère, on voudra afficher un texte, par exemple le nom de la catégorie, et lui donner comme valeur l'identifiant (id) tiré de la base de données.

Il est donc préférable de respecter ce pour quoi le <datalist> a été conçu : fournir une liste de suggestions pour aider à remplir une boîte de texte.

Par exemple, pour suggérer des couleurs mais laisser l'usager libre d'entrer n'importe quelle autre couleur :

<input type="checkbox">

Les cases à cocher sont utiles lorsque l'internaute doit répondre par oui ou non ou encore par vrai ou faux.

Afin de respecter les normes établies, une case à cocher est toujours représentée par un carré.

Ex :

Lorsque la case est cochée, le programme qui effectue le traitement du formulaire recevra la valeur indiquée dans l'attribut value. Si la balise ne contient pas d'attribut value, une case cochée aura la valeur "On".

Notez bien : si la case n'est pas cochée, le checkbox ne transmettra aucune valeur au programme qui effectue le traitement du formulaire. Il faudra dont toujours vérifier si la valeur est transmise avant de tenter de la lire.

<input type="radio">

Les boutons radio offrent des choix mutuellement exclusifs. Si on coche une option puis qu'on en coche une autre, la première sera automatiquement décochée.

Afin de respecter les normes établies, un bouton radio est toujours représenté par un cercle.

Cette norme aide l'internaute à différencier une liste de cases à cocher (donc plusieurs choix possibles) d'une liste de boutons radio (un seul choix possible).

Le saviez-vous : le terme boutons radio vient des anciennes radio. On pouvait mémoriser les postes de radio et les récupérer à l'aide de gros boutons munis de ressorts. Rien à voir avec les boutons des appareils électroniques d'aujourd'hui. Lorsqu'on enfonçait un bouton, un mécanisme ressortait le bouton qui avait été enfoncé auparavant.

Attention : pour que les boutons soient mutuellement exclusifs, ils doivent avoir le même attribut name. Par contre, l'attribut id doit être unique pour chaque bouton.

Ex :

Résultat :

<input type="date">

Certains navigateurs permettent l'affichage d'un calendrier pour faciliter l'entrée d'une date. 

Attention : cette balise est l'une des balises HTML 5 les moins bien supportées par les navigateurs, tel que démontré sur le site Can I Use.

Ex :

<input type="number">

La balise <input type="number"> sert à saisir un nombre en permettant soit d'entrer directement la valeur désirée, soit en cliquant sur les flèches haut et bas pour augmenter ou diminuer la valeur du nombre.

De plus, si l'internaute tente d'enter une valeur non numérique, le message « Veuillez saisir un nombre. » apparaîtra automatiquement.

Il est à noter que dans la majorité des cas, on voudra utiliser la feuille de style pour diminuer la largeur de la boîte de saisie.

Ex :

<input type="color">

Cette balise est très pratique lorsqu'on veut permettre à l'internaute de sélectionner une couleur.

Ex :

<input type="url">, <input type="email">, etc.

Il existe d'autres types de balises <input> permettant de saisir et de valider automatiquement une url, une adresse de courriel, etc.

Ces balises agissent comme une balise <input type="text"> contenant un attribut pattern pour valider l'information entrée.

<fieldset> et <legend>

La balise <fieldset> permet de regrouper des éléments en les entourant d'une bordure. Il s'agit d'une balise de type bloc qui a un rôle strictement esthétique.

Il serait possible d'obtenir un effet semblable en plaçant les éléments dans une balise <div> à laquelle on aurait donné une bordure. Cependant, la balise <fieldset> a l'avantage d'être intéressante visuellement dès le départ en plus d'indiquer aux moteurs de recherche que les informations sont liées.  

Ex : Voici un exemple d'utilisation de <fieldset> dans sa plus simple expression :

Notez que le style de la bordure peut être contrôlé à l'aide du CSS.

Par exemple, pour que le rectangle s'ajuste automatiquement au texte qu'il contient :

Ajout de texte sur la bordure supérieure

Il est possible d'inscrire du texte sur la bordure supérieure en imbriquant une balise <legend> dans la balise <fieldset>.

Ex : Voici le même exemple agrémenté d'une légende.

<input type="submit">, <input type="button">, <button>

Un formulaire peut contenir plusieurs boutons. Certains s'occuperont d'appeler la page spécifiée dans l'attribut action de la balise <form>. D'autres effectueront un traitement côté client à l'aide de JavaScript. 

Différentes balises peuvent être utilisées selon le résultat désiré.

Traitement côté serveur

Pour que le traitement d'un formulaire puisse être effectué côté serveur, un formulaire doit être accompagné d'un bouton servant à envoyer les données au serveur (type submit). Un clic sur ce bouton ouvrira la page Web indiquée dans l'attribut action de la balise <form>. Cette page contiendra du code exécuté côté serveur (ex : PHP) pour effectuer le traitement requis.

Ex :

Résultat :

L'attribut name peut sembler incohérent dans l'exemple précédent puisqu'un bouton ne saisit aucune information. Cependant, dans le code côté serveur, on utilisera cet attribut pour vérifier si le bouton a été cliqué ou non.

Attention : un bouton de type submit doit absolument être placé entre les balises <form> et </form> pour que l'attribut action soit pris en compte.

La soumission du formulaire aurait également pu être réalisée à l'aide de ces balises :

Bouton d'annulation côté serveur vs validation HTML

Si votre formulaire a besoin d'un bouton d'annulation dont le traitement est effectué côté serveur, il faut prévoir que les validations HTML ne doivent pas empêcher la soumission du formulaire. On utilisera donc l'attribut formnovalidate.

Avec un bouton d'annulation de type submit, un clic sur ce bouton ouvrira la page Web indiquée dans l'attribut action de la balise <form>. Cette page devra vérifier quel bouton a été cliqué à l'aide de l'attribut name (dans l'exemple, ce sera envoyer ou annuler) avant d'effectuer le traitement requis.

Notez qu'un bouton d'annulation est généralement placé à droite ou en bas du bouton d'enregistrement. 

Ex :

Une autre technique, plus intéressante, est présentée dans la section Bouton d'annulation côté client.

Bouton avec traitement côté client

Voyons maintenant comment effectuer un traitement côté client.

Attention : les balises <input type="button"> et <button type="button"> ne soumettront pas le formulaire au serveur. Elles doivent absolument être associées à un gestionnaire d'événement côté client sans quoi, le bouton ne fera rien.

Ex :

La balise <button> permet elle aussi d'effectuer un traitement côté client. Cette balise offre plus de flexibilité au niveau de l'apparence en permettant d'ajouter des balises HTML dans son contenu, comme par exemple une image à côté du texte. 

Notez que même si elle permet d'effectuer un traitement côté serveur (attribut type="submit", qui est la valeur par défaut), on évitera ce comportement puisque les différents navigateurs ne réagissent pas tous de la même façon face à une balise <button type="submit">. 

On utilisera donc la balise <button> avec un type "button".

Avec l'ajout de quelques règles CSS, on obtiendra le résultat suivant :

Bouton d'annulation côté client

Parfois, un clic sur le bouton d'annulation n'aura pas besoin d'un traitement côté serveur, comme par exemple s'il doit simplement rediriger vers une autre page Web. Le traitement sera donc plus rapide si on l'exécute directement côté client.

Ex :

Traitement serveur à l'aide d'un bouton en image

Il est également possible d'utiliser une image comme bouton pour envoyer les données du formulaire.

Ex :

L'image spécifiée sera affichée et, tout comme pour les boutons de type submit, un clic sur cette image ouvrira la page Web indiquée dans l'attribut action de la balise <form>.