Les balises HTML de formulaire

Voici en condensé les principales balises de formulaire qui pourraient vous être utiles lors du développement de votre site Web.

▼Publicité

Dans cet article, je me suis amusée à reproduire le style des titres à l'aide des explications de James Koster : http://css-tricks.com/snippets/css/ribbon/

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">

    label for

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

    Ex :

    Javascript

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

  • 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 comportement jQuery.

    Ex :

    JQuery

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

       ...

    });

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

    Ex :

    HTML

    <a href="http://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, comme 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 :

HTML

<select id="categorie" name="categorie">

  <option value="">Sélectionnez une catégorie</option>

  <option value="0">Jeux d'action</option>

  <option value="1">Jeux de plateforme</option>

  <option value="2">Jeux de simulation</option>

</select>

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 :

PHP

$categorie = $_POST['categorie'];   // la valeur sera celle correspondant à l'option sélectionnée

Attribut class

La classe d'un élément HTML permet de styliser l'élément ou de lui affecter un comportement 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.

Ex :

HTML

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

<input type="text" id="motdepasse" class="saisiecourt">

CSS

.saisiecourt {

   width: 75px;

}

JQuery

$('.saisiecourt').keydown(function() {

  ...

});

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 :

HTML

<label for="courriel">* Couriel :</label>

<input type="text" id="courriel" name="courriel" required />

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

required

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 utlisateur plus agréable.

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 :

HTML

<label for="prenom">* Prénom :</label>

<input type="text" id="prenom" name="prenom" autofocus />

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 :

HTML

<label for="codepostal">Code postal :</label>

<input type="text" id="codepostal" name="codepostal" placeholder="A9A 9A9" />

placeholder

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

placeholder pour recherche

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 :

HTML

<label for="codepostal">Code postal :</label>

<input type="text" id="codepostal" name="codepostal" placeholder="A9A 9A9" 

    pattern="^[a-zA-Z]{1}\d{1}[a-zA-Z]{1} *\d{1}[a-zA-Z]{1}\d{1}$" />

Cette expression régulière stipule que :

  • ^ : l'expression doit commencer par
  • [a-zA-Z]{1} : une lettre
  • \d{1} : suivi d'un chiffre
  • [a-zA-Z]{1} : suivi d'une lettre
  •  * : suivi de zéro ou plusieurs espaces (il y a un espace avant l'astérisque)
  • \d{1} : suivi d'un chiffre
  • [a-zA-Z]{1} : suivi d'une lettre
  • \d{1} : suivi d'un chiffre
  • $ rien d'autre après

pattern

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

Ex :

HTML

<label for="codepostal">Code postal :</label>

<input type="text" id="codepostal" name="codepostal" placeholder="A9A 9A9" 

    pattern="^[a-zA-Z]{1}\d{1}[a-zA-Z]{1} *\d{1}[a-zA-Z]{1}\d{1}$" title="A9A 9A9" />

title avec pattern

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.

Syntaxe HTML

<form id="..." action="..." method="...">

   ...    <!-- contrôles du formulaire ici -->

</form>

Ex :

HTML

<form id="authentif" action="authentif.php" method="post">

   ...

</form>

Attribut action

C'est à cet endroit que vous devez spécifier comment les informations du formulaire seront traitées.

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

Syntaxe HTML

<input type="text" id="nomunique" name="nomvariabledansformulaire" ... />

Ex :

HTML

<input type="text" id="ville" name="ville" />

<textarea>

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

Syntaxe HTML

<textarea id="nomunique" name="nomvariabledansformulaire" ... ></textarea>

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

Ex :

HTML

<label for="commentaire" >Vos commentaires sont appréciés !</label>

<textarea id="commentaire" name="commentaire" ></textarea>

textarea

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

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.

Syntaxe HTML

<select id="nomunique" name="nomvariabledansformulaire" size="nbelementsaffiches" ... >

    <option value="" selected>Veuillez choisir...</option>

    <option value="valeurunique">premier élément</option>

    <option value="2evaleurunique">deuxième élément</option>

</select>

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 :

HTML

<select id="voiture" name="voiture" size="1" >

    <option value="">Veuillez choisir une voiture</option>

    <option value="2">Ford Escape</option>

    <option value="4">Honda Civic</option>

    <option value="1">Mazda 5</option>

    <option value="3">Mini Cooper</option>

    <option value="5">Toyota Matrix</option>

</select>

select déroulé

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

Ex :

HTML

<select id="voiture" name="voiture" size="1" >

    <option value="">Veuillez choisir une voiture</option>

    <option value="2">Ford Escape</option>

    <option value="4" selected>Honda Civic</option>

    <option value="1">Mazda 5</option>

    <option value="3">Mini Cooper</option>

    <option value="5">Toyota Matrix</option>

</select>

<select>

<input type="checkbox">

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

Syntaxe HTML

<input type="checkbox" id="nomunique name="nomvariabledansformulaire" value="1" />

Ex :

HTML

<input type="checkbox" id="acceptertermes" name="acceptertermes" value="1" />

<label for="acceptertermes">J'accepte les termes et conditions</label>

checkbox

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.

Syntaxe HTML

<input type="radio" value="unevaleur" id="nomunique1" name="nomgroupe" ... />

<input type="radio" value="uneautrevaleur" id="nomunique2" name="nomgroupe" ... />

Les boutons radios sont de forme ronde, pour indiquer qu'ils sont mutuellement exclusifs, alors que les cases à cocher sont carrées.

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.

Radio avec boutons poussoirs

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 :

HTML

<input type="radio" id="homme" name="sexe" />

<label for="homme">Homme</label>

<input type="radio" id="femme" name="sexe" />

<label for="femme">Femme</label>

boutons radio

<input type="date">

Certains navigateurs permettent l'affichage l'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.

Syntaxe HTML

<input type="date" id="nomunique" name="nomvariabledansformulaire" ... />

Ex :

HTML

<label for="rendezvous">Date du rendez-vous :</label>

<input type="date" id="rendezvous" name="rendezvous" />

input type="date"

input type="date" avec calendrier

<input type="number">

La balise <input type="number"> permet de 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.

Syntaxe HTML

<input type="number" id="nomunique" name="nomvariabledansformulaire" ... />

Ex :

HTML

<label for="nombrebillets">Nombre de billets :</label>

<input type="number" id="nombrebillets" name="nombrebillets" class="saisienombre" />

input type="number"

input type="number"

<input type="color">

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

Syntaxe HTML

<input type="color" id="nomunique" name="nomvariabledansformulaire" ... />

Ex :

HTML

<label for="couleurbouton">Couleur des boutons :</label>

<input type="color" id="couleurbouton" name="couleurbouton" />

HTML-InputTypeColor

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

Il existe d'autres types de balises <input> permettant de saisir et de valider automatiquement un 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.

Syntaxe HTML

<input type="..." id="nomunique" name="nomvariabledansformulaire" ... />

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

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

HTML

<fieldset>

    <input type="radio" id="homme" name="sexe" />

    <label for="homme">Homme</label>

    <input type="radio" id="femme" name="sexe" />

    <label for="femme">Femme</label>

</fieldset>

fieldset

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

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.

HTML

<fieldset>

    <legend>Sexe</legend>

    <input type="radio" id="homme" name="sexe" />

    <label for="homme">Homme</label>

    <input type="radio" id="femme" name="sexe" />

    <label for="femme">Femme</label>

</fieldset>

fieldset avec 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, ASP.NET) pour effectuer le traitement requis.

Syntaxe HTML

<input type="submit" name="nomvariabledansformulaire" value="Texte à afficher sur le bouton" ... />

Ex :

HTML

<form ... action="traitementformulaire.php">

    ...

    <input type="submit" name="envoyer" value="Envoyer" />

</form>

Résultat : input type="submit"

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 être placé entre les balises <form> et </form>.

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 :

HTML

<form ... action="traitementformulaire.php"> 

    ...

    <input type="submit" name="envoyer" value="Envoyer" />

    <input type="submit" name="annuler" value="Annuler" formnovalidate />

</form>

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 avoir un attribut onclick, ou mieux : une instruction jQuery click(), sans quoi le bouton ne fera rien.

Ex :

HTML

<form ... action="traitementformulaire.php">

    ...

    <input type="button" name="recalculer" value="Recalculer" onclick="recalculer();" />

    <input type="submit" name="envoyer" value="Envoyer" />

</form>

ou mieux :

HTML

<form ... action="traitementformulaire.php">

    ...

    <input type="button" name="recalculer" value="Recalculer" />

    <input type="submit" name="envoyer" id="envoyer" value="Envoyer" />

</form>

jQuery

$(function () {

    $( "#envoyer" ).click(function( event ) {

        ...

    });

});

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

HTML

<button type="button" onclick="recalculer();"><img src="calcul.png" />Recalculer</button>

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

Exemple button

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 :

HTML

<input type="button" name="annuler" value="Annuler" onclick="javascript:window.location='nouvellepage.php';" />

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 :

HTML

<input type="image" name="envoyer" src="medias/fr/boutonEnvoyer.png" />

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 la balise <form>.

Voici des exemples de boutons ou de liens stylisés tirés de différents formulaires.

input type="image" (source inconnue)

input type="image" (source : http://christianelagace.com)

input type="image" (source : http://www.hotel-capcir.com/renseignement.php)

input type="image" (source : design maison à partir d'une image libre de droits)

Lien déguisé en bouton

Finalement, il est possible d'obtenir un effet intéressant à l'aide d'un lien (balise <a href>) dont l'apparence est modifiée à l'aide d'une feuille de style. 

Mise à jour

Pour plus d'information, consultez l'article « Balises input, button, a href et comment déguiser un lien en bouton »

Il va de soi qu'un tel bouton ne pourra que rediriger l'internaute vers une autre page Web.

HTML

<a href="nouvellepage.php">Texte du lien déguisé en bouton</a>

Pour plus d'information

« HTML Reference ». SitePoint. http://reference.sitepoint.com/html

« HTML5 Forms: The Markup ». SitePoint. http://www.sitepoint.com/html5-forms-markup/

« Formulaires HTML5 : nouveaux types de champs  ». AlsaCréations. http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html 

« Can I use... ». Can I Use. http://caniuse.com/

« Tous les objets de formulaire en HTML 5 ». Scriptol. http://www.scriptol.fr/html5/formulaire.php

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories