Bouton en HTML : choisir le bon type pour éviter les envois involontaires

Pour créer un bouton en HTML, utilisez <button type="button">Cliquer</button>. Ce code affiche un bouton utilisable à la souris comme au clavier. Son comportement dépend ensuite de votre objectif : déclencher une action JavaScript, envoyer un formulaire ou naviguer vers une autre page. Le bon choix commence par cette distinction, avant même de travailler son apparence.

Choisir entre bouton, champ input et lien

Un bouton sert à déclencher une action : ouvrir un panneau, enregistrer une saisie ou afficher un message. Un lien sert à rejoindre une destination. Ces éléments peuvent avoir le même aspect visuel, mais ils ne rendent pas le même service au navigateur ni aux utilisateurs.

Voici la syntaxe minimale d’un bouton sans envoi de formulaire :

<button type="button">Afficher les détails</button>

La balise ouvrante définit l’élément et ses attributs. Le texte situé entre les deux balises constitue son libellé visible. Contrairement à une simple zone cliquable, cet élément possède déjà les comportements clavier attendus d’un bouton.

L’alternative <input type="button" value="Afficher les détails"> reste valable, mais <button> offre davantage de souplesse pour organiser son contenu. Évitez de transformer un <div> ou un <span> en bouton : il faudrait reconstruire manuellement la gestion du clavier et la sémantique accessible.

Dans un formulaire, préciser le type pour maîtriser l’envoi

L’attribut type est essentiel. Dans un formulaire HTML classique, un <button> sans type explicite peut soumettre les données. Un bouton destiné à afficher une aide risque alors de provoquer un envoi inattendu.

• type="button" : ne déclenche pas d’action native de formulaire ; son comportement est généralement défini en JavaScript.
• type="submit" : soumet le formulaire auquel le bouton est associé.
• type="reset" : rétablit les valeurs initiales des champs, sans nécessairement les vider.

Un exemple de formulaire prêt à adapter

L’exemple suivant demande une adresse électronique puis transmet la saisie à un traitement serveur. Le chemin indiqué dans action est un emplacement d’exemple : remplacez-le par votre véritable point de traitement. Le bouton ne crée pas, à lui seul, la logique d’inscription.

<form action="/traiter-inscription" method="post">

<label for="email">Adresse électronique</label>

<input id="email" name="email" type="email" required>

<button type="submit" name="operation" value="inscription">M’inscrire</button>

</form>

Le champ transmet sa donnée grâce à name="email". Le bouton activé peut également transmettre son couple name/value, ici operation=inscription. La validation du navigateur facilite la saisie, mais ne remplace jamais les contrôles côté serveur.

Prévoir plusieurs destinations sans multiplier les formulaires

Un bouton de soumission peut utiliser formaction pour remplacer la destination définie sur le formulaire : <button type="submit" formaction="/previsualiser">Prévisualiser</button>. Ce chemin doit lui aussi correspondre à un traitement existant. Pour une prévisualisation qui ne doit pas exiger tous les champs obligatoires, l’attribut formnovalidate peut être pertinent, sans supprimer les vérifications nécessaires côté serveur.

Réservez reset aux situations où son effet est réellement utile. Placé près du bouton d’envoi, il peut annuler une longue saisie par erreur.

Déclencher une action JavaScript ou rejoindre une destination

En dehors d’un formulaire, un bouton de type button ne fait rien tant qu’aucun comportement ne lui est associé. Pour un premier test, l’attribut onclick permet d’exécuter une instruction directement :

<button type="button" onclick="alert('Votre demande a été prise en compte.')">Tester le bouton</button>

Cette méthode est lisible pour un exemple court. Dans un projet maintenu, préférez addEventListener, qui sépare le balisage et la logique JavaScript. Certaines politiques de sécurité bloquent d’ailleurs les gestionnaires écrits directement dans les attributs HTML.

Séparer le bouton de son comportement

Placez ce bouton dans votre page, puis le JavaScript dans un fichier chargé après le document, ou avec l’attribut defer sur le script externe. L’élément doit exister lorsque le code le recherche.

<button type="button" id="confirmation">Confirmer</button>

const bouton = document.querySelector('#confirmation');

bouton.addEventListener('click', () => { bouton.textContent = 'Confirmé'; });

Écoutez l’événement click plutôt qu’un événement réservé à la souris : un bouton natif activé au clavier déclenche également ce comportement. Pour une action réelle, remplacez le changement de texte par la fonction souhaitée et prévoyez un retour clair en cas d’échec.

Un clic peut se propager comme une onde vers les éléments parents : c’est la propagation des événements. Si un bouton est placé dans une carte elle-même cliquable, les deux gestionnaires peuvent réagir. Avant d’ajouter stopPropagation(), vérifiez la structure : séparer les zones d’action est souvent plus compréhensible et évite qu’un clic sur « Supprimer » déclenche aussi l’ouverture de la carte.

Pour naviguer, conserver un vrai lien

Si l’objectif est d’ouvrir une page, utilisez un lien avec href, puis appliquez-lui une classe CSS. Vous conservez ainsi l’ouverture dans un nouvel onglet et la copie de l’adresse. Une redirection JavaScript via window.location.assign(...) reste possible après une opération, mais elle n’est pas nécessaire pour une simple navigation. N’imbriquez jamais un lien dans un bouton, ni l’inverse.

Personnaliser l’apparence sans perdre l’accessibilité

Ajoutez une classe au bouton : <button type="button" class="bouton">Enregistrer</button>. Placez ensuite ces règles dans votre feuille CSS. Dans WordPress, utilisez l’emplacement CSS prévu par votre thème ou votre configuration, plutôt que de mélanger les styles au texte de l’article.

.bouton { background: #174ea6; color: #fff; border: 2px solid transparent; border-radius: 0.5rem; padding: 0.75rem 1.25rem; font: inherit; cursor: pointer; }

.bouton:hover { background: #103b80; }

.bouton:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

.bouton:disabled { opacity: 0.6; cursor: not-allowed; }

Le survol apporte un retour visuel à la souris ; le contour de focus indique la position au clavier. Ne supprimez pas ce repère sans remplacement visible. Évitez aussi une hauteur fixe qui couperait le libellé lorsque le texte est agrandi.

Préférez « Enregistrer les modifications » à « OK ». Un bouton portant un texte explicite n’a généralement pas besoin d’aria-label. Pour un bouton composé uniquement d’une icône, fournissez en revanche un nom accessible décrivant l’action. Un bouton natif n’a besoin ni de role="button" ni d’un tabindex positif.

Enfin, disabled empêche l’activation et retire normalement le bouton du parcours clavier. Si une opération est en cours, accompagnez cet état d’un message perceptible, pas seulement d’une couleur atténuée. Testez le résultat avec Tab, Entrée et Espace, puis sur un écran étroit : le bouton doit rester repérable, lisible et facile à activer.