Ces types de zones sont soit une spécialisation de l'élément input soit une utilisation de l'élément button.

Quelque soit l'élément qui servira à créer un bouton, l'attribut `type` définira quelle action exécute le bouton :

- l'envoi du formulaire au serveur (soumission),
- la réinitialisation des zones du formulaire,
- l'exécution de code JavaScript.

Dans la suite, nous présenterons en détail les boutons fait avec l'élément input car pour des raisons historiques (bugs dans les navigateurs) c'est celui qui était le plus utilisé. Les informations données s'appliquent généralement de la même façon aux boutons fait avec l'élément button. La différence entre les 2 éléments tient avant tout à la structure HTML de leur composition.

Parmi ces sortes de bouton, le bouton de soumission est de loin le plus important et incontournable dans un formulaire.

### Avec la balise input

#### Bouton de soumission

Dans une page uniquement en HTML, la présence d'au moins un bouton de soumission dans un formulaire est indispensable pour que les informations saisies puissent être envoyées au serveur.

Il est possibe d'inclure dans le code HTML du code JavaScript qui donnera accès aux éléments du formulaire, permettra de faire des validations et corrections, et d'envoyer les informations sans qu'il y ait besoin de bouton de soumission.
La technique AJAX est une dérivation de cette possibilité. Elle permet en utilisant JavaScript d'envoyer des informations au serveur, d'attendre le retour fait par celui-ci, puis d'afficher ce retour dans une partie de la page Web sans que l'utilisateur ne change de page comme c'est le cas avec la soumission classique d'un formulaire.

Un bouton de soumission est fait avec l'élément input dont l'attribut `type` a la valeur `submit`. L'élément input est un élement vide (ie sans balise de fermeture).

Attribut possible | Utilité
`autofocus` | Activé à l'affichage de la page.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`formaction` | URL à laquelle le formulaire doit être soumis. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut action de l'élément `form` conteneur du bouton est pris en compte.
`formenctype` | Définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut enctype de l'élément `form` conteneur du bouton est pris en compte.
`formmethod` | Définit la méthode utilisée pour envoyer les données au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut method de l'élément `form` conteneur du bouton est pris en compte.
`formnovalidate` | Attribut booléen qui indique si le formulaire doit être validé au moment de sa soumission. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut formnovalidate de l'élément `form` conteneur du bouton est pris en compte.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value` | Libellé du bouton. Transmise au serveur.

L'attribut `value` permet de donner le libellé qui apparaitra sur le bouton.
Si cet attribut n'a pas de valeur (ie une chaîne vide), le bouton apparaitra mais sans libellé.
Si cet attribut n'est pas présent, le navigateur mettra un libellé par défaut (dépendant de chaque navigateur).

Cet élément est représenté par défaut sous la forme d'un bouton tel que ceux de l'interface du système d'exploitation utilisé.

Quand on clique sur ce bouton on déclenche l'envoi du contenu du formulaire au serveur (on parle aussi de "soumission de formulaire"). C'est le navigateur qui prend automatiquement en charge la collecte des informations saisies, leur mise en forme pour échange avec le serveur et leur transfert sur le réseau.

Exemple : bouton de soumission
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Bouton de soumission</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btnEnvoi"] { display:block; margin:2em auto } </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Bouton de soumission</h3> <label for="txtN">Nom</label> <input type="text" name="txtN" size="27" id="txtN"> <label for="txtP">Prénom</label> <input type="text" name="txtP" size="27" id="txtP"> <input type="submit" value="Envoyer" name="btnEnvoi"> </form> </body> </html>

Si on veut changer l'apparence du bouton de soumission (ou des autres types de boutons), il faut utiliser des propriétés de style CSS comme dans l'exemple suivant.

Exemple : bouton de soumission
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Bouton de soumission</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} .bouton { background: url("../exemples/images/key.png") no-repeat 40px center #B60A35; border-radius: 16px; color: #FFFFFF; cursor: pointer; display: block; margin: 2em 0; padding: 4px 0 4px 60px; text-align: left; width: 184px } .bouton:hover { background-color: #31e016; color: #000000; } </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Bouton de soumission</h3> <label for="txtL">Login</label> <input type="text" name="txtL" size="27" id="txtL"> <label for="txtP">Mot de passe</label> <input type="password" name="txtP" size="27" id="txtP"> <input type="submit" value="S'authentifier" name="btnEnvoi" class="bouton"> </form> </body> </html>

Dans certaines pages (ou applications), on peut avoir plusieurs boutons de soumission qui enverront tous vers le même "programme" sur le serveur, mais qui en fonction de leur nom (attribut `name`) déclencheront des traitement différents.
Le cas typique est une gestion de fiche dans une base de données ou aura par exemple un bouton de soumission qui va déclencher un traitement de mise à jour de la fiche (ie une requête SQL UPDATE), et un autre bouton de soumission qui lui va déclencher un traitement de suppression de la fiche (ie une requête SQL DELETE).

Exemple : plusieurs boutons de soumission
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Plusieurs boutons de soumission</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Mise à jour utilisateur</h3> <label for="txtN">Nom</label> <input type="text" name="txtN" value="Vador" size="27" id="txtN"> <label for="txtP">Prénom</label> <input type="text" name="txtP" value="Dark" size="27" id="txtP"> <label for="txtM">Mail</label> <input type="email" name="txtM" value="darkounet@etoile-noire.com" size="27" id="txtM"> <p> <input type="submit" value="Abandon" name="btnAbandon"> <input type="submit" value="Supprimer" name="btnSupprimer"> <input type="submit" value="Modifier" name="btnModifier"> </p> </form> </body> </html>

#### Bouton de réinitialisation

Exemple : bouton de réinitialisation
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Bouton de réinitialisation</h3> <p>Modifier les zones puis cliquez sur le bouton. </p> <label for="txtN">Nom</label> <input type="text" name="txtN" value="Vador" size="27" id="txtN"> <label for="txtP">Prénom</label> <input type="text" name="txtP" value="" size="27" id="txtP"> <label for="txtM">Mail</label> <input type="email" name="txtM" value="darkounet@etoile-noire.com" size="27" id="txtM"> <p> <input type="reset" value="Réinitialiser"> </p> </form> </body> </html>

Un bouton de réinitialisation est fait avec l'élément input dont l'attribut `type` a la valeur `reset`. L'élément input est un élement vide (ie sans balise de fermeture).

Un bouton de réinitialisation n'est pas vraiment un bouton d'effacement des zones du formulaires. Il remet les zones dans l'état où elles étaient avant que l'utilisateur ne les modifie. Bien sûr, si les zones étaient vides on aura l'impression que l'action du bouton a été d'effacer leur contenu, mais ce n'est pas ce qui est fait en réalité.
Vous pouvez constater dans l'exemple précédent que seule la zone "Prénom" a été "effacée" car sa valeur initiale était une chaîne vide.

Cet élément est représenté par défaut sous la forme d'un bouton tel que ceux de l'interface du système d'exploitation utilisé.
Si on veut changer l'apparence du bouton, il faut utiliser des propriétés de style CSS.

L'attribut `value` permet de donner le libellé qui apparaitra sur le bouton.
Si cet attribut n'a pas de valeur (ie une chaîne vide), le bouton apparaitra mais sans libellé.
Si cet attribut n'est pas présent, le navigateur mettra un libellé par défaut (dépendant de chaque navigateur).

La zone n'a pas besoin d'être nommée avec un attribut `name` car aucun couple nom / valeur la représentant ne sera envoyé au serveur lors de la soumission du formulaire.

Attribut possible | Utilité
`autofocus` | Activé à l'affichage de la page.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value` | Libellé du bouton. Non transmis au serveur.

#### Bouton de script

Exemple : bouton de script
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> <script> function faireAction() { document.getElementsByTagName('H3')[0] .innerHTML = "La fonction faireAction a été exécutée"; } </script> </head> <body> <h3>Bouton de script</h3> <form method="POST" action="dossier/reception.php"> <input type="button" value="Pas d'action"> <input type="button" value="Action" onclick="faireAction()"> </form> </body> </html>

Un bouton script est fait avec l'élément input dont l'attribut `type` a la valeur `button`. L'élément input est un élement vide (ie sans balise de fermeture).

Cet élément est prévu pour exécuter du code JavaScript lorsqu'il est cliqué.
Si l'événement de cliquer sur le bouton n'est pas rattaché à du code JavaScript, rien ne se passera (cas du 1er bouton de l'exemple précédent).
L'événement clique du 2eme bouton est lui rattaché à du code JavaScript : la fonction `faireAction()` va changer le contenu du tag H3 de la page.

Cet élément est représenté par défaut sous la forme d'un bouton tel que ceux de l'interface du système d'exploitation utilisé.
Si on veut changer l'apparence du bouton, il faut utiliser des propriétés de style CSS.

L'attribut `value` permet de donner le libellé qui apparaitra sur le bouton.
Si cet attribut n'a pas de valeur (ie une chaîne vide) ou s'il n'est pas présent, le bouton apparaitra mais sans libellé.

La zone n'a pas besoin d'être nommée avec un attribut `name` car aucun couple nom / valeur la représentant ne sera envoyé au serveur lors de la soumission du formulaire.

Attribut possible | Utilité
`autofocus` | Activé à l'affichage de la page.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value` | Libellé du bouton. Non transmis au serveur.

#### Bouton image

Exemple : bouton image
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Bouton image</h3> <label for="txtN">Nom</label> <input type="text" name="txtN" value="Vador" size="30" id="txtN"> <label for="txtP">Prénom</label> <input type="text" name="txtP" value="Dark" size="30" id="txtP"> <label for="txtM">Mail</label> <input type="email" name="txtM" value="darkounet@etoile-noire.com" size="30" id="txtM"> <p> <input type="image" src="../exemples/images/btn_yoda.png"> </p> </form> </body> </html>

Un bouton image est fait avec l'élément input dont l'attribut `type` a la valeur `image`. L'élément input est un élement vide (ie sans balise de fermeture).

Un bouton image est en réalité un bout de soumission, avec les différences suivantes :

- aucun libellé ne sera affiché (l'attribut `value` s'il est présent sera ignoré)
- il n'y a pas besoin de nom (pas d'attribut `name`)
- aucun couple nom / valeur représentant le bouton ne sera envoyé au serveur lors de la soumission du formulaire.

Dans les faits, ce type de bouton est très peu utilisé. Au début du Web, il était concevable d'avoir un élément de ce type pour améliorer graphiquement les formulaires. Actuellement, avec les possibilités des feuilles de style CSS il est devenu obsolète, d'autant plus que rien n'est transmis au serveur le concernant.

Nom | Utilité
`alt` | Alternative textuelle à l'image.
`autofocus` | Activé à l'affichage de la page.
`dirname` | Direction du texte saisi ou affiché.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`formaction` | URL à laquelle le formulaire doit être soumis. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut action de l'élément `form` conteneur du bouton est pris en compte.
`formenctype` | Définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut enctype de l'élément `form` conteneur du bouton est pris en compte.
`formmethod` | Définit la méthode utilisée pour envoyer les données au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut method de l'élément `form` conteneur du bouton est pris en compte.
`formnovalidate` | Attribut booléen qui indique si le formulaire doit être validé au moment de sa soumission. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut formnovalidate de l'élément `form` conteneur du bouton est pris en compte.
`height` | Hauteur de l'image.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`src` | URL de l'image.
`width` | Largeur de l'image.

#### Noter

noter

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (`form05.css`) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode `POST` pour envoyer les informations saisies à `noter.php`.

Les zones du formulaire s'appellent respectivement `txtNom`, `nbrNote`, `btnNoter`, `btnInit` et `btnAbsent`.

- `txtNom` est obligatoire, fait 40 de long et a un texte d'aide.
- `nbrNote` varie de 0 à 20 avec un incrément de 1. La valeur par défaut est 10.
- `btnNoter` est un bouton de soumission.
- `btnInit` est un bouton de réinitialisation.
- `btnAbsent` est un bouton qui déclenche l'exécution de la fonction JavaScript `ilEstAbsent`.

Code à compléter

Exercice : hacking
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Noter</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> label {display: block; margin: 1em 0 0.2em 0;} </style> <script> function ilEstAbsent() { var Z = document.forms[0]["nbrNote"]; Z.type = "text"; Z.value = "ABSENT"; } </script> </head> <body> <form> </form> </body> </html>

Une solution possible

Exercice : hacking
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Noter</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> label {display: block; margin: 1em 0 0.2em 0;} </style> <script> function ilEstAbsent() { var Z = document.forms[0]["nbrNote"]; Z.type = "text"; Z.value = "ABSENT"; } </script> </head> <body> <form method="POST" action="noter.php"> <fieldset> <legend>Noter</legend> <label for="txtNom">Nom étudiant</label> <input type="text" name="txtNom" id="txtNom" size="40" required placeholder="Obligatoire"> <label for="nbrNote">Note</label> <input type="number" name="nbrNote" value="10" id="nbrNote" min="0" max="20" step="1"> </fieldset> <fieldset> <input type="submit" name="btnNoter" value="Noter"> <input type="reset" name="btnInit" value="Réinitialiser"> <input type="button" name="btnAbsent" value="Absent" onclick="ilEstAbsent()"> </fieldset> </form> </body> </html>

### Avec la balise button

#### Structure HTML

La principale différence entre les boutons faits avec l'élément input ou avec l'élément button tient dans la structure HTML utilisée pour réaliser l'un ou l'autre : l'élément button peut contenir du texte et d'autres éléments .
Les éléments qui peuvent être contenus sont des éléments de "contenu phrasé" (essentiellement des éléments de texte, des éléments embarqués et des éléments de formulaire), à l'exclusion de tout élément interactif.

Exemple : button
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> <style> button img {vertical-align: middle;} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Boutons ...</h3> <button> Bouton avec du texte simple </button> <button> <hr><i>Bouton</i> avec<br> <strong>balises</strong> HTML<hr> </button> <button> <img src="../exemples/images/pen.png" width="32" height="32"> Bouton avec texte et image </button> </form> </body> </html>

#### L'attribut type

C'est l'attribut `type` qui définit l'action réalisée par le bouton :

- `type="submit"` crée un bouton d'envoi du formulaire au serveur (soumission),
- `type="reset"` crée un bouton de réinitialisation des zones du formulaire,
- `type="button"` crée un bouton d'exécution de code JavaScript.

Si l'attribut `type` n'est pas défini, la valeur par défaut sera `submit`.

Pour les boutons de type `submit` il est important de bien préciser le nom du bouton (attribut `name`) et la valeur associée (attribut `value`). C'est le couple qui sera envoyé au serveur Web et qui permettra au "programme" récupèrant les informations saisies dans le formulaire de définir le traitement qu'il a à faire.

Exemple : attribut type
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> <style> button img {vertical-align: middle;} </style> </head> <body> <form action="dossier/rechercher.php" method="POST"> <h3>Rechercher</h3> <label for="txtMot">Mot clé : </label> <input type="text" name="txtMot" id="txtMot" size="47"> <p> <button type="reset"> <img src="../exemples/images/gomme.png" width="50" height="51"> <strong><i>Effacer</i></strong> </button> <button type="submit" name="btnValide" value="1"> <img src="../exemples/images/valider.png" width="58" height="51"> <strong><i>Valider</i></strong> </button> <button type="button" onclick="alert('Un bon conseil ...')"> <img src="../exemples/images/aide.png" width="66" height="51"> <strong><i>Conseil</i></strong> </button> </p> </form> </body> </html>

#### Tous les attributs

Attribut possible | Utilité
`autofocus` | Activé à l'affichage de la page.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`formaction` | URL à laquelle le formulaire doit être soumis. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut action de l'élément `form` conteneur du bouton est pris en compte.
`formenctype` | Définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut enctype de l'élément `form` conteneur du bouton est pris en compte.
`formmethod` | Définit la méthode utilisée pour envoyer les données au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut method de l'élément `form` conteneur du bouton est pris en compte.
`formnovalidate` | Attribut booléen qui indique si le formulaire doit être validé au moment de sa soumission. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut formnovalidate de l'élément `form` conteneur du bouton est pris en compte.
`name` | Nom de la zone.
`type` | Définit quelle action est exécutée par le bouton : `submit` pour la soumission du formulaire, `reset` pour la réinitialisation des zones du formulaire, `button` pour l'exécution de code JavaScript.
`value` | Libellé du bouton. Transmise au serveur.

#### Hacking

hacking

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (`form05.css`) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode `POST` pour envoyer les informations saisies à `hacker.php`.

La zone de saisie s'appelle `urlSite`, elle est obligatoire et affiche un texte d'aide.

arborescence de l'exercice

Tous les boutons soumettent le formulaire, mais à des URLs différentes. Ils contiennent tous 2 images. L'image principale s'appelle `pirate.png`, fait 80 pixels sur 70 et se trouve (comme toutes les autres images) dans le dossier `images` du dossier `exemples`. Les boutons ont les caractèristiques suivantes :

Nom | Valeur | Url soumission | 2ème image | Dimensions
`btnHaut` | haut | `haut.php` | `ciseaux.png` | 29 X 30
`btnBas` | bas | `bas.php` | `scie.png` | 30 X 30
`btnGauche` | gauche | `gauche.php` | `marteau.png` | 30 X 30
`btnDroite` | droite | `droite.php` | `bug.png` | 29 X 30

Code à compléter

Exercice : hacking
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Hacking</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> input[type="url"] { width: 95%;} button { width: 140px;} button img {vertical-align: middle;}; </style> </head> <body> <form> </form> </body> </html>

Une solution possible

Exercice : hacking
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Hacking</title> <link href="../html08/styles/form05.css" rel="stylesheet"> <style> input[type="url"] { width: 95%;} button { width: 140px;} button img {vertical-align: middle;}; </style> </head> <body> <form method="POST" action="hacker.php"> <fieldset> <legend>Hacking</legend> <label for="urlSite">URL du site à hacker</label> <br> <input type="url" name="urlSite" id="urlSite" required placeholder="Url complète SVP"> </fieldset> <fieldset> <button type="submit" formaction="haut.php" name="btnHaut" value="haut"> <img src="../exemples/images/pirate.png" width="80" height="70"> <br><strong>Hacker par le haut</strong> <img src="../exemples/images/ciseaux.png" width="29" height="30"> </button> <button type="submit" formaction="bas.php" name="btnBas" value="bas"> <img src="../exemples/images/pirate.png" width="80" height="70"> <br><strong>Hacker par le bas</strong> <img src="../exemples/images/scie.png" width="30" height="30"> </button> <button type="submit" formaction="gauche.php" name="btngauche" value="gauche"> <img src="../exemples/images/pirate.png" width="80" height="70"> <br><strong>Hacker par la gauche</strong> <img src="../exemples/images/marteau.png" width="30" height="30"> </button> <button type="submit" formaction="droite.php" name="btnDroite" value="droite"> <img src="../exemples/images/pirate.png" width="80" height="70"> <br><strong>Hacker par la droite</strong> <img src="../exemples/images/bug.png" width="29" height="30"> </button> </fieldset> </form> </body> </html>