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.
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