HTML Boutons

Les boutons permettent aux utilisateurs d'interagir avec une page web. Ils peuvent soumettre des formulaires, exécuter du JavaScript ou déclencher différentes actions lorsqu'ils sont cliqués.

Bouton HTML

L'élément HTML <button> définit un bouton cliquable.

Par lui-même, le bouton ne fait rien tant qu'une action n'est pas ajoutée.

Exemple

<button>Cliquez Moi</button>
Essayez-le Vous-Même »

Styliser les Boutons HTML

Les boutons sont souvent stylisés avec CSS :

Exemple

<button class="mytestbtn">Bouton Vert</button>
Essayez-le Vous-Même »

Boutons Désactivés

Utilisez l'attribut disabled pour rendre un bouton non cliquable :

Exemple

<button disabled>Bouton Désactivé</button>
Essayez-le Vous-Même »

Astuce : Les boutons désactivés ne peuvent pas être cliqués et apparaissent généralement en gris.

Bouton avec JavaScript

Vous pouvez exécuter du JavaScript lorsque l'utilisateur clique sur un bouton en utilisant l'attribut onclick :

Exemple

<button onclick="alert('Bonjour!')">Cliquez Moi</button>
Essayez-le Vous-Même »

Remarque : Vous en apprendrez plus sur JavaScript dans notre chapitre JavaScript HTML .

Types de Boutons

L'attribut type définit ce qu'un bouton fait lorsqu'il est cliqué. Il existe trois types de boutons :

  • type="button" - Un bouton cliquable normal (ne fait rien par défaut)
  • type="submit" - Soumet un formulaire
  • type="reset" - Réinitialise tous les champs du formulaire
<button type="button">Bouton Normal</button>
<button type="submit">Soumettre</button>
<button type="reset">Réinitialiser</button>

Les boutons sont souvent utilisés à l'intérieur des formulaires , dont vous apprendrez davantage dans un chapitre ultérieur.

Pour l'instant, sachez simplement qu'un bouton submit envoie les données du formulaire au serveur, tandis qu'un bouton reset efface le formulaire :

Exemple

<form action="/action_page.php">
Prénom : <input type="text" name="fname">
<button type="submit">Soumettre</button>
<button type="reset">Réinitialiser le Formulaire</button>
</form>
Essayez-le Vous-Même »

Remarque : Vous devez toujours spécifier l'attribut type . À l'intérieur d'un formulaire, le type par défaut est submit , et les navigateurs peuvent se comporter différemment si le type est omis.

Référence du Bouton HTML

Tag Description
<button> Définit un bouton cliquable

Astuce : Pour une liste complète de tous les tags HTML, visitez notre Référence des Tags HTML .