Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

Tags base

Page HTML

Tags sémantiques

Tags navigation

Tags mise en page

Tags multimédia

Tags interaction

Tags grouper

Tags tableau

Tags formulaire

Tags universelles

Attributs globaux

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Balise BUTTON

Rôle

La balise <button> définit un bouton cliquable, contrairement au bouton créé avec la balise input, cette balise peut contenir du contenu (texte et image).

Testez vous-même cette balise

Utilisez Codepen.

Voici le resultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

La balise <button> est pris en charge dans tous les principaux navigateurs

Attributs spécifiques

Attributs spécifiques à cet élément

autofocus
Donne le focus à l’élément au chargement de la page, il est donc immédiatement utilisable (attention, pris en charge à partir de IE-10 et Opéra 13)
Syntaxe :
<button type="button" autofocus>Cliquez ici</button>
disabled
Permet de vérouiller l’élément, il n’est donc plus utilisable
Syntaxe :
<button type="button" disabled>Cliquez ici</button>
form
Spécifie l’idendifiant (attribut ID) du formulaire auquel l’élément appartient. Cet attribut permet à un élément d’être utilisé à l’extérieur à la balise <form> (attention, pas pris en charge par Internet Explorer)
Syntaxe :
<button type="button" form="form1" >Cliquez ici</button>
formaction
S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut action de la baliseform (attention, pris en charge à partir de IE-10)
Syntaxe :
<button type="submit" formaction="form.php" >Envoyer</button>
formenctype
S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut enctype de la baliseform (attention, pris en charge à partir de IE-10 et Safari 6).
Syntaxe :
<button type="submit" formenctype="text/plain" >Envoyer</button>
formenmethod
S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut method de la baliseform (attention, pris en charge à partir de IE-10).
Syntaxe :
<button type="submit" formmethod="post" >Envoyer</button>
formnovalidate
S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut novalidate de la balise form (attention, pris en charge à partir de IE-10 et pas pris en charge par Safari).
Syntaxe :
<button type="submit" formnovalidate >Envoyer</button>
formtarget
S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut target de la baliseform (attention, pris en charge à partir de IE-10).
Syntaxe :
<button type="submit" formtarget="_blank" >Envoyer</button>
name
Spécifie le nom du bouton
type
Spécifie que le rôle du bouton (initialiser les données, envoyer les données, lancer un script).
Syntaxe :
<button type="submit" >Envoyer</button>
Valeurs possible :

  • type=’button’ : bouton cliquable pour lancer un script
  • type=’reset’ : bouton pour réinitialiser les valeurs de départ
  • target=’submit’ : bouton pour soumettre les données
value
Spécifie la valeur initiale du bouton. Cette information pourra être exploitée par PHP.
Syntaxe :
<form action="form.php" method="get" value="envoi" >

La balise <button> prend aussi en charge les attributs globaux

Attibuts de type événement

La balise <button> prend en charge les événements de type formulaire. La balise <button> prend aussi en charge les événements souris

Voir les autres balises pour l’intégration d’un formulaire

button– datalist– fieldset– form– input– keygen– label– legend– meter– optgroup– option– outputprogressselect– textarea

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
tutowebdesign

Créer un menu latéral animé

Créer un menu latéral animé Idéal pour les formats mobiles, voici un menu latéral animé facile à faire dont l’ouverture est déclenchée par Javascript. Commençons

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.