Sumário

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

• Categorias de conteúdoConteúdo de fluxo,conteúdo fraseado,Conteúdo iterativo,listado,rotulável, e elementoenviávelassociado a formulário, conteúdo palpável.
• Conteúdo permitidoConteúdo fraseado.
• Omissão de Tag Nenhuma, as tags de abertura e fechamento são obrigatórias.
• Elementos pai permitidos Qualquer elemento que aceiteconteúdo fraseado.
• Interface DOMHTMLButtonElement
• Tipo de elemento Inline

Atributos

Esse elemento inclui osatributos 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.

autocompleteNão padrão

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, oFirefox 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. VejaErro 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 atributodisabled 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

O elemento de formulário que o botão está associado (é oformulário proprietário). O valor do atributo deve ser o atributoid 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 atributoaction 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 atributotype definido para oarquivo.
• text/plain

Se esse atributo fro especificado, ele sobrescreve o atributoenctype 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 doformulá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 atributomethod 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 atributonovalidate 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, umcontexto de navegação (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributotarget 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 atributovalue do tipo texto.

Exemplo

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

Note que esse botão possui CSS aplicado.

Especificações

Compatibilidade com navegadores

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 emmyButton=Click me em vez demyButton=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 usandobutton::-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 atributoautocomplete paraoff desabilita esse recurso. SeeErro do Firefox 654072.

Firefox <35 para Android define um padrãobackground-image gradiente em todos os botões (seeErro do Firefox 763671). Isso pode ser desabilitado usandobackground-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>.