Formation PUB060 : HTML, 2020 Les formulaires HTML

Balises de formulaire HTML


Voici un rappel condensé des balises de formulaire HTML.

▼Publicité

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

  • 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 :

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

HTML

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

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

CSS

.saisiecourt {

   width: 75px;

}

JQuery

$('motdepasse').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 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 :

HTML

<label for="code">Code de produit :</label>

<input type="text" id="code" name="code" maxlength="10" />

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

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="^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy][0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz] ?[0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz][0-9]$"

      title="A9A 9A9" />

attribut title utilisé avec un 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. ». 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 :

HTML

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

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

      pattern="^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy][0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz] ?[0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz][0-9]$"

      title="Le code postal doit être au format A9A 9A9. Les lettres D, F, I, O, Q et U ne sont pas acceptées. Les lettres W et Z sont acceptées mais pas en première position." />

pattern

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 :

HTML

<label for="codeproduit">Code du produit :</label>

<input type="text" id="codeproduit" name="codeproduit" value="CG354" readonly />

attribut readonly

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 :

CSS

input[type="text"]:read-only {

    color: grey;

}

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 :

HTML

<label for="codeproduit">Code du produit :</label>

<input type="text" id="codeproduit" name="codeproduit" value="CG354" disabled />

attribut disabled appliqué à un input type='text'

Ex :

HTML

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

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

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

        ...

</select>

attribut disabled appliqué à un select

Ex :

HTML

<input type="submit" value="Envoyer" disabled />

attribut disabled appliqué à un input type='submit'

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.

Syntaxe HTML

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

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

</form>

Ex :

HTML

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

   ...

</form>

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

Syntaxe HTML

<input type="text" id="nomunique" name="nomvariabledansformulaire" value="Valeur par défaut" ... />

Ex :

HTML

<label for="ville" >Ville :</label>

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

Résultat : input type=text

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.

input type=text avec un attribut value

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

Résultat : textarea

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

Ex :

HTML

<textarea id="description" name="description" >Fleur annuelle à floraison prolongée.</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="valeur1">premier élément</option>

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

</select>

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 :

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>

<select>

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.

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

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.

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

Syntaxe HTML

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

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

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" value="1" id="groupe1" name="age" />
<label for="homme">0-24 ans</label>
<input type="radio" value="2" id="groupe2" name="age" />
<label for="femme">25-49 ans</label>
<input type="radio" value="3" id="groupe3" name="age" />
<label for="femme">50 ans et plus</label>

Résultat : Boutons radio

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

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

Syntaxe HTML

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

Ex :

HTML

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

<input type="number" id="nombrebillets" name="nombrebillets" class="saisienombre" min="1" max="3" />

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

Input type='color'

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

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

HTML

<fieldset>
    <input type="radio" value="1" id="groupe1" name="age" />
    <label for="homme">0-24 ans</label>
    <input type="radio" value="2" id="groupe2" name="age" />
    <label for="femme">25-49 ans</label>
    <input type="radio" value="3" id="groupe3" name="age" />
    <label for="femme">50 ans et plus</label>
</fieldset>

Exemple fieldset

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 :

CSS

fieldset {
    display: inline-block;
}

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>Groupe d'âge</legend>

    <input type="radio" value="1" id="groupe1" name="age" />
    <label for="homme">0-24 ans</label>
    <input type="radio" value="2" id="groupe2" name="age" />
    <label for="femme">25-49 ans</label>
    <input type="radio" value="3" id="groupe3" name="age" />
    <label for="femme">50 ans et plus</label>
</fieldset>

Exemple fieldset avec 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 : Bouton

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.

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>

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 :

HTML

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

    ...

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

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

</form>

...

<script>

    $('#recalculer').click(function (event) {

        ...

    });

</script>

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"><img src="calcul.png" />Recalculer</button>

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

Balise 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 id="annuler" type="button" name="annuler" value="Annuler" />

...

<script> 

    $('#annuler').click(function (event) {

        window.location.href = "nouvellepage.php";

    });    

</script>

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

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>

Lien déguisé en bouton

Finalement, il est possible d'obtenir un effet intéressant à l'aide d'un lien (balise <a href>) qui a l'apparence d'un bouton grâce à des styles bien définis (voir la fiche Déguiser un lien en bouton (Vous ne possédez pas les droits pour accéder à cette fiche.)).

HTML

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

Si vous utilisez Bootstrap, le CSS est déjà tout monté pour vous :

HTML

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

Lien déguisé en bouton avec btn-secondary de Bootstrap

Le lien de l'exemple précédent ne peut que rediriger l'internaute vers une autre page Web. Par contre, à l'aide d'un gestionnaire d'événement JavaScript, on peut lui donner n'importe quel comportement.

HTML

<a href="#" class="btn btn-primary faitquelquechose">Texte du lien déguisé en bouton</a>

...

<script>

    $('.faitquelquechose').click(function (event) {

        event.preventDefault();

        ...

    });

</script>

Dans cet exemple, nous avons utilisé la classe btn-primary de Bootstrap afin d'indiquer à l'internaute qu'il s'agit du bouton par défaut.

Lien déguisé en bouton avec btn-primary de Bootstrap

 

Dernière révision le 8 novembre 2020
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre