Tag HTML <button>
Le tag<button> est utilisé pour créer des boutons interactifs sur la page Web. Contrairement au tag unique <input> (avec l'attribut type = "button"), avec laquelle vous pouvez également créer des boutons, le contenu du tag <button> peut être un texte, bien qu'une image.
Si vous voulez créer un bouton en forme HTML, utilisez l’élément <input>, car des navigateurs affichent différemment le contenu du tag <button>.
Syntaxe
Le contenu du texte est écrit entre le tag ouvrant <button> et le tag fermant </button>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Ici, vous allez trouver notre bouton</h1>
<button type="button">Cliquez</button>
</body>
</html>Résultat
L’utilisation des styles CSS
Vous pouvez appliquer des styles CSS au tag <button> pour modifier l'apparence du bouton, sa taille, sa couleur, sa police de texte, etc.Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
Bouton simple
<button type="button">Ajouter à carte</button>
<hr />
Bouton avec un texte rouge
<button type="button" style="color: red;"><strong>Apprenez HTML</strong></button>
<hr />
Bouton avec la taille différente
<button type="button" style="font: bold 14px Arial;">Texte du style différent</button><br />
</body>
</html>Résultat
Attributs
Le tag <button> n’a pas d’attributs obligatoires, mais nous vous recommandons de toujours utiliser l’attribut type=”button”, si le tag est utilisé comme un bouton ordinaire.
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Indique au navigateur que le bouton doit recevoir le focus après le chargement de la page. |
| disabled | disabled | Désactive le bouton. (Il est utilisé, quand le bouton doit devenir actif après la réalisation de quelque action.) |
| form | form_id | Indique la forme du bouton. Si le bouton appartient à plusieurs formes, alors identifiants (form_id) doivent être séparé par des espaces. |
| formaction | URL | Indique l’adresse, où les formes données seront envoyées en cliquant sur le bouton. (Il est utilisé uniquement pour les boutons avec l’attribut type="submit"). |
| formenctype | application/x-www-form- urlencoded multipart/form-data text/plain |
Définit comment encoder les données avant de les envoyer au serveur. (Utilisé uniquement pour les boutons avec l'attribut type = "submit"). Tous les symboles sont encodés avantl'envoi (valeur par défaut). Les symboles ne sont pas codés, les espaces sont remplacés par un signe "+", mais symboles ne sont pas codés. |
| formmethod | Spécifie la méthode de requête HTTP, qui sera utilisée lors de l'envoi des données de formulaire. (Utilisé uniquement pour les boutons avec l'attribut type = "submit") | |
| get | Transmet les données de formulaire dans la barre d'adresse ("nom = valeur"), qui sont ajoutées à l'URL de la page après le point d'interrogation et sont séparées par une esperluette (&). (Http://example.ru/doc/?name=Ivan&password=vanya) | |
| post | Le navigateur communique avec le serveur et envoie les données pour traitement. | |
| formnovalidate | formnovalidate | Annule la validation des données de formulaire pour qu'elles soient correctes. (Utilisé uniquement pour les boutons avec l'attribut type = "submit"). |
| formtarget | Indique qu'il faut afficher la réponse après avoir soumis le formulaire. (Utilisé uniquement pour les boutons avec l'attribut type = "submit"). | |
| _blank | Ouvre la réponse dans la nouvelle fenêtre. | |
| _self | Ouvre la réponse dans la fenêtre courante. | |
| _parent | Ouvre la réponse dans le cadre parental. | |
| _top | Ouvre la réponse en pleine largeur de la fenêtre. | |
| name | name | Spécifie le nom du bouton. |
| type | Spécifie le type du bouton. | |
| button | bouton ordinare. | |
| reset | bouton qui efface le formulaire des données d'entrée | |
| submit | bouton d'envoi de données de formulaire | |
| value | text | Définit la valeur du bouton. |
Le tag <button> supporte également les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <button> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <button>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <button>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <button>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <button>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
Qu'est-ce qui est vrai au sujet de la balise HTML <button>?
Correcte!
Incorrecte!