Este artigo necessita de uma revisão editorial. Como posso ajudar.
Sumário
O Elemento HTML <button>
representa um botão clicável.
- Categorias de conteúdo Conteúdo fuido, conteúdo fraseado, Conteúdo iterativo, listado, rotulável, e elemento enviável associado a formulário, conteúdo palpável.
- Conteúdo permitido Conteúdo fraseado.
- Omissão de Tag None, both the starting and ending tag are mandatory.
- Elementos pai permitidos Qualquer elemento que aceite conteúdo fraseado.
- Interface DOM
HTMLButtonElement
- Tipo de elemento Inline
Atributos
Esse elemento inclui os atributos globais.
autofocus
HTML5- Esse atributo booleano permite-o especificar que o botão possuirá o foco de entrada assim que a página carrega, a menos que o usuário sobrecreva esse comportamento digitanto um controle diferente. Apenas um elemento de um documento associado a um formulário pode ter esse atributo específico.
autocomplete
- O uso desse atributo em um
<button>
não está padronizado nem dentro das especificações do Firefox. Por padrão, diferente de outros navegadores, o Firefox persiste com o estado dinâmico desativado de um<button>
nas páginas carregadas. Definir o valor desse atributo paraoff
(ex:autocomplete="off"
) desabilita esse recurso. Veja bug 654072. disabled
-
Esse atributo booleano indica que o usuário não poderá interagir com o botão. Se esse atributo não for especificado, o botão herdará a configuração do elemento que o contém, por exemplo
<fieldset>
, se não existir nenhum elemento com o atributo disabled definido, então o botão estará habilitado.Firefox irá, diferente de outros navegadores, por padrão, persiste com o estado dinâmico desativado de um
<button>
sob as páginas carregadas. Use o atributoautocomplete
para controlar esse recurso. form
HTML5- O elemento de formulário que o botão está associado (é o formulário proprietário). O valor do atributo deve ser o atributo id de um elemento
<form>
no mesmo documento. Se esse atributo não for especificado, o elemento<button>
deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos<button>
em qualquer lugar do documento, não apenas como descendente de seus elementos<form>
. formaction
HTML5- A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo
action
do formulário proprietário do botão. formenctype
HTML5- Se o botão é um botão de envio, esse atributo especifica o tipo de conteúdo que é usado para enviar o formulário para o servidor; Possíveis valores são:
application/x-www-form-urlencoded
: O valor padrão se o atributo não está especificado.multipart/form-data
: Use esse valor se você está usando um elemento<input>
com o atributotype
definido para oarquivo
.text/plain
Se esse atributo fro especificado, ele sobrescreve o atributo
enctype
do formulário proprietário do botão. formmethod
HTML5- Se o botão for um botão de envio, esse atributo especifica o método HTTP que o navegador usará para enviar o formulário. Possíveis valores são:
post
: Os dados obtidos do formulário são incluídos em seu corpo e enviados para o servidor.get
: Os dados obtidos do formulário são anexados aos atributos URI do formulário, com uma '?' como separador, e o resultado URI é enviado para o servidor. Use esse método quando o formulário não possui efeitos colaterais e contém apenas caracteres ASCII.
Se especificado, esse atributo sobrescreve o atributo
method
do formulário proprietário do botão. formnovalidate
HTML5- Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo
novalidate
do formulário proprietário do botão. formtarget
HTML5- Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um contexto de navegação (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo
target
do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais:_self
: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado._blank
: Carrega a resposta em um contexto de navegação sem nome._parent
: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que_self
._top
: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que_self
.
name
- O nome do botão que é enviado com os dados do formulário.
type
- O tipo de botão. O possíveis valores são:
submit
: O botão envia os dados do formulário para o servidor. Esse é o padrão se o atributo não for especifidado, ou se o atributo é dinamicamente mudado para um valor vazio ou inválido.reset
: O botão restaura todos os controles para seus valores iniciais.button
: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.
value
- O valor inicial do botão.
Exemplo
<button name="button">Click me</button>
Note que esse botão possui CSS aplicado.
Especificações
Especificações | Status | Comentário |
---|---|---|
WHATWG 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 |
Compatibilidade de navegadores
Recurso | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte básico | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
Atributo formaction |
9.0 | 4.0 (2.0) | 10 | ? | ? |
Atributo formenctype |
9.0 | 4.0 (2.0) | 10 | 10.6 | ? |
Atributo formmethod |
9.0 | 4.0 (2.0) | 10 | ? | ? |
Atributo autofocus |
5.0 | 4.0 (2.0) | 10 | 9.6 | 5.0 |
Recurso | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suporte básico | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
Atributo formaction |
? | 4.0 (2.0) | ? | ? | ? |
Atributo formenctype |
? | 4.0 (2.0) | ? | ? | ? |
Atributo formmethod |
? | 4.0 (2.0) | ? | ? | ? |
Clicando e focando
Se um <button>
é clicado, como efeito ele (por padrão) ganha o focu que varia de acordo com o navegador e o SO. O resultado para <input>
do tipo type="button"
e type="submit"
são os mesmos.
Navegadores de Desktop | Windows 8.1 | OS X 10.9 |
---|---|---|
Firefox 30.0 | Sim | Não (nem com um tabindex ) |
Chrome 35 | Sim | Sim |
Safari 7.0.5 | N/A | Não (nem com um tabindex ) |
Internet Explorer 11 | Sim | N/A |
Presto (Opera 12) | Sim | Sim |
Navegadores Moveis | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | Não (nem com um tabindex ) |
N/A |
Chrome 35 | Não (nem com um tabindex ) |
Sim |
Notas
Elementos <button>
são muito mais fáceis estilizá-los do que elementos <input>
. Você pode adicionar dentro do conteúdo do HTML (imagine em <em>
, <strong>
ou mesmo <img>
), e fazer uso do pseudo-elemento :after
e :before
para realizar renderizações complexas enquanto <input>
apenas aceita um atributo com valor textual.
IE7 possui um bug ao enviar um formulário com <button type="submit" name="myButton" value="foo">Click me</button>
, os dados POST enviados terá como resultado em myButton=Click me
em vez de myButton=foo
.
IE6 possui um bug ainda pior quando enviado um formulário através de um botão por enviar TODOS os botões do formulário com o mesmo bug do IE7.
Esse bug foi corrigido no IE8.
Firefox adicionará, com propósitos de acessibilidade, uma pequena borda pontinhada e um botão focado. Essa borda será declarada por meio de CSS, no estilo do navegador, mas você pode sobrescreve-lo se necessário para adicionar seu próprio estilo de focu usando button
::-moz-focus-inner
{ }
Firefox irá, diferente de outros navegadores, por padrão, persistir o estado dinâmico desativado de um <button>
sob o carregamento das páginas. Definindo o valor do atributo autocomplete
para off
desabilita esse recurso. See bug 654072.
Firefox <35 para Android define um padrão background-image
gradiente em todos os botões (see bug 763671). Isso pode ser desabilitado usando background-image: none
.
Veja também
Outros elementos que são usados para criar formulários: <form>
, <datalist>
, <fieldset>
, <input>
,<keygen>
, <label>
, <legend>
, <meter>
, <optgroup>
, <option>
, <output>
, <progress>
, <select>
, <textarea>
.