Campos de Seleção: Radio Button (Botão do tipo Rádio) e Checkbox (Caixa de verificação)

Neste tutorial de nossa Apostila HTML Progressivo, iremos aprender a criar dois importantes tipos de campos, bastante comuns e presentes em diversos formulários de websites, que são usados para fazer a seleção, uma escolha em uma lista com diversos itens.

São os Radio Buttons e Checkbox.

• Estude offline: Apostila HTML + CSS

Usando formulários para fazer escolher - Radio Buttons e Checkbox

Até o momento, nesta seção sobre formulários em HTML. ensinamos como criar campos de um form onde o leitor tivesse que digitar, escrever e fornecer alguma informação, seja por meio de uma caixa de texto comum ou de senha.

Ora, mas sabemos que os formulários são para isso mesmo: para que o leitor forneça dados para o site.
Porém, há diversas maneiras de isso ocorrer, além deste método que já ensinamos, onde o visitante de seu site tem que digitar algo.

Algumas vezes simplesmente queremos que ele escolha uma opção.
Por exemplo, você não precisa fazer com que ele digite "Masculino" ou "Feminino", provavelmente você nunca digitou isso, e sim selecionou em um formulário uma dessas opções.
E isso, por um motivo bem simples: só há essas duas opções (se não levarmos em consideração os emos).

Outro exemplo de campo de formulário onde fazemos uma simples escolha é quando temos que optar por "Sim" ou "Não". Por exemplo: "Você é de maior?"

Também já deve ter se deparado com umas caixinhas em que temos que marcar, assinalar, como quando queremos dizer que lemos os Termos e Condições de Uso.

Enfim, há diversas maneiras de fazermos escolhas e assinalar opções, e isto também é uma forma do usuário se comunicar com seu site, é uma maneira que você, webmaster, tem de obter informação dos seus leitores.

Botões de Rádio (radio button) - Escolhendo uma opção

Para que serve um Radio Button

O primeiro tipo de campo que vamos usar para fazer uma escolha, é o radio button (botão do tipo rádio, ou botão radial), que nada mais é que aquele bolinha onde clicamos e apenas uma das opções podem ser escolhidas.

Essa é a característica principal deste tipo de campo de um formulário: usamos os radio buttons quando queremos escolher apenas UMA opção, dentre as várias listadas.
Ou seja, devemos fazer uma pergunta ou pedir uma informação cuja a resposta seja única.

Por exemplo, ao pedir o gênero, estamos querendo saber se a pessoa é homem OU mulher.
Ao perguntar se um cliente tem plano de saúde ou não, a resposta só pode ser SIM ou NÃO.
A faixa de salário pode ser até mil, entre mil e dois mil reais, entre três e quatro mil, ou mais de quatro mil. Ou seja, só uma opção pode ser marcada.

Como usar o Radio Button: type="radio"

Para usar este tipo de campo de um formulário, temos que fornecer o valor "radio" ao atributo type da tag <input>. Também devemos fornecer o atributo nome, de tal modo que todas as opções, todo o grupo de botões rádio, devem ter o mesmo o nome.
O que irá mudar entre uma opção e outra é o atributo value.

Assim, a sintaxe para usar os botões radiais é:

<input type="radio" name="nome_do_grupo" value="valor"/> Valor

E o resultado é o radio button:
Valor

Vamos criar um grupo de botões rádio com as opções "Sim", "Não", "Talvez" e "Quem Sabe", que respondem a pergunta: "Você deseja trabalhar como Webmaster?"
O código é:

<input type="radio" name="webmaster" value="sim"/> Sim<br />
<input type="radio" name="webmaster" value="nao"/> Não<br />
<input type="radio" name="webmaster" value="talvez"/> Talvez<br />
<input type="radio" name="webmaster" value="quem_sabe"/> Quem sabe

E o resultado, são os belos radio buttons a seguir:

Você deseja trabalhar como Webmaster?
Sim
Não
Talvez
Quem sabe

Aqui frisamos a importância de terem o mesmo nome, "opcoes".
Se você selecionar 'sim', por exemplo e enviar seu formulário, o programador que fez o sistema vai receber o valor 'sim' e sabe que essa resposta foi dada ao grupo de botões de nome "webmaster".

Então, se tiver escolhido sim, vai abrir um site pra você fazer um curso.
Se tiver escolhido não, o sistema (em PHP, por exemplo) vai te mostrar mais vantagens em ser um Webmaster, etc.

O importante é notar que o valor é enviado para o site. Então o site sabe sua resposta (value) de um grupo de botões (name) específico.

Caixas de checagem (checkbox) - Fazendo escolhas

Para que serve uma checkbox

Responda o seguinte formulário:

O que deseja aprender ?
HTML
CSS
JavaScript
PHP

Como você é aluno do Curso HTML Progressivo, certamente está em seus planos aprender tudo isso!
Mas, espera! Esses campos são do tipo botão rádio, então dá pra escolher somente uma opção.
Mas você quer escolher mais, quer estudar tudo: HTML, CSS, JavaScript e PHP também.

E agora?
É aí que entram as caixas de checagem, ou em inglês, checkbox.
São campos de um formulário que permitem que você escolha mais de uma opção, todas ou até nenhuma.

Como usar uma checkbox: type="checkbox"

Aqui não tem muito segredo, para criar uma caixa de checagem de opções, fazemos exatamente a mesma coisa do radio buttons, a diferença é que no atributo type da tag input, nós fornecemos o valor "checkbox".

Por exemplo, o código de um formulário que pergunta o que você deseja aprender seria:

<input type="checkbox" name="opcoes" value="html"/> HTML<br />
<input type="checkbox" name="opcoes" value="css"/> CSS<br />
<input type="checkbox" name="opcoes" value="javascript"/> JavaScript<br />
<input type="checkbox" name="opcoes" value="php"/> PHP

E o belo resultado será:

O que você deseja aprender ?
HTML
CSS
JavaScript
PHP

Resumindo:
Para escolher somente uma opção de uma lista de opções, use o Radio Button.
Para escolher quantas opções quiser de uma lista, use o Checkbox.

Simples, não?