No último tópico sobre web introduzi formulários e algo bem comum dentro de formulários é adicionar uma tag de input. No tópico passado criamos inputs do tipo texto e do tipo email, mas há várias opções de inputs e aqui irei detalhar mais algumas.
Lembrando da tag <label>, que é usada para gerar um rótulo, uma label, para algum elemento de input, iremos agora criar botões circulares:
<label>
<input type="radio">Botão 1
</label>
<label>
<input type="radio">Botão 2
</label>
<label>
<input type="radio">Botão 3
</label>
Vejam que rotulei cada botão, disse que o tipo é do tipo "radio", que são botões circulares, e o resultado é o seguinte:
O resultado não foi muito bom. Botões circulares são usados como uma lista de opções no qual só podemos selecionar uma. Da forma que está, selecionando um, outros podem ser selecionados também. E nenhum botão pode ser desmarcado. Resolvemos isso dizendo que os botões estão num grupo único, informando o nome desse grupo com o atributo name:
<label>
<input name="grupo" type="radio">Botão 1
</label>
<label>
<input name="grupo" type="radio">Botão 2
</label>
<label>
<input name="grupo" type="radio">Botão 3
</label>
Agora só podemos escolher um botão da lista:
Uma boa prática é dizer para a label a qual input ela se refere, linkando o input na label usando o atributo "for" na label, que linka com o "id" do input, dessa forma:
<label for="radio1">
<input id="radio1" type="radio" name="grupo">Botão 1
</label>
<label for="radio2">
<input id="radio2" type="radio" name="grupo">Botão 2
</label>
<label for="radio3">
<input id="radio3" type="radio" name="grupo">Botão 3
</label>
O resultado prático fica igual, mas esse link entre rótulo e botão é uma boa prática.
Também podemos dizer para a tag input que queremos um botão do tipo checkbox. Vamos alterar o código acima só modificando o type para checkbox e alterando o nome dos "id's":
<label for="check1">
<input id="check1" type="checkbox" name="grupo">Botão 1
</label>
<label for="check2">
<input id="check2" type="checkbox" name="grupo">Botão 2
</label>
<label for="check3">
<input id="check3" type="checkbox" name="grupo">Botão 3
</label>
E o resultado é o seguinte:
Podemos também já dizer que um dos botões já está selecionado por padrão usando o atributo "checked":
<label for="check1">
<input id="check1" type="checkbox" name="grupo" checked>Botão 1
</label>
<label for="check2">
<input id="check2" type="checkbox" name="grupo">Botão 2
</label>
<label for="check3">
<input id="check3" type="checkbox" name="grupo">Botão 3
</label>
Dessa forma, ao abrir a página, o primeiro botão já está selecionado por padrão.
Vocês podem brincar com as outras possíveis opções de tipo de input pesquisando por aqui:
HTML input tag
