<button>

Sumari

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

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

Navegadors compatibles

[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.

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>.