Seleção de opções: checkbox e radio

Além dos campos de texto, formulários frequentemente precisam que o usuário selecione opções pré-definidas. Para isso, temos dois tipos de <input> muito importantes: checkbox e radio. Embora ambos permitam a seleção de opções, eles servem a propósitos diferentes.

type="checkbox": caixas de seleção múltipla

Um checkbox (caixa de seleção) permite que o usuário selecione zero, uma ou várias opções de um conjunto. Pense nele como uma lista de itens onde você pode marcar quantos quiser.

Características principais:

• Seleção múltipla: O usuário pode marcar quantas caixas desejar.
• Estado: Pode estar "marcado" (checked) ou "desmarcado".
• Atributo value: É crucial para identificar qual opção foi selecionada. O valor do value é o que será enviado ao servidor se a caixa estiver marcada.
• Atributo checked: Um atributo booleano que, se presente, faz com que a caixa de seleção venha pré-marcada por padrão.

Exemplo:

<form>
  <p>Quais linguagens de programação você conhece?</p>

  <input type="checkbox" id="html" name="linguagens" value="html">
  <label for="html">HTML</label><br>

  <input type="checkbox" id="css" name="linguagens" value="css" checked>
  <label for="css">CSS</label><br>

  <input type="checkbox" id="js" name="linguagens" value="javascript">
  <label for="js">JavaScript</label><br>

  <input type="checkbox" id="python" name="linguagens" value="python">
  <label for="python">Python</label><br>
</form>

Como os dados são enviados:

Se o usuário marcar "CSS" e "Python", o servidor receberá: linguagens=css&linguagens=python. É importante que todos os checkboxes de um mesmo grupo tenham o mesmo atributo name.

type="radio": botões de escolha única

Um radio button (botão de rádio) permite que o usuário selecione apenas uma opção de um conjunto mutuamente exclusivo. Pense nele como um rádio antigo, onde você só pode sintonizar uma estação por vez.

Características principais:

• Escolha única: O usuário só pode selecionar uma opção por grupo.
• Agrupamento: Para que funcionem como um grupo de escolha única, todos os botões de rádio de um mesmo grupo devem ter o mesmo atributo name.
• Atributo value: É crucial para identificar qual opção foi selecionada. O valor do value é o que será enviado ao servidor se o botão estiver selecionado.
• Atributo checked: Um atributo booleano que, se presente, faz com que o botão de rádio venha pré-selecionado por padrão. Apenas um botão de rádio por grupo pode ter checked.

Exemplo:

<form>
  <p>Qual é o seu gênero?</p>

  <input type="radio" id="masculino" name="genero" value="masculino">
  <label for="masculino">Masculino</label><br>

  <input type="radio" id="feminino" name="genero" value="feminino" checked>
  <label for="feminino">Feminino</label><br>

  <input type="radio" id="outro" name="genero" value="outro">
  <label for="outro">Outro</label><br>
</form>

Como os dados são enviados:

Se o usuário selecionar "Feminino", o servidor receberá: genero=feminino.

Atributos comuns para checkbox e radio

• id: Identificador único para o campo (importante para o label).
• name: Crucial para agrupar opções (mesmo name para checkboxes que representam a mesma categoria, e para todos os radios de um grupo).
• value: O valor que será enviado ao servidor se a opção for selecionada.
• checked: Marca a opção por padrão.
• required: Torna a seleção de pelo menos uma opção obrigatória (para radios, basta um required em qualquer um do grupo).
• disabled: Desabilita a opção.

Conectando label e input (novamente!)

Assim como nos campos de texto, é essencial conectar cada <label> ao seu <input> (checkbox ou radio) correspondente usando os atributos for e id.

<!-- Conexão correta -->
<input type="checkbox" id="aceito_termos" name="termos" value="sim">
<label for="aceito_termos">Eu aceito os termos e condições</label>

<!-- Benefícios: -->
<!-- - Ao clicar no texto do label, a caixa de seleção/botão de rádio é ativada/desativada. -->
<!-- - Leitores de tela leem o label para descrever o campo, melhorando a acessibilidade. -->

Resumindo

• type="checkbox":
  • Permite seleção de zero, uma ou várias opções de um conjunto.
  • Todos os checkboxes de uma mesma categoria devem ter o mesmo name.
  • O value é enviado se a caixa estiver marcada.
• type="radio":
  • Permite seleção de apenas uma opção de um conjunto mutuamente exclusivo.
  • Todos os radio buttons de um mesmo grupo devem ter o mesmo name.
  • Apenas um radio button por grupo pode ter checked por padrão.
  • O value do botão selecionado é enviado.
• Sempre use <label> conectado ao <input> (for e id) para acessibilidade.
• O atributo name é crucial para agrupar opções e para o servidor receber os dados.