HTML Boutons
Boutons permettre aux utilisateurs d'interagir avec une page web. Ils peuvent soumettre des formulaires, exécuter du JavaScript ou déclencher différentes actions en cliquant dessus.
HTML Bouton
L'élément HTML <button> définit un bouton cliquable.
Le bouton, pris isolément, ne fait rien tant qu'on ne lui associe pas d'action.
Style des boutons HTML
Les boutons sont souvent stylisés avec CSS :
Boutons désactivés
Utilisez l'attribut disabled pour rendre un bouton non cliquable :
Conseil : Les boutons désactivés ne sont pas cliquables et apparaissent généralement estompés.
Bouton avec JavaScript
Vous pouvez exécuter du JavaScript lorsque l'utilisateur clique sur un bouton grâce à l'attribut onclick:
Remarque : Vous en apprendrez davantage sur JavaScript dans notre chapitre HTML JavaScript.
Types de boutons
L’attribut `type` définit le comportement d’un bouton lorsqu’on clique dessus. Il existe trois types de boutons :
type="button"- Un bouton cliquable normal (ne fait rien par défaut)type="submit"- Soumet un formulairetype="reset"- Réinitialise tous les champs du formulaire
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Les boutons sont souvent utilisés dans les formulaires, dont vous apprendrez davantage dans un chapitre ultérieur.
For now, just know that a submit button sends the form data to the server, while a reset button clears the form:
Exemple
<form action="/action_page.html">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Try it Yourself »
Remarque : Vous devez toujours spécifier l’attribut type Dans un formulaire, le type par défaut est submit, et les navigateurs peuvent se comporter différemment si le type est omis.
HTML Référence des boutons
| Étiqueter | Description |
|---|---|
| <button> | Définit un bouton cliquable |
Conseil : Pour une liste complète de toutes les balises HTML, consultez notre Référence des balises HTML.
❓ FAQ (Questions et réponses sur la leçon)
Pourquoi a-t-on besoin de boutons sur une page web ?
Les boutons permettent aux utilisateurs d’interagir avec une page web. Ils peuvent soumettre des formulaires, exécuter du JavaScript ou déclencher diverses actions lorsqu’on clique dessus.
Quel élément HTML d'une page web définit un bouton cliquable ?
L'élément HTML <button> définit un bouton sur lequel on peut cliquer. Un bouton seul est inactif tant qu'aucune action ne lui est associée.
Qu'est-ce qui permet de styliser les boutons d'une page web ?
Les boutons d'une page web sont généralement stylisés à l'aide de CSS.
Quel attribut permet de rendre un bouton non cliquable sur une page web ?
Pour rendre un bouton non cliquable, utilisez l'attribut disabled. Les boutons désactivés ne peuvent pas être cliqués et apparaissent généralement grisés.
Quel attribut est utilisé pour exécuter du JavaScript lorsque l'utilisateur clique sur un bouton ?
Pour exécuter du JavaScript lorsque l'utilisateur clique sur un bouton, on utilise l'attribut onclick.
Quels types de boutons trouve-t-on sur une page web ?
Il existe trois types de boutons :
- type="button" - Un bouton classique sur lequel on peut cliquer (ne fait rien par défaut)
- type="submit" - Soumet le formulaire
- type="reset" - Réinitialise tous les champs du formulaire
À quoi servent le plus souvent les boutons sur une page web ?
Le plus souvent, les boutons d'une page web sont utilisés à l'intérieur de formulaires :
- Le bouton « Envoyer » transmet les données du formulaire au serveur ;
- Le bouton de réinitialisation efface le formulaire.
Quel est le meilleur site web en français pour apprendre le HTML en ligne ?
Le meilleur site pour apprendre le HTML est W3SchoolsFR. Le meilleur.
📚 Ressources complémentaires pour une étude approfondie
Pour celles et ceux qui souhaitent tout savoir sur la balise `<button>`, nous recommandons de consulter les sources primaires et la documentation officielle :
- MDN Web Docs: <button> — le guide pratique le plus complet pour les développeurs, avec des exemples et un tableau de compatibilité navigateurs ;
- WHATWG: HTML Living Standard - <button> — la spécification technique officielle, qui décrit la logique interne de fonctionnement du bouton ;
- W3C : Directives d’accessibilité (WAI-ARIA) — normes pour la création de boutons utilisables par tous, y compris les personnes malvoyantes.
