La balise <button> permet de créer un bouton cliquable dans le formulaire HTML de votre page Web. Vous pouvez insérer du contenu tel que du texte ou une image dans la balise <button> …….. </ button>.
Vous devez toujours spécifier l’attribut type pour une balise <button>. Différents navigateurs utilisent un type par défaut différent pour l’élément button.
La balise HTML Button peut être utilisée à l’intérieur et à l’extérieur du formulaire.
Si vous l’utilisez dans le formulaire, cela fonctionne comme le bouton d’envoi. Vous pouvez également l’utiliser comme bouton de réinitialisation.
Si vous l’utilisez en dehors du formulaire, vous pouvez appeler une fonction JavaScript dessus.
Exemple HTML de balise de button
Voyons le code pour afficher un bouton.
<button name="button" type="button">Cliquez Ici</button>
Résultat :
Exemple de bouton HTML: appel de la fonction JavaScript
Voyons le code pour appeler une fonction JavaScript en cliquant sur un bouton.
<button name="button" value="OK" type="button" onclick="bjr()">Cliquez ici</button>
<script>
function bjr(){
alert("Bonjour w3tutoriels");
}
</script>
Résultat :
Exemple de bouton HTML: Soumettre un formulaire
Voyons le code pour soumettre un formulaire en cliquant sur le bouton.
<form> Enter Name:<input type="text" name="name"/><br/> <button>Submit</button> </form>
Exemple de bouton HTML: Réinitialiser un formulaire
Voyons le code pour soumettre le formulaire en cliquant sur le bouton.
<form> Entez le nom:<input type="text" name="name"/><br/> <button type="reset">reset</button> </form>
Résultat :
Les attributs HTML de balise button
La balise <button> prend en charge tous les attributs globaux et certains attributs supplémentaires spécifiques.
Il est donné une liste d’attributs de balise de bouton HTML.
| Attribut | La description |
|---|---|
| autofocus | Il spécifie qu’un bouton doit automatiquement avoir le focus lors du chargement de la page. |
| disabled | Il spécifie qu’un bouton doit être désactivé. |
| form | Il spécifie un ou plusieurs formulaires auxquels le bouton appartient. |
| formaction | Il est utilisé pour le type de soumission. Il spécifie où envoyer les données du formulaire lorsque le formulaire est soumis. |
| formmethod | Il spécifie comment envoyer les données de formulaire. |
| formenctype | Il spécifie comment les données de formulaire doivent être codées avant de les envoyer au serveur. |
| formnovalidate | Il spécifie que les données du formulaire ne doivent pas être validées lors de la soumission. |
| formtarget | Il spécifie où afficher la réponse après la soumission du formulaire. |
| name | Il spécifie le nom du bouton. |
| type | Il spécifie le type du bouton. |
| value | Il spécifie la valeur du bouton. |