Botões de rádio HTML: grupos name, checked e required

HTML <input type="radio"> cria botões de rádio para escolher um item entre opções relacionadas. Botões com o mesmo name no mesmo formulário pertencem a um grupo; dê a cada opção um valor diferente. Apenas o name e o value do botão selecionado são enviados.

Distinguir o name do grupo do id de cada botão

Botões em um grupo compartilham um nome, mas cada id usado para associar um rótulo deve ser único. Selecionar outro botão com o mesmo nome limpa a seleção anterior. Use nomes diferentes para perguntas independentes. fieldset e legend fornecem um grupo e sua pergunta, mas fieldsets separados sozinhos não dividem botões de rádio com o mesmo nome em diferentes grupos de seleção.

A propriedade do formulário também afeta a criação de grupos: botões com o mesmo nome em formulários diferentes não formam necessariamente um único grupo. O exemplo abaixo separa os grupos de frutas e esportes dentro do mesmo formulário.

Exemplo completo: inspecione os valores de duas perguntas

Salve o seguinte documento como radio-demo.html e abra-o em um navegador. Uma escolha de fruta é obrigatória, enquanto beisebol é o esporte padrão. O exemplo impede o envio e exibe os valores atuais na página, portanto, nenhum manipulador de servidor é necessário.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grupos de rádio e valores enviados</title>
</head>
<body>
  <h1>Prática de preferências</h1>
  <form id="choices">
    <fieldset>
      <legend>Fruta (obrigatória)</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">Maçã</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">Banana</label>
    </fieldset>
    <fieldset>
      <legend>Esporte</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">Futebol</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">Beisebol</label>
    </fieldset>
    <button type="submit">Mostrar valores</button>
    <button type="reset">Redefinir</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Inicialmente, nenhuma fruta está selecionada e beisebol está selecionado. Pressione o botão enviar: a escolha obrigatória da fruta impede o envio.
2. Selecione Maçã e envie. A saída contém fruit=apple e sport=baseball. O dado é baseball, definido em value, e não o rótulo Beisebol.
3. Selecione Banana para desmarcar Maçã. Selecione Futebol para desmarcar Beisebol; a seleção de fruta permanece inalterada.
4. O reset restaura a seleção de frutas para nenhum item selecionado e a seleção padrão de Beisebol. O reset restaura os estados verificados originais em vez de limpar todas as seleções.

checked · required

checked é um atributo Booleano para a seleção inicial. checked="false" ainda mantém o atributo presente e não é uma forma correta de expressar false. Omiti-lo mantém a opção inicialmente não selecionada. Leia ou altere o estado atual com a propriedade checked do JavaScript.

Se qualquer botão em um grupo possuir required, um botão desse grupo deve ser selecionado. O botão selecionado não precisa, por si só, ter required. Ambas as opções de frutas têm isso aqui para deixar o requisito claro.

Um grupo sem seleção é omitido dos dados enviados. Se a opção selecionada não tiver value, será enviada a string padrão on; defina valores distintos para as opções. Botões disabled não podem ser operados e são excluídos do envio. Mesmo com validação no navegador, confira novamente os valores permitidos no servidor.

Limpando uma escolha e usando o teclado

Clicar em um botão de rádio já selecionado não o limpa como uma caixa de seleção. Se os usuários precisarem escolher “Nenhum”, desenhe isso como uma opção separada. Use caixas de seleção para uma pergunta em que vários itens podem ser alternados de forma independente.

Associe rótulos para que clicar no texto deles selecione as opções. Mantenha o comportamento nativo do teclado: use Tab para alcançar o grupo e depois as setas para mover e selecionar. O comportamento exato do foco pode variar entre os navegadores. A referência de entrada de rádio MDN explica atributos e regras de envio.