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 enoff
(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'atributautocomplete
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'atributtype
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 inicialsbutton
: 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
Especificaci贸 | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of '<button>' in that specification. |
Living Standard | |
HTML5 The definition of '<button>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<button>' in that specification. |
Recommendation |
Navegadors compatibles
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.
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 |
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>
.