Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

<button>

Este artigo necessita de uma revisão editorial. Como posso ajudar.

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

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

Etiquetas do documento e colaboradores

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