--- 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><button></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><button></code> deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos <code><button></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><button></code> do que elementos {{HTMLElement("input")}}. Você pode adicionar conteúdo HTML (como <code><em></code>, <code><strong></code>, ou até <code><img></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"><button name="button">Click me</button> </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', '<button>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td></td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td></td> </tr> <tr> <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</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><button></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><em></code>, <code><strong></code> ou mesmo <code><img></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><button type="submit" name="myButton" value="foo">Click me</button></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 <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>