path: root/files/pt-br/web/html/element/button/index.html

---
title: <button>
slug: Web/HTML/Element/button
tags:
  - Elemento
  - Formulários HTML
  - HTML
  - Intermediário
  - Referência(2)
  - Web
  - formulários
translation_of: Web/HTML/Element/button
---
<h2 id="Sumário">Sumário</h2>

<p>O <strong>Elemento HTML <em><code>&lt;button&gt;</code></em></strong> representa um botão clicável.</p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">conteúdo fraseado</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Conteúdo iterativo</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listado</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">rotulável</a>, e elemento <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">enviável</a>  <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">associado a formulário</a>, conteúdo palpável.</li>
 <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Conteúdo fraseado</a>.</li>
 <li><dfn>Omissão de Tag</dfn>Nenhuma, as tags de abertura e fechamento são obrigatórias.</li>
 <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>.</li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLButtonElement")}}</li>
 <li><dfn>Tipo de elemento</dfn> Inline</li>
 <li></li>
</ul>

<h2 id="Atributos">Atributos</h2>

<p><span style="line-height: 21px;">Esse elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
 <dd>O uso desse atributo em um {{HTMLElement("button")}} não está padronizado nem dentro das especificações do Firefox. Por padrão, diferente de outros navegadores, o <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persiste com o estado dinâmico desativado</a> de um {{HTMLElement("button")}} nas páginas carregadas. Definir o valor desse atributo para <code>off</code> (ex: <code>autocomplete="off"</code>) desabilita esse recurso. Veja {{bug(654072)}}.</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>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 {{HTMLElement("fieldset")}}, se não existir nenhum elemento com o atributo <strong>disabled</strong> definido, então o botão estará habilitado.</p>

 <p>Firefox irá, diferente de outros navegadores, por padrão, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persiste com o estado dinâmico desativado</a> de um {{HTMLElement("button")}} sob as páginas carregadas. Use o atributo {{htmlattrxref("autocomplete","button")}} para controlar esse recurso.</p>
 </dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
 <dd>O elemento de formulário que o botão está associado (é o <em>formulário proprietário</em>). O valor do atributo deve ser o atributo <strong>id</strong> de um elemento {{HTMLElement("form")}} no mesmo documento. Se esse atributo não for especificado, o elemento <code>&lt;button&gt;</code> deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos <code>&lt;button&gt;</code> em qualquer lugar do documento, não apenas como descendente de seus elementos {{HTMLElement("form")}}.</dd>
 <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
 <dd>A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo {{htmlattrxref("action","form")}} do formulário proprietário do botão.</dd>
 <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt>
 <dd>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:
 <ul>
  <li><code>application/x-www-form-urlencoded</code>: O valor padrão se o atributo não está especificado.</li>
  <li><code>multipart/form-data</code>: Use esse valor se você está usando um elemento {{HTMLElement("input")}} com o atributo {{htmlattrxref("type","input")}} definido para o <code>arquivo</code>.</li>
  <li><code>text/plain</code></li>
 </ul>

 <p>Se esse atributo fro especificado, ele sobrescreve o atributo {{htmlattrxref("enctype","form")}} do formulário proprietário do botão.</p>
 </dd>
 <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt>
 <dd>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:
 <ul>
  <li><code>post</code>: Os dados obtidos do formulário são incluídos em seu corpo e enviados para o servidor.</li>
  <li><code>get</code>: Os dados obtidos do formulário são anexados aos atributos URI do <strong>formulário</strong>, 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.</li>
 </ul>

 <p>Se especificado, esse atributo sobrescreve o atributo {{htmlattrxref("method","form")}} do formulário proprietário do botão.</p>
 </dd>
 <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt>
 <dd>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 {{htmlattrxref("novalidate","form")}} do formulário proprietário do botão.</dd>
 <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt>
 <dd>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 <em>contexto de navegação</em> (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo {{htmlattrxref("target", "form")}} do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais:
 <ul>
  <li><code>_self</code>: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado.</li>
  <li><code>_blank</code>: Carrega a resposta em um contexto de navegação sem nome.</li>
  <li><code>_parent</code>: 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 <code>_self</code>.</li>
  <li><code>_top</code>: 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 <code>_self</code>.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>O nome do botão que é enviado com os dados do formulário.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>O tipo de botão. O possíveis valores são:
 <ul>
  <li><code>submit</code>: 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.</li>
  <li><code>reset</code>: O botão restaura todos os controles para seus valores iniciais.</li>
  <li><code>button</code>: 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.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>O valor inicial do botão.</dd>
 <dt></dt>
</dl>

<h2 id="Examples" name="Examples">Notas</h2>

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

<h2 id="Example" name="Example">Exemplo</h2>

<pre class="brush:html">&lt;button name="button"&gt;Click me&lt;/button&gt;
</pre>

<p>{{ EmbedLiveSample('Example', 200, 64) }}</p>

<p>Note que esse botão possui CSS aplicado.</p>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>formaction</code></td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>formenctype</code></td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>10.6</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>formmethod</code></td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>autofocus</code></td>
   <td>5.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>9.6</td>
   <td>5.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>formaction</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>formenctype</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Atributo <code>formmethod</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Clicando_e_focando">Clicando e focando</h3>

<p>Se um {{HTMLElement("button")}} é clicado, como efeito ele (por padrão) ganha o foco que varia de acordo com o navegador e o SO. O resultado para {{HTMLElement("input")}} do tipo <code>type="button"</code> e <code>type="submit"</code> são os mesmos.</p>

<table>
 <caption>Clicar em um {{HTMLElement("button")}} dá foco a ele?</caption>
 <tbody>
  <tr>
   <td>Navegadores de Desktop</td>
   <th>Windows 8.1</th>
   <th>OS X 10.9</th>
  </tr>
  <tr>
   <th>Firefox 30.0</th>
   <td style="background-color: LawnGreen;">Sim</td>
   <td style="background-color: red;">Não (nem com um<code> tabindex</code>)</td>
  </tr>
  <tr>
   <th>Chrome 35</th>
   <td style="background-color: LawnGreen;">Sim</td>
   <td style="background-color: LawnGreen;">Sim</td>
  </tr>
  <tr>
   <th>Safari 7.0.5</th>
   <td style="background-color: silver;">N/A</td>
   <td style="background-color: red;">Não (nem com um <code>tabindex</code>)</td>
  </tr>
  <tr>
   <th>Internet Explorer 11</th>
   <td style="background-color: LawnGreen;">Sim</td>
   <td style="background-color: silver;">N/A</td>
  </tr>
  <tr>
   <th>Presto (Opera 12)</th>
   <td style="background-color: LawnGreen;">Sim</td>
   <td style="background-color: LawnGreen;">Sim</td>
  </tr>
 </tbody>
</table>

<table>
 <caption>Tocar em um {{HTMLElement("button")}} dá foco a ele?</caption>
 <tbody>
  <tr>
   <td>Navegadores Moveis</td>
   <th>iOS 7.1.2</th>
   <th>Android 4.4.4</th>
  </tr>
  <tr>
   <th>Safari Mobile</th>
   <td style="background-color: red;">Não (nem com um <code>tabindex</code>)</td>
   <td style="background-color: silver;">N/A</td>
  </tr>
  <tr>
   <th>Chrome 35</th>
   <td style="background-color: red;">Não (nem com um <code>tabindex</code>)</td>
   <td style="background-color: LawnGreen;">Sim</td>
  </tr>
  <tr>
  </tr>
 </tbody>
</table>

<h2 id="Notas">Notas</h2>

<p>Elementos <code>&lt;button&gt;</code> são muito mais fáceis estilizá-los do que elementos {{HTMLElement("input")}}. Você pode adicionar dentro do conteúdo do HTML (imagine em <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code> ou mesmo <code>&lt;img&gt;</code>), e fazer uso do pseudo-elemento {{Cssxref(":after")}} e {{Cssxref(":before")}} para realizar renderizações complexas enquanto {{HTMLElement("input")}} apenas aceita um atributo com valor textual.</p>

<p>IE7 possui um bug ao enviar um formulário com <code>&lt;button type="submit" name="myButton" value="foo"&gt;Click me&lt;/button&gt;</code>, os dados POST  enviados terá como resultado em <code>myButton=Click me</code> em vez de <code>myButton=foo</code>.<br>
 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.<br>
 Esse bug foi corrigido no IE8.</p>

<p>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 <code>button{{cssxref("::-moz-focus-inner")}} { }</code></p>

<p>Firefox irá, diferente de outros navegadores, por padrão, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico desativado</a> de um {{HTMLElement("button")}} sob o carregamento das páginas. Definindo o valor do atributo {{htmlattrxref("autocomplete","button")}} para <code>off</code> desabilita esse recurso. See {{bug(654072)}}.</p>

<p>Firefox &lt;35 para Android define um padrão {{ cssxref("background-image") }} gradiente em todos os botões (see {{bug(763671)}}). Isso pode ser desabilitado usando <code>background-image: none</code>.</p>

<h2 id="Veja_também">Veja também</h2>

<p>Outros elementos que são usados para criar formulários: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p>

<div>{{HTMLRef}}</div>