Radio Buttons
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 41 de 60.
No HTML, botões de rádio são usados para criar um conjunto de opções mutuamente exclusivas, onde o usuário pode selecionar apenas uma opção do grupo. Os botões de rádio são criados usando a tag <input> com o atributo type definido como "radio".
Aqui está a sintaxe básica para criar um botão de rádio em HTML:
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label><input>: A tag que define o campo de entrada.type="radio": Um atributo que especifica o tipo de entrada como um botão de rádio.id: Um atributo que fornece ao botão de rádio um identificador exclusivo.
name: Um atributo que agrupa botões de rádio. Todos os botões de rádio com o mesmo nome pertencem ao mesmo grupo, e apenas uma opção dentro de um grupo pode ser selecionada por vez.
value: Um atributo que especifica o valor associado ao botão de rádio. Este valor é enviado para o servidor quando o formulário é enviado.
<label>: Uma tag que fornece um rótulo clicável para o botão de rádio. O atributofordo rótulo deve corresponder ao atributoiddo botão de rádio.
Aqui está um exemplo de como criar um grupo de botões de rádio:
<form>
<input type="radio" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label>
<br>
</form>Neste exemplo, temos um formulário com três botões de rádio, todos pertencentes ao mesmo grupo porque compartilham o mesmo atributo name ("mygroup"). Cada botão de rádio possui um id e value únicos, e um rótulo correspondente. Quando o usuário seleciona uma dessas opções e envia o formulário, o valor do botão de rádio selecionado será enviado para o servidor.
Desafio
FácilCrie um documento HTML que inclua um formulário com um grupo de botões de rádio (radio buttons). O formulário deve ter os seguintes elementos:
- Um grupo de três botões de rádio com o name "color".
- O primeiro botão de rádio deve ter o id "red", o value "red", e um rótulo (label) com o texto "Red".
- O segundo botão de rádio deve ter o id "green", o value "green", e um rótulo (label) com o texto "Green".
- O terceiro botão de rádio deve ter o id "blue", o value "blue", e um rótulo (label) com o texto "Blue".
- Adicione uma tag
<br>após cada label para criar uma quebra de linha.
Folha de consulta
Botões de rádio (Radio buttons) criam opções mutuamente exclusivas onde apenas uma pode ser selecionada de um grupo. Use <input type="radio"> com atributos name correspondentes para agrupá-los.
Sintaxe básica do botão de rádio:
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>Atributos principais:
type="radio": Especifica a entrada como um botão de rádioid: Identificador único para o botão de rádioname: Agrupa os botões de rádio (mesmo nome = mesmo grupo)value: Valor enviado quando o formulário é submetidofor: Vincula o rótulo (label) ao botão de rádio usando o id
Exemplo de um grupo de botões de rádio:
<form>
<input type="radio" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label>
</form>Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<!-- Escreva o código aqui -->
</body>
</html>Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de Cabeçalho9Formulários e Inputs Parte 2
Radio ButtonsCheckboxesDropdownsBotõesBotões em FormuláriosRecapitulação - Formulários #1Recapitulação - Formulários #2