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.

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