Um botão de rádio é um elemento interativo no HTML, que pode ser criado usando o “”Tag tendo o tipo de atributo com o valor“rádio”. Os usuários podem selecionar uma opção na lista fornecida. Esse botão geralmente é usado onde apenas uma opção deve ser selecionada em diferentes cenários, como seleção de gênero, seleção de grupos de sangue e muito mais.

Este artigo o guiará a criar um botão de rádio HTML com a ajuda de um exemplo prático.

Como adicionar um botão de rádio em html?

Para adicionar um botão de rádio no HTML, siga a sintaxe abaixo:

Aqui está a descrição da sintaxe declarada:

• ““tipo”: Este atributo especifica que tipo de entrada você deseja criar, como texto, rádio, caixa de seleção e muito mais. Para criar um botão de rádio, o valor do atributo deve ser definido como "rádio".
• ““nome”: Define o nome do elemento de entrada. Este atributo deve ser o mesmo para a lista de botões de rádio.
• ““valor”: Isso especifica o valor que será enviado ao servidor quando o botão de rádio estiver marcado como verificado.

Exemplo: Adicionando um botão de rádio em HTML

Este exemplo discutirá o procedimento de adicionar um botão de rádio em html usando o botão de rádio de entrada. Em

Etapa 1: Criando o arquivo HTML

Primeiro, adicione uma tag no arquivo html:

Dentro do criado:

• Primeiro, adicione o “

  ”Tag para dar um título para a página.

• Então uma "

  ”Tag para um parágrafo ou linha de texto.

• Depois disso, a tag de entrada é adicionada com um atributo “tipo"Tendo valor"rádio”, O nome é definido como selecionado e“valor" como "vermelho”. Valores diferentes são dados a todos os botões de rádio que têm o mesmo nome. O mesmo nome representa o mesmo grupo ou lista.
• Se você deseja adicionar um botão que seja por padrão marcado como verificado, atribua o atributo “verificado”Para aquele botão.
• Por fim, o “”O elemento em cada botão de rádio é utilizado para adicionar legendas. Também oferece melhor acessibilidade.

O código abaixo é a interpretação do cenário acima:

Botão de rádio HTML

Qual é a sua cor favorita?

Vermelho



Azul



Verde



Roxo



Outros

Pode -se observar que os botões de rádio são criados com sucesso:

Você também pode aplicar estilos ao botão de rádio criado acima, seguindo o código CSS abaixo mencionado.

Etapa 2: Aplicando estilo em HTML

O "div”Indica a tag div que criamos no arquivo HTML:

• Primeiro, o “cor de fundo”A propriedade é definida como“#8197F0”.
• ““fronteira”A propriedade é definida como“5px pontilhado #13023A”, Onde 5px representa a largura da borda, pontilhada indica o tipo de linha e a seguir indica a cor da borda.
• ““preenchimento"É definido como"20px 100px”Onde 20px especifica o preenchimento de cima e inferior e 100px indica o preenchimento da esquerda e direita.
• Para estilo de fonte, atribua o “família de fontes”Valor da propriedade como“cursivo”.

CSS

div
Background-Color: #8197F0;
Fronteira: 5px pontilhado #13023A;
preenchimento: 20px 100px;
Size da fonte: 20px;
Fonte-família: cursiva;

Pode -se observar que o elemento Div é estilizado com sucesso:

É isso! Explicamos em detalhes sobre o botão de rádio HTML.

Conclusão

Um botão de rádio é uma entrada que sempre aparece em grupos de duas ou mais opções. Nesse grupo, o usuário pode selecionar apenas uma opção. No HTML, um botão de rádio pode ser criado usando o “”Tag tendo o tipo de atributo com o valor“rádio”. Este blog demonstrou o método para adicionar botões de rádio em html.