Menu
Coddy logo textTech

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 atributo for do rótulo deve corresponder ao atributo id do 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.

challenge icon

Desafio

Fácil

Crie 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:

  1. Um grupo de três botões de rádio com o name "color".
  2. O primeiro botão de rádio deve ter o id "red", o value "red", e um rótulo (label) com o texto "Red".
  3. O segundo botão de rádio deve ter o id "green", o value "green", e um rótulo (label) com o texto "Green".
  4. O terceiro botão de rádio deve ter o id "blue", o value "blue", e um rótulo (label) com o texto "Blue".
  5. 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ádio
  • id: Identificador único para o botão de rádio
  • name: Agrupa os botões de rádio (mesmo nome = mesmo grupo)
  • value: Valor enviado quando o formulário é submetido
  • for: 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>
quiz iconTeste seus conhecimentos

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