Docs HTML exécutables : Bouton HTML

Q: Comment faire un bouton en HTML ?

Écrivez Click me . Le texte entre les balises est le libellé. Ajoutez un écouteur click en JavaScript pour qu'il fasse quelque chose, ou placez-le dans un avec type="submit" pour envoyer le formulaire.

Q: Quel est le type par défaut d'un bouton HTML ?

submit. Un sans attribut type placé dans un formulaire envoie ce formulaire au clic, c'est pourquoi un simple bouton dans un formulaire peut recharger la page. Écrivez type="button" pour tout bouton qui exécute plutôt du JavaScript.

Q: Quelle est la différence entre button et input type=submit ?

Les deux envoient un formulaire. peut contenir du HTML (une icône, du texte en gras) entre ses balises, alors que prend son libellé dans l'attribut value et ne peut contenir que du texte simple. La plupart du code moderne utilise .

Q: Comment désactiver un bouton en HTML ?

Ajoutez l'attribut disabled : Save . Un bouton désactivé ne peut être ni cliqué ni focalisé, et son nom et sa valeur ne sont pas envoyés avec le formulaire. Retirez l'attribut (btn.disabled = false en JavaScript) pour le réactiver.

Q: Comment faire un bouton HTML qui mène à une autre page ?

Utilisez un lien stylisé comme un bouton : See pricing . Un sert aux actions sur la page actuelle. Entourer un bouton d'un est du HTML invalide.

Q: Pourquoi mon bouton recharge la page ?

Il est dans un et n'a pas de type, c'est donc un bouton d'envoi : le navigateur envoie le formulaire et charge la réponse. Ajoutez-lui type="button", ou appelez event.preventDefault() dans un écouteur submit si vous gérez le formulaire en JavaScript.

Comment faire un bouton en HTML

Un bouton est l'élément <button>. Le contenu entre les balises est ce que voit l'utilisateur, et type="button" indique qu'il exécute votre script au lieu d'envoyer un formulaire. Cliquez dessus dans l'aperçu :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

C'est tout ce qu'il faut à un bouton fonctionnel : un libellé, un type et quelque chose qui écoute click. Le navigateur le rend focalisable au clavier et l'active avec Entrée ou Espace, donc les utilisateurs au clavier en profitent sans effort. Une <div> avec un gestionnaire de clic n'a rien de tout cela.

Vous verrez aussi onclick="..." écrit directement dans la balise. Cela marche, mais addEventListener garde le script hors du balisage et permet à plusieurs écouteurs de partager un bouton.

Les trois types de bouton

L'attribut type décide de ce que fait un bouton quand on appuie dessus.

`type`	Ce qu'il fait	À utiliser pour
`submit`	Envoie le formulaire auquel il appartient. C'est la valeur par défaut.	L'action principale d'un formulaire
`button`	Rien par lui-même ; votre JavaScript décide	Bascules, boîtes de dialogue, compteurs, tout ce qui est scripté
`reset`	Remet chaque champ du formulaire à sa valeur initiale	Rarement ; les utilisateurs appuient dessus par erreur

Tapez quelque chose, puis essayez chaque bouton. L'aperçu ne quitte pas la page quand le formulaire est envoyé ; il affiche les données que le formulaire aurait envoyées.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset rétablit la valeur écrite dans le HTML (Ada), pas un champ vide. Et si vous supprimez type="button" de Uppercase, il devient un bouton d'envoi : il met le nom en majuscules puis envoie le formulaire.

Bouton submit en HTML : envoyer un name et une value

Un bouton d'envoi peut porter son propre name et sa propre value. Ils ne sont envoyés avec le formulaire que si c'est ce bouton qui l'a envoyé, donc deux boutons peuvent partager un formulaire et indiquer au serveur quelle action a été choisie :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Appuyez sur Publish et le formulaire envoie title=My first post et action=publish. Videz le titre et appuyez sur l'un ou l'autre bouton : required bloque l'envoi et le navigateur affiche son propre message. Appuyer sur Entrée dans le champ de texte envoie aussi le formulaire, et le navigateur le traite comme un appui sur le premier bouton d'envoi, donc il envoie action=draft.

Les boutons d'envoi acceptent aussi des attributs qui remplacent ceux du formulaire pour ce seul bouton : formaction (une autre URL), formmethod, formtarget et formnovalidate, qui saute la validation. formnovalidate est le choix habituel pour un bouton « Enregistrer le brouillon » qui doit fonctionner tant que des champs obligatoires sont encore vides.

Un bouton placé hors de son formulaire peut quand même l'envoyer avec l'attribut form, qui prend l'id du formulaire : <button type="submit" form="signup">Sign up</button>.

Boutons désactivés

L'attribut disabled désactive un bouton. Un bouton désactivé ignore les clics, est sauté par Tab et n'est pas envoyé avec le formulaire. Les navigateurs le grisent aussi. Une pratique courante consiste à garder le bouton d'envoi désactivé tant qu'une condition n'est pas remplie :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

En JavaScript, button.disabled est une propriété booléenne : mettez-la à true ou false. En HTML, c'est la présence de l'attribut qui compte, donc disabled="false" désactive quand même le bouton.

Un bouton désactivé ne dit pas pourquoi il l'est, et les utilisateurs au clavier ou de lecteurs d'écran qui avancent avec Tab ne tombent jamais dessus. Quand la raison n'est pas évidente, indiquez-la dans un texte à côté du bouton, ou laissez le bouton actif et affichez un message d'erreur quand on appuie dessus.

Styliser un bouton en CSS

Les navigateurs dessinent les boutons avec leur propre police, bordure et fond. Définir quelques propriétés remplace tout cela. Gardez un style de focus visible : c'est ainsi que les utilisateurs au clavier voient où ils se trouvent.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

À quoi sert chaque règle :

font: inherit fait utiliser au bouton la police de la page. Sans elle, les boutons utilisent la police de formulaire du navigateur, plus petite (13.33px dans Chrome et Firefox).
cursor: pointer affiche le curseur en forme de main. Les boutons affichent la flèche normale par défaut.
:hover, :active et :focus-visible stylisent les états de survol, d'appui et de focus clavier. :focus-visible affiche l'anneau pour le focus au clavier mais pas après un clic de souris, donc vous n'avez pas à retirer outline pour l'éviter.
:disabled cible les boutons qui ont l'attribut disabled.

Appuyez sur Tab dans l'aperçu pour voir l'anneau de focus ambre passer entre les deux premiers boutons. Le bouton désactivé est sauté. (Sur Mac, Safari et Firefox ne vont sur les boutons avec Tab que si la navigation au clavier est activée dans les réglages du système ; dans Safari, Option+Tab fonctionne sans cela.) Pour la liste complète des états, voir hover en CSS.

Boutons avec icône

Comme <button> peut contenir du HTML, une icône se place à l'intérieur, à côté du texte. Un bouton qui n'a qu'une icône n'a pas de texte à annoncer pour les lecteurs d'écran, alors donnez-lui un aria-label :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" sur le SVG le garde hors de l'arbre d'accessibilité, donc le premier bouton est annoncé « Add item, bouton » et le second « Delete, bouton ».

button ou input type="submit"

<input type="submit"> est l'ancienne façon d'écrire un bouton d'envoi. Les deux envoient le formulaire de la même manière ; la différence est ce qu'ils peuvent contenir.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Libellé	Contenu entre les balises	L'attribut `value`
Peut contenir des icônes ou du balisage	Oui	Non
Balise fermante	Obligatoire	Aucune (élément vide)
Type par défaut	`submit`	Toujours submit

Utilisez <button>. La seule raison de garder <input type="submit"> est du CSS ou du JavaScript existant qui le sélectionne. Il existe aussi <input type="button"> et <input type="reset">, sur le même principe pour les deux autres types.

Bouton ou lien ?

Un bouton fait quelque chose sur la page actuelle : envoyer, ouvrir, basculer, supprimer. Un lien mène à une autre URL. Si le clic change la barre d'adresse, ce doit être un <a href>, stylisé comme un bouton si le design le demande. Ce schéma, et pourquoi un bouton dans un lien est invalide, sont présentés dans bouton lien en HTML.

Accessibilité

Utilisez un vrai <button>. Il est focalisable, fonctionne avec Entrée et Espace et est annoncé comme un bouton. Reconstruire cela sur une <div> demande role, tabindex et des gestionnaires de touches, et reste généralement incomplet.
Chaque bouton a besoin d'un nom : son texte, ou aria-label quand il n'a qu'une icône.
Gardez un style de focus visible. outline: none sans remplacement laisse les utilisateurs au clavier perdus.
Rendez la cible assez grande pour être touchée. WCAG 2.2 demande au moins 24 sur 24 pixels CSS ; un padding comme celui de l'exemple stylisé ci-dessus donne environ 40 pixels de hauteur.
Pour une bascule, ajoutez aria-pressed="true" ou "false" et mettez-le à jour quand l'état change.

Erreurs fréquentes

Un bouton sans type dans un formulaire. Il envoie le formulaire. Écrivez type="button" sur chaque bouton qui n'est pas censé envoyer.
Entourer un bouton d'un lien, <a href="/x"><button>Go</button></a>. C'est du HTML invalide qui se comporte différemment selon les navigateurs. Utilisez un seul élément : un lien stylisé comme un bouton.
Utiliser <div onclick> comme bouton. Il est inaccessible au clavier.
Retirer le contour de focus sans ajouter de style :focus-visible.
Écrire disabled="false" en attendant un bouton actif. Retirez plutôt l'attribut.
Oublier font: inherit et se demander pourquoi les boutons n'utilisent pas la même police que le reste de la page.

Questions fréquentes

Comment faire un bouton en HTML ?

Écrivez <button type="button">Click me</button>. Le texte entre les balises est le libellé. Ajoutez un écouteur click en JavaScript pour qu'il fasse quelque chose, ou placez-le dans un <form> avec type="submit" pour envoyer le formulaire.

Quel est le type par défaut d'un bouton HTML ?

submit. Un <button> sans attribut type placé dans un formulaire envoie ce formulaire au clic, c'est pourquoi un simple bouton dans un formulaire peut recharger la page. Écrivez type="button" pour tout bouton qui exécute plutôt du JavaScript.

Quelle est la différence entre button et input type=submit ?

Les deux envoient un formulaire. <button> peut contenir du HTML (une icône, du texte en gras) entre ses balises, alors que <input type="submit"> prend son libellé dans l'attribut value et ne peut contenir que du texte simple. La plupart du code moderne utilise <button>.

Comment désactiver un bouton en HTML ?

Ajoutez l'attribut disabled : <button disabled>Save</button>. Un bouton désactivé ne peut être ni cliqué ni focalisé, et son nom et sa valeur ne sont pas envoyés avec le formulaire. Retirez l'attribut (btn.disabled = false en JavaScript) pour le réactiver.

Comment faire un bouton HTML qui mène à une autre page ?

Utilisez un lien stylisé comme un bouton : <a href="/pricing" class="btn">See pricing</a>. Un <button> sert aux actions sur la page actuelle. Entourer un bouton d'un <a> est du HTML invalide.

Pourquoi mon bouton recharge la page ?

Il est dans un <form> et n'a pas de type, c'est donc un bouton d'envoi : le navigateur envoie le formulaire et charge la réponse. Ajoutez-lui type="button", ou appelez event.preventDefault() dans un écouteur submit si vous gérez le formulaire en JavaScript.

Concepts liés