Os botões de rádio são usados para permitir aos usuários escolher uma opção de uma lista de opções. Para ser possível fazer esse tipo de formulário, primeiro iremos precisar de dar nome aos campos.
html<p>Escolha a cidadania</p>
<p>
Inglês: <input type="radio" name="citizenship" /><br />
Romeno: <input type="radio" name="citizenship" /><br />
Espanhol: <input type="radio" name="citizenship" />
</p>
Escolha a cidadania
Inglês:
Romeno:
Espanhol:
Especificar o nome de uma categoria a qual o formulário faz parte mostrará ao navegador como fazer a diferença entre mais de um botão de rádio do grupo, permitindo escolher uma unica variante de cada grupo e formulário.
Exemplo avançado:
html<p>Escolha a cidadania</p>
<p>
Inglês: <input type="radio" name="citizenship" /><br />
Romeno: <input type="radio" name="citizenship" /><br />
Espanhol: <input type="radio" name="citizenship" />
</p>
<p>Escolha o sexo</p>
<p>
Homem: <input type="radio" name="sex" /><br />
Mulher: <input type="radio" name="sex" />
</p>
Escolha a cidadania
Inglês:
Romeno:
Espanhol:
Escolha o sexo
Homem:
Mulher:
Assim como os checkboxes, os botões de rádio podem vir selecionados para agilizar o trabalho do usuário.
html<p>Escolha a cidadania</p>
<p>
Inglês: <input type="radio" name="citizenship" checked="yes" /><br />
Romeno: <input type="radio" name="citizenship" /><br />
Espanhol: <input type="radio" name="citizenship" />
</p>
Escolha a cidadania
Inglês:
Romeno:
Espanhol:
Qualquer das opções pode ser selecionada, não necessariamente a primeira. É bom usar esse método (de pré-seleção de certos botões) com moderação e apenas quando a informação não é de tanta importância. É possivel que o usuário, por conforto ou inatenção, escolha a alternativa já selecionada sem ser a correta para ele naquele caso.