Sumário

O Elemento HTML <button> representa um botão clicável.

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 para off (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 atributo autocomplete 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 atributo type definido para o arquivo.
  • 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
HTML Living Standard
The definition of '<button>' in that specification.
Padrão em tempo real  
HTML5
The definition of '<button>' in that specification.
Recomendação  
HTML 4.01 Specification
The definition of '<button>' in that specification.
Recomendação  

Compatibilidade de navegadores

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!

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

Clicar em um <button> dá foco a ele?
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
Tocar em um <button> dá foco a ele?
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: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 foco 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>.

Etiquetas do documento e colaboradores

Colaboradores desta página: gulima, Cloves23, 03-04-85
Última atualização por: gulima,