diff options
Diffstat (limited to 'files/pt-br/web/html/element/button/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/button/index.html | 321 |
1 files changed, 321 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/button/index.html b/files/pt-br/web/html/element/button/index.html new file mode 100644 index 0000000000..250bf44cfa --- /dev/null +++ b/files/pt-br/web/html/element/button/index.html @@ -0,0 +1,321 @@ +--- +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="Compatibilidade_de_navegadores">Compatibilidade de 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> |