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

---
title: <input type="checkbox">
slug: Web/HTML/Element/Input/checkbox
translation_of: Web/HTML/Element/input/checkbox
---
<div>{{HTMLRef}}</div>

<p>{{htmlelement ("input")}} elementos do tipo <strong><code>checkbox</code></strong>são renderizados por padrão como caixas quadradas que são marcadas (com uma marca de verificação) quando ativadas, como você pode ver em um formulário de papel oficial do governo. A aparência exata depende de da configuração de sistema operacional sobre o qual o navegador está sendo executado. Eles permitem que você selecione valores únicos para envio em um formulário (ou não).</p>

<div>{{EmbedInteractiveExample ("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div>

<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos uma solicitação pull.</p>

<div class="note">
<p><strong>Nota</strong> : <a href="/en-US/docs/Web/HTML/Element/input/radio">Os botões de opção</a> são semelhantes às caixas de seleção, mas com uma distinção importante: os botões de opção são agrupados em um conjunto no qual apenas um botão pode ser selecionado por vez, enquanto as caixas de seleção permitem ativar e desativar valores únicos. Quando existem vários controles, os botões de opção permitem que um seja selecionado de todos, enquanto as caixas de seleção permitem que vários valores sejam selecionados.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch ("Valor")}}</strong></td>
   <td>Um {{domxref ("DOMString")}} representando o valor da caixa de seleção.</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{event ("change")}} e {{event ("input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos comuns suportados</strong></td>
   <td>{{htmlattrxref ("checked", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos IDL</strong></td>
   <td><code>checked</code> e <code>value</code></td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{domxref ("HTMLInputElement.select", "select ()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Valor">Valor</h2>

<p>Um {{domxref ("DOMString")}} representando o valor da caixa de seleção. Isso nunca é visto no lado do cliente, mas no servidor esse é o <code>value</code>  atribuído aos dados enviados com o <code>name</code> da caixa de seleção. Tome o seguinte exemplo:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;input type = "checkbox" id = "subscribeNews" nome = "subscribe" value = "<code>newsletter</code>"&gt;
    &lt;label for = "subscribeNews"&gt; Subscreva a newsletter? &lt;/ label&gt;
  &lt;/ div&gt;
  &lt;div&gt;
    &lt;button type = "submit"&gt; Subscrever &lt;/ button&gt;
  &lt;/ div&gt;
&lt;/ form&gt;</pre>

<p>{{EmbedLiveSample ('Value', 600, 60)}}</p>

<p>Neste exemplo, temos um nome <code>subscribe</code>e um valor de <code>newsletter</code>. Quando o formulário é enviado, o par de nome / valor de dados será <code>subscribe=newsletter</code>.</p>

<p>Se o atributo <code>value</code> for omitido, o valor padrão da caixa de seleção é <code>on</code> , portanto, os dados enviados nesse caso seriam <code>subscribe=on</code>.</p>

<div class="note">
<p><strong>Nota</strong> : Se uma caixa de seleção estiver desmarcada quando seu formulário for enviado, não haverá nenhum valor enviado ao servidor para representar seu estado desmarcado (por exemplo <code>value=unchecked</code>); o valor não é submetido ao servidor.</p>
</div>

<h2 id="Usando_entradas_da_caixa_de_seleção">Usando entradas da caixa de seleção</h2>

<p>Já cobrimos o uso mais básico de caixas de seleção acima. Vamos agora olhar para os outros recursos e técnicas relacionados à caixa de seleção que você precisa.</p>

<h3 id="Lidando_com_várias_caixas_de_seleção">Lidando com várias caixas de seleção</h3>

<p>O exemplo que vimos acima continha apenas uma caixa de seleção; em situações do mundo real, você provavelmente encontrará várias caixas de seleção. Se eles não estiverem relacionados, você pode lidar com todos eles separadamente, como mostrado acima. No entanto, se todos estiverem relacionados, as coisas não são tão simples.</p>

<p>Por exemplo, na demonstração a seguir, incluímos várias caixas de seleção para permitir que o usuário selecione seus interesses (veja a versão completa na seção {{anch ("Examples")}}).</p>

<pre class="brush: html">&lt;fieldset&gt;
  &lt;legend&gt; Escolha seus interesses &lt;/ legend&gt;
  &lt;div&gt;
    &lt;input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"&gt;
    &lt;label for = "coding"&gt; Codificação &lt;/ label&gt;
  &lt;/ div&gt;
  &lt;div&gt;
    &lt;input type = "checkbox" id = "música" name = "interesse" valor = "música"&gt;
    &lt;label for = "music"&gt; Música &lt;/ label&gt;
  &lt;/ div&gt;
&lt;/ fieldset&gt;</pre>

<p>{{EmbedLiveSample ('Handling_multiple_checkboxes', 600, 100)}}</p>

<p>Neste exemplo, você verá que atribuímos a cada caixa de seleção o mesmo <code>name</code>. Se ambas as opções são verificados e, em seguida, o formulário é enviado, você terá uma série de pares nome / valor apresentado assim: <code>interest=coding&amp;interest=music</code>. Quando esses dados atingirem o lado do servidor, você poderá capturá-los como uma matriz de valores relacionados e tratá-los adequadamente - consulte <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Lidar com várias caixas de seleção com uma única variável de servidor</a> , por exemplo.</p>

<h3 id="Caixas_de_verificação_por_padrão">Caixas de verificação por padrão</h3>

<p>Para fazer uma caixa de seleção marcada por padrão, você simplesmente atribui o atributo <code>checked</code>. Veja o exemplo abaixo:</p>

<pre class="brush: html">&lt;fieldset&gt;
  &lt;legend&gt; Escolha seus interesses &lt;/ legend&gt;
  &lt;div&gt;
    &lt;input type = "checkbox" id = "codificação" nome = "interesse" valor = "codificação" checked&gt;
    &lt;label for = "coding"&gt; Codificação &lt;/ label&gt;
  &lt;/ div&gt;
  &lt;div&gt;
    &lt;input type = "checkbox" id = "música" name = "interesse" valor = "música"&gt;
    &lt;label for = "music"&gt; Música &lt;/ label&gt;
  &lt;/ div&gt;
&lt;/ fieldset&gt;</pre>

<p>{{EmbedLiveSample ('Checking_boxes_by_default', 600, 100)}}</p>

<h3 id="Fornecendo_uma_área_de_acertos_maior_para_suas_caixas_de_seleção">Fornecendo uma área de acertos maior para suas caixas de seleção</h3>

<p>Nos exemplos acima, você deve ter notado que pode alternar uma caixa de seleção clicando no elemento {{htmlelement ("label")}} associado e na própria caixa de seleção. Esse é um recurso realmente útil de rótulos de formulários HTML que facilitam o clique na opção desejada, especialmente em dispositivos de tela pequena, como smartphones.</p>

<p>Além da acessibilidade, esse é outro bom motivo para configurar corretamente os <code>&lt;label&gt;</code>elementos em seus formulários.</p>

<h3 id="Caixas_de_seleção_de_estado_indeterminado">Caixas de seleção de estado indeterminado</h3>

<p>Além dos estados marcado e não marcado, há um terceiro estado em que uma caixa de seleção pode estar: <strong>indeterminada</strong>. Este é um estado em que é impossível dizer se o item está ativado ou desativado. Isso é definido usando a propriedade <code>indeterminate</code> do objeto {{domxref ("HTMLInputElement")}} via JavaScript (não pode ser definido usando um atributo HTML):</p>

<pre class="brush: js">inputInstance.indeterminate = true;</pre>

<p>Uma caixa de seleção no estado indeterminado tem uma linha horizontal na caixa (parece um hífen ou sinal de menos) em vez de uma marca de verificação na maioria dos navegadores.</p>

<p>Não há muitos casos de uso para essa propriedade. O mais comum é quando uma caixa de seleção está disponível e "possui" um número de subopções (que também são caixas de seleção). Se todas as subopções estiverem marcadas, a caixa de seleção proprietária também será marcada e, se todas elas estiverem desmarcadas, a caixa de seleção proprietária será desmarcada. Se uma ou mais das subopções tiverem um estado diferente das outras, a caixa de seleção proprietária está no estado indeterminado.</p>

<p>Isso pode ser visto no exemplo abaixo (graças aos <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> para a inspiração). Neste exemplo, acompanhamos os ingredientes que estamos coletando para uma receita. Quando você marca ou desmarca a caixa de seleção de um ingrediente, uma função JavaScript verifica o número total de ingredientes verificados:</p>

<ul>
 <li>Se nenhum deles estiver marcado, a caixa de seleção do nome da receita está definida como desmarcada.</li>
 <li>Se um ou dois estiverem marcados, a caixa de seleção do nome da receita está definida como <code>indeterminate</code>.</li>
 <li>Se todos os três forem marcados, a caixa de seleção do nome da receita estará definida como <code>checked</code>.</li>
</ul>

<p>Portanto, neste caso, o <code>indeterminate</code>estado é usado para afirmar que a coleta dos ingredientes foi iniciada, mas a receita ainda não está completa.</p>

<pre class="brush: js" id="line1">  var overall = document.querySelector ('input[id = "EnchTbl"]');
  var ingredients = document.querySelectorAll ('ul input');

  overall.addEventListener ('clique', function (e) {
    e.preventDefault ();
  });

  for(var i = 0; i &lt;ingredientes.length; i ++) {
    ingredientes [i] .addEventListener ('clique', updateDisplay);
  }

  função updateDisplay () {
    var checkedCount = 1;
    for(var i = 0; i &lt;ingredientes.length; i ++) {
      if (ingredientes [i] .checked) {
        checkedCount ++;
      }
    }

    if (checkedCount === ingredientes.length + 1) {
      overall.checked = true;
      overall.indeterminate = false;
    } else if (checkedCount &lt;= ingredients.length + 1 &amp;&amp; checkedCount&gt; 1) {
      overall.checked = false;
      <strong>overall.indeterminate = true;</strong>
    } else {
      overall.checked = false;
      <strong>overall.indeterminate = false;</strong>
    }
  }</pre>

<p>{{EmbedGHLiveSample ("área de aprendizado / html / forms / indeterminate-example / index.html", '100%', 200)}}</p>

<div class="note">
<p><strong>Nota</strong> : Se você enviar um formulário com uma caixa de seleção indeterminada, a mesma coisa acontece como se o formulário estivesse desmarcado - nenhum dado é enviado para representar a caixa de seleção.</p>
</div>

<h2 id="Validação">Validação</h2>

<p>As caixas de seleção suportam <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validação</a> (oferecidas para todos os  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="O elemento HTML &lt;input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário."><code>&lt;input&gt;</code></a>s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será <code>false</code>. Se a caixa de seleção tiver o <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required">required</a></code> atributo, mas não estiver marcada, ela  <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing" title="The documentation about this has not yet been written; please consider contributing!">ValidityState.valueMissing</a></code> será <code>true</code>.</p>

<h2 id="Exemplos">Exemplos</h2>

<p>O exemplo a seguir é uma versão estendida do exemplo "multiple checkboxes" que vimos acima - tem mais opções padrão, além de uma caixa de seleção "other" que quando marcada faz com que um campo de texto apareça para inserir um valor para a opção "other". Isto é conseguido com um simples bloco de JavaScript. O exemplo também inclui alguns CSS para melhorar o estilo.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Escolha seus interesses &lt;/ legend&gt;
    &lt;div&gt;
      &lt;input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"&gt;
      &lt;label for = "coding"&gt; Codificação &lt;/ label&gt;
    &lt;/ div&gt;
    &lt;div&gt;
      &lt;input type = "checkbox" id = "música" name = "interesse" valor = "música"&gt;
      &lt;label for = "music"&gt; Música &lt;/ label&gt;
    &lt;/ div&gt;
    &lt;div&gt;
      &lt;input type = "checkbox" id = "arte" name = "interesse" valor = "arte"&gt;
      &lt;label for = "art"&gt; Art &lt;/ label&gt;
    &lt;/ div&gt;
    &lt;div&gt;
      &lt;input type = "checkbox" id = "sports" nome = "interesse" valor = "esportes"&gt;
      &lt;label for = "sports"&gt; Esportes &lt;/ label&gt;
    &lt;/ div&gt;
    &lt;div&gt;
      &lt;input type = "checkbox" id = "cozinhar" nome = "interesse" valor = "cozinhar"&gt;
      &lt;label for = "cooking"&gt; Cozinhando &lt;/ label&gt;
    &lt;/ div&gt;
    &lt;div&gt;
      &lt;input type = "checkbox" id = "outro" nome = "interesse" valor = "outro"&gt;
      &lt;label for = "other"&gt; Outro &lt;/ label&gt;
      &lt;input type = "text" id = "otherValue" nome = "outro"&gt;
    &lt;/ div&gt;
    &lt;div&gt;
      &lt;button type = "submit"&gt; Enviar formulário &lt;/ button&gt;
    &lt;/ div&gt;
  &lt;/ fieldset&gt;
&lt;/ form&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">html {
  font-family: sem serifa;
}

Formato {
  largura: 600px;
  margem: 0 auto;
}

div {
  margem inferior: 10px;
}

fieldset {
  fundo: ciano;
  borda: 5px azul sólido;
}

lenda {
  preenchimento: 10px;
  fundo: azul;
  cor: ciano;
}
</pre>

<h3 id="JavaScript">JavaScript</h3>



<pre class="brush: js">var otherCheckbox = document.querySelector ('entrada [valor = "outro"]');
var otherText = document.querySelector ('input [id = "otherValue"]');
otherText.style.visibility = 'oculto';

otherCheckbox.onchange = function () {
  if (otherCheckbox.checked) {
    otherText.style.visibility = 'visível';
    otherText.value = '';
  } outro {
    otherText.style.visibility = 'oculto';
  }
};</pre>

<p>{{EmbedLiveSample ('Examples', '100%', 300)}}</p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <td>Especificação</td>
   <td>Status</td>
   <td>Comente</td>
  </tr>
  <tr>
  </tr>
  <tr>
   <td>{{SpecName ('HTML WHATWG', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '&lt;input type = "checkbox"&gt;')}}</td>
   <td>{{Spec2 ('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName ('HTML5 W3C', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '&lt;input type = "checkbox"&gt;')}}</td>
   <td>{{Spec2 ('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat ("html.elements.input.input-checkbox")}}</p>

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

<ul>
 <li>{{HTMLElement ("input")}} e a interface {{domxref ("HTMLInputElement")}} que o implementa.</li>
 <li>Os seletores CSS {{cssxref (": checked")}} e {{cssxref (": indeterminate")}} permitem que você marque as caixas de seleção com base em seu estado atual</li>
</ul>