Pular para o conteúdo
Ana Malagoli

Digite para buscar…

↑↓ para navegar
Esc

HTML: Radio button ou checkbox?

Entenda a diferença.

Front-end 1 min de leitura

Quando precisamos permitir que o usuário escolha uma ou mais opções em um formulário, dois tipos de input aparecem bastante: radio e checkbox.

A diferença principal é simples:

  • O radio permite escolher apenas uma alternativa entre várias.
<input type="radio" />
  • Já o checkbox permite escolher mais de uma alternativa.
<input type="checkbox" />

Uma forma prática de decidir é pensar:

  • Se admite apenas uma resposta → radio.
  • Se admite várias respostas → checkbox.

Além do type, alguns atributos ajudam a organizar e identificar as opções:

  • id → identifica o campo;
  • name → agrupa opções relacionadas;
  • value → define o valor da opção;

No caso do radio, as opções que fazem parte da mesma pergunta precisam ter o mesmo name. Assim, o navegador entende que elas pertencem ao mesmo grupo e que apenas uma pode ser selecionada.

<input type="radio" id="p1a" name="pergunta1" value="Python" /> <label for="p1a">Python</label>

A tag label exibe o texto da opção para o usuário e, por meio do atributo for, quando seu valor é igual ao id do input, clicar no texto também seleciona a opção, facilitando o preenchimento do formulário.

Inputs

E este é o código responsável por criar esses campos:

<h1>Radio button ou checkbox?</h1>


<form>
  <h2>Qual linguagem você mais gosta?</h2>


  <div class="opcao">
    <input type="radio" id="python" name="linguagem" value="Python" />
    <label for="python">Python</label>
  </div>


  <div class="opcao">
    <input type="radio" id="javascript" name="linguagem" value="JavaScript" />
    <label for="javascript">JavaScript</label>
  </div>


  <div class="opcao">
    <input type="radio" id="java" name="linguagem" value="Java" />
    <label for="java">Java</label>
  </div>


  <h2>Quais tecnologias você conhece?</h2>


  <div class="opcao">
    <input type="checkbox" id="html" name="tecnologia" value="HTML" />
    <label for="html">HTML</label>
  </div>


  <div class="opcao">
    <input type="checkbox" id="css" name="tecnologia" value="CSS" />
    <label for="css">CSS</label>
  </div>


  <div class="opcao">
    <input type="checkbox" id="javascript2" name="tecnologia" value="JavaScript" />
    <label for="javascript2">JavaScript</label>
  </div>
</form>

Observação: o estilo customizado da imagem vem de um CSS à parte, que não é o foco deste post.