Les boutons sont un élément essentiel de tout site Web ou application en ligne, car ils permettent aux visiteurs d'interagir avec la page et d'exécuter diverses tâches. L'élément button> en HTML peut être utilisé pour construire des boutons. Dans ce didacticiel, nous allons passer en revue les principes fondamentaux de la construction de boutons HTML et examiner plusieurs méthodes pour les personnaliser et les décorer.
L'élément de bouton avec une étiquette est le moyen de base le plus simple pour construire un bouton en HTML. Par exemple, le code ci-dessous génère un bouton qui lit "Cliquez-moi!"
<button>Click Me!</button>
Ce bouton apparaîtra dans le navigateur comme un bouton conventionnel et, lorsqu'il sera cliqué, il effectuera l'action par défaut, qui consiste généralement à soumettre un formulaire.
Pour modifier l'étiquette du bouton, utilisez la propriété value ou placez du contenu textuel dans l'élément button. Par exemple:
<button value="Submit">Submit</button>
<button>Submit</button>
Vous pouvez également utiliser la type
attribut pour spécifier le type de bouton. Les type
L'attribut peut avoir les valeurs suivantes :
submit
: envoie le formulairereset
: réinitialise le formulairebutton
: effectue une action JavaScript lorsqu'il est cliqué
Par exemple :
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello, World!')">Say Hello</button>
Dans le dernier exemple, le bouton est de type 'bouton', et lorsqu'il est cliqué, il lance un code JavaScript qui affiche un message d'alerte "Hello, World!". Vous pouvez également utiliser CSS pour personnaliser vos boutons en utilisant les propriétés 'id' et 'class'. Par exemple, vous pouvez utiliser CSS pour appliquer un style de bouton personnalisé à tous les boutons de cette classe en utilisant le 'classe' biens.
Vous pouvez également utiliser la propriété 'disabled' pour empêcher un clic sur un bouton. Par exemple:
<button disabled>Disabled</button>
Pour en savoir plus sur les boutons en HTML, nous vous recommandons de regarder cette vidéo YouTube.