O que classifica a forma como o elemento <input> funciona é o atributo “type”, que significa tipo. Portanto, o checkbox é um tipo de comportamento que o <input> pode ter, o qual permite que a pessoa usuária selecione uma ou várias alternativas ao clicar na caixa de checagem quadrada exibida ao lado do texto informativo.
Também não podemos confundir checkbox com o tipo radio. A principal diferença entre eles é que o radio só permite a seleção de uma alternativa, por exemplo, “sim” ou “não”, ou escolher apenas uma opção entre várias possibilidades oferecidas. Além disso, ele exibe um círculo para ser clicado. Mostraremos um exemplo de código no próximo tópico.
Já o checkbox permite a múltipla escolha e exibe um quadrado para a seleção dos itens que, ao ser clicado, altera o seu status para selecionado. Para usar esse recurso em um formulário precisamos da tag HTML <input> e atribuirmos o tipo “checkbox” a ele.
Diferente de outros elementos HTML, o <input> não utiliza a tag de fechamento, em vez disso apenas os sinais “/>” indicam o final da declaração do elemento.
Como mencionamos, o objetivo do checkbox é interagir com a pessoa usuária por meio da seleção de alternativas. O atributo value é utilizado para atribuir um valor a cada opção e, dessa forma, identificar qual foi a escolha realizada por ela entre as possibilidades exibidas.
O conteúdo do atributo value normalmente é uma alternativa resumida do texto exibido na tela. Por exemplo, podemos exibir um checkbox com a descrição “Primeira opção” e atribuir o value = “1” ou value = “primeira” para esse elemento.
Dessa forma, ao enviar o conteúdo de um formulário que contenha checkbox ao servidor, por exemplo, sabemos qual foi a opção escolhida sem a necessidade de enviar todo o texto descritivo. Veja o exemplo: