<button>

La balise <button> est utilisée en HTML pour créer des boutons interactifs.

Ces boutons peuvent être cliqués pour exécuter diverses actions, comme soumettre un formulaire, déclencher des scripts JavaScript ou effectuer des modifications sur l'interface.

Structure et syntaxe de la balise <button>

Voici la structure de base de la balise <button> :

<button>Texte ou contenu du bouton</button>

Vous pouvez y ajouter tout ce que vous voulez ! Que ce soit des icônes, des textes en gras, en italique... Laissez votre imagination vagabonder ! 😉

Attributs

La balise <button> supporte plusieurs attributs pour personnaliser son comportement et son style :

• type : Définit le comportement du bouton. Vous pouvez mettre une de ces valeurs :
  • button : Un bouton générique sans comportement par défaut ;
  • submit : Soumet le formulaire ;
  • reset : Réinitialise les champs du formulaire.
• disabled : Désactive le bouton, empêchant toute interaction avec celui-ci.
• name et value : Utilisés pour transmettre des données supplémentaires lorsque le formulaire est soumis. On les utilise toutefois beaucoup plus avec une balise <input>.
• autofocus : Met automatiquement le focus sur le bouton lorsque la page est chargée.

Exemple d’utilisation

Voici un exemple de boutons avec différents comportements.

Utiliser un bouton pour envoyer des données

<form>
    <input type="text" name="firstName" placeholder="Votre prénom !" />
    <button type="submit">Soumettre</button>
</form>

Dans cet exemple, notre formation sera envoyé au clic du bouton. Testez donc ce code par vous-même :

Utiliser un bouton pour réinitialiser des données

<form>
    <input type="text" name="firstName" placeholder="Votre prénom !" />
    <button type="reset">Réinitialiser</button>
</form>

Ici, notre bouton va réinitialiser les champs de notre formulaire.

Essayez :

Utiliser un bouton pour executer du JavaScript

<button type="button" onclick="alert('Bonjour !')">Cliquez-moi</button>

Dans cet exemple le bouton "Cliquez-moi" affiche une alerte lorsqu'il est cliqué grâce à l'attribut onclick. N'importe quel code JavaScript peut être utilisé à l'intérieur de cette attribut.

Différence avec la balise <input>

La balise <button> est souvent comparée à la balise <input> avec l’attribut type="button".

Cependant, ces deux balises sont très différentes :

• <button> peut contenir du contenu riche comme du texte, des icônes ou des images, tandis que <input> ne peut contenir que du texte ;
• La balise <button> offre plus de flexibilité en termes de personnalisation avec CSS.

Donc privilégiez cette dernière ! 😬

Compatibilité des navigateurs

La balise <button> est prise en charge par tous les navigateurs modernes :