<button>

Sumari

L'element HTML <button> representa un bot贸 que es premi.

Categories de contingut Contingut de Flux, phrasing content, Contingut interactiu, enumerat, etiquetables, i enviament formularis associats element, contingut palpable.
Contingut perm猫s Phrasing content.
Omissi贸 de l'etiqueta Cap, tant l'etiqueta inicial com l鈥檈tiqueta final s贸n obligat貌ries 
Elements pares permesos Qualsevol element que accepti phrasing content.
Interf铆cie DOM HTMLButtonElement
Tipus d'element En l铆nia

Atributs

Aquest element inclou els atributs globals.

autofocus HTML5
Aquest atribut boole脿 permet especificar que el bot贸 ha de tenir un focus d'entrada quan es carrega la p脿gina, llevat que l'usuari els redefineixi, per exemple escrivint en un control diferent. Nom茅s un element form-associated a un document pot tenir aquest atribut especificat.
autocomplete
L'煤s d'aquest atribut en un <button> no 茅s est脿ndard i espec铆fic de Firefox. Per defecte, a difer猫ncia d'altres navegadors, Firefox persisteix l'estat din脿mic desactivat d'un <button> a trav茅s de c脿rregues de p脿gina. Establir el valor d'aquest atribut en off (i.e. autocomplete = "off") desactiva aquesta funci贸. Vegeu errada 654072.
disabled

Aquest atribut boole脿 indica que l'usuari no pot interactuar amb el bot贸. Si no s'especifica aquest atribut, el bot贸 hereta la seva configuraci贸 des de l'element que el cont茅, per exemple <fieldset> ; si no hi ha cap element que contingui l'atribut disabled, llavors el bot贸 est脿 activat.

Firefox, a difer猫ncia d'altres navegadors, per defecte, persisteixi l'estat din脿mica desactivat d'un <button> a trav茅s de c脿rregues de p脿gina. Utilitzeu l'atribut autocomplete per a controlar aquesta funci贸.

form HTML5
L'element form que el bot贸 est脿 associat amb (el propietari del formulari). El valor de l'atribut ha de ser l'atribut id d'un element <form> en el mateix document. Si no s'especifica aquest atribut, l'element <button> s'associa a un ancestre element <form>, si 茅s que existeix. Aquest atribut permet associar elements <button> a elements <form> en qualsevol lloc dins d'un document, no nom茅s com descendents dels elements <form>.
formaction HTML5
L'URI d'un programa que processa la informaci贸 presentada pel bot贸. Si s'especifica, s'anul路la l'atribut action del propietari del formulari del bot贸.
formenctype HTML5
Si el bot贸 茅s un bot贸 d'enviament, aquest atribut especifica el tipus de contingut que s'utilitza per enviar el formulari al servidor. Els valors possibles s贸n:
  • application/x-www-form-urlencoded: El valor per defecte si no s'especifica l'atribut.
  • multipart/form-data: Utilitzeu aquest valor si est脿 utilitzant un element <input> amb l'atribut type establert en l'arxiu.
  • text/plain

Si s'especifica aquest atribut, s'anul路la l'atribut enctype del propietari del formulari dels botons.

formmethod HTML5
Si el bot贸 茅s un bot贸 d'enviament, aquest atribut especifica el m猫tode HTTP que el navegador utilitza per enviar el formulari. Els valors possibles s贸n:
  • post: Les dades del formulari s'incloent en el cos del formulari i s'envia al servidor.
  • get: Les dades del formulari s'afegeixen a l'atribut de formulari URI, amb un '?' com a separador, i l'URI resultant s'envia al servidor. Utilitzeu aquest m猫tode quan el formulari no t茅 efectes secundaris i cont茅 nom茅s car脿cters ASCII.

Si s'especifica, aquest atribut reempla莽a l'atribut method del propietari del formulari del bot贸.

formnovalidate HTML5
Si el bot贸 茅s un bot贸 d'enviament, aquest atribut boole脿 especifica que el formulari no ha de ser validat quan es presenti. Si s'especifica aquest atribut, s'anul路la l'atribut novalidate del propietari del formulari del bot贸.
formtarget HTML5
Si el bot贸 茅s un bot贸 d'enviament, aquest atribut 茅s un nom o una paraula clau que indica on s'ha de mostrar la resposta que es rep despr茅s d'enviar el formulari. Es tracta d'un nom de, o una paraula clau per a un context de navegaci贸 (per exemple, pestanya, finestra o marc en l铆nia). Si s'especifica aquest atribut, reempla莽a l'atribut de destinaci贸 del propietari del formulari del bot贸. Les seg眉ents paraules clau tenen un significat especial:
  • _self: C脿rrega la resposta en el mateix context de navegaci贸 com l'actual. Aquest valor 茅s el valor per defecte si no s'especifica l'atribut.
  • _blank: C脿rrega la resposta en un nou context de navegaci贸 sense nom.
  • _parent: C脿rrega la resposta en el context de navegaci贸 dels pares de l'actual. Si no hi ha pare, aquesta opci贸 es comporta de la mateixa manera que _self.
  • _top: C脿rrega la resposta en el context de navegaci贸 de nivell superior (茅s a dir, el context de navegaci贸 que 茅s un ancestre de l'actual, i no t茅 pare). Si no hi ha pare, aquesta opci贸 es comporta de la mateixa manera que _self.
name
El nom del bot贸, que es presenta amb les dades del formulari.
type
Tipus de bot贸. Els valors possibles s贸n:
  • submit: El bot贸 envia les dades del formulari al servidor. Aquest 茅s el valor per defecte si no s'especifica l'atribut, o si l'atribut es canviat din脿micament a un valor buit o no v脿lid.
  • reset: Rstableix tots els controls als seus valors inicials
  • button: El bot贸 no t茅 cap comportament predeterminat. Pot tenir seq眉猫ncies d'ordres del costat del client, relacionats amb els events de l'element, que s'activen quan es produeixen els events.
  • menu: El bot贸 obre un men煤 emergent definit pel seu element <menu> designat.
value
El valor inicial del bot贸. Defineix el valor associat amb el bot贸 que es presenta amb les dades del formulari. Aquest valor es passa al servidor en params quan s'envia el formulari.

Exemple

<button name="button">Click me</button>

Recordeu que aquest bot贸 s'ha aplicat CSS.

Especificacions

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Caracter铆stica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport b脿sic 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
atribut formaction 9.0 4.0 (2.0) 10 ? ?
atribut formenctype 9.0 4.0 (2.0) 10 10.6 ?
atribut formmethod 9.0 4.0 (2.0) 10 ? ?
atribut autofocus 5.0 4.0 (2.0) 10 9.6 5.0
atribut menu value for type No support No support[1] No support No support ?
Caracter铆stica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport b脿sic (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
atribut formaction ? 4.0 (2.0) ? ? ?
atribut formenctype ? 4.0 (2.0) ? ? ?
atribut formmethod ? 4.0 (2.0) ? ? ?
atribut menu value for type ? ? ? ? ?

[1] Gecko no implementa aquesta funci贸 fins el moment. Veure errada 1241353.

En fer clic i enfocament

Si fem clic a un <button> fa que (per defecte) aquest es converteixi en el focus i var茂i segons el navegador i sistema operatiu. Els resultats de <input> de type="button" i type="submit" son els mateixos.

Fer clic en un <button> donar-li el focus?
Desktop Browsers Windows 8.1 OS X 10.9
Firefox 30.0 Yes No (even with a tabindex)
Chrome 35 Yes Yes
Safari 7.0.5 N/A No (even with a tabindex)
Internet Explorer 11 Yes N/A
Presto (Opera 12) Yes Yes
Fer un toc en un <button> donar-li el focus?
Navagadors M貌vils iOS 7.1.2 Android 4.4.4
Safari Mobile No (even with a tabindex) N/A
Chrome 35 No (even with a tabindex) Yes

Notes

Els elements <button> s贸n molt m茅s f脿cil de donar estil que els elements <input>. Podeu afegir contingut HTML intern (com <em>, <strong> o fins i tot <img>), i fer 煤s dels pseudo-elements  :after i :before  per aconseguir la generaci贸 d'elements complexos, mentre que <input> nom茅s accepta un atribut de valor de text.

Internet Explorer 7 t茅 un error pel qual l'enviar un formulari amb <button type="submit" name="myButton" value="foo">Click me</button>, les dades POST enviats donar脿 com  a  resultat myButton=Click me en lloc de myButton=foo. IE6 t茅 un error encara pitjor quan s'envia un formulari a trav茅s d'un bot贸, presentar脿 tots els botons del formulari, amb el mateix error com IE7.Aquest error s'ha corregit en IE8.

Firefox afegir脿, amb fins d'accessibilitat, una petita vora de punts en un bot贸 que t茅 el focus. Aquesta frontera es declara a trav茅s de CSS, en el full d'estil del navegador, per貌 pot substituir-lo en cas necessari, afegin el seu propi estil en el bot贸 enfocat ::-moz-focus-inner { }.

Firefox, a difer猫ncia d'altres navegadors, per defecte, persisteixi l'estat desactivat din脿mica d'un <button> a trav茅s de c脿rregues de p脿gina. En establir el valor de l'atribut autocomplete en off desactiva aquesta funci贸. Vegeu errada 654072.

Firefox <35 per Android estableix per defecte un gradient background-image en tots els botons (veure errada 763671). Aix貌 es pot desactivar usant background-image: none.

Veure

Altres elements que s'utilitzen per a la creaci贸 de formularis : <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.