<button>
========

Sumário
-------

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

* *Categorias de conteúdo (en-US)* Conteúdo de fluxo (en-US), conteúdo fraseado (en-US), Conteúdo iterativo (en-US), listado (en-US), rotulável (en-US), e elemento enviável (en-US) associado a formulário (en-US), conteúdo palpável.
* *Conteúdo permitido* Conteúdo fraseado (en-US).
* *Omissão de Tag* Nenhuma, as tags de abertura e fechamento são obrigatórias.
* *Elementos pai permitidos* Qualquer elemento que aceite conteúdo fraseado (en-US).
* *Interface DOM* `HTMLButtonElement` (en-US)
* *Tipo de elemento* Inline
* 
Atributos
---------

Esse elemento inclui os atributos globais (en-US).

`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>` (en-US) 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>` (en-US).

`formaction`

A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo `action` (en-US) 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` (en-US) 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` (en-US) 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` (en-US) 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` (en-US) 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 Standard # the-button-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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` (en-US) { }`

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` (en-US) 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>` (en-US), `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>`.