<button>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Sumário

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

Atributos

Esse elemento inclui os atributos globais.

autofocus

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 Non-standard

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 Erro do Firefox 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

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

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

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

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

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

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.

Notas

É muito mais fácil estilizar elementos <button> do que elementos <input>. Você pode adicionar conteúdo HTML (como <em>, <strong>, ou até <img>), e usar pseudo-elementos ::after e ::before para executar composições complexas, enquanto <input> aceita apenas um atributo value do tipo texto.

Exemplo

html
<button name="button">Click me</button>

Note que esse botão possui CSS aplicado.

Especificações

Specification
HTML
# the-button-element

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
button
command
Experimental
commandfor
Experimental
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
popovertarget
popovertargetaction
type
value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

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 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 Erro do Firefox 654072.

Firefox <35 para Android define um padrão background-image gradiente em todos os botões (see Erro do Firefox 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>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.