Este artigo o guiará na criação de um botão de opção 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 opção em HTML, siga a sintaxe abaixo:
< entrada modelo = 'rádio' nome = '' valor = '' >
Aqui está a descrição da sintaxe declarada:
- “ modelo ”: 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 opção, 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 opção.
- “ valor ”: Especifica o valor que será enviado ao servidor quando o botão de rádio estiver marcado como marcado.
Exemplo: Adicionando um Botão de Rádio em HTML
Este exemplo discutirá o procedimento de adicionar um botão de opção em HTML usando o botão de opção de entrada. Dentro
Passo 1: Criando Arquivo HTML
Primeiro, adicione uma tag
Dentro do
- Primeiro, adicione o “ ” para dar um título à página.
- Então uma ' ” para um parágrafo ou linha de texto.
- Depois disso, a tag de entrada é adicionada com um atributo “ modelo 'ter valor' rádio ”, o nome é definido como selecionar e “ valor ' Como ' vermelho ”. Valores diferentes são atribuídos a cada botão de opção com o mesmo nome. O mesmo nome representa o mesmo grupo ou lista.
- Se você deseja adicionar um botão marcado por padrão como marcado, atribua o atributo “ verificado ” para esse botão.
- Por último, o “
” elemento em cada botão de opção é utilizado para adicionar legendas. Também oferece melhor acessibilidade.
O código abaixo é a interpretação do cenário acima:
< h1 > Botão de Rádio HTML h1 >< p > Qual é a sua cor favorita? p >
< entrada modelo = 'rádio' nome = 'selecione a cor' valor = 'vermelho' verificado >
< etiqueta por = 'rádio1' > Vermelho etiqueta >
< br >
< entrada modelo = 'rádio' nome = 'selecione a cor' valor = 'azul' >
< etiqueta por = 'rádio1' > Azul etiqueta >
< br >
< entrada modelo = 'rádio' nome = 'selecione a cor' valor = 'verde' >
< etiqueta por = 'rádio1' > Verde etiqueta >
< br >
< entrada modelo = 'rádio' nome = 'selecione a cor' valor = 'roxo' >
< etiqueta por = 'rádio1' > Roxo etiqueta >
< br >
< entrada modelo = 'rádio' nome = 'selecione a cor' valor = 'outros' >
< etiqueta por = 'rádio1' > Outros etiqueta >
Pode-se ver que os botões de opção foram criados com sucesso:
Você também pode aplicar estilos ao botão de opção criado acima seguindo o código CSS mencionado abaixo.
Etapa 2: aplicando estilo ao HTML
O ' div ” indica a tag div que criamos no arquivo HTML:
- Primeiro, o “ cor de fundo ” propriedade é definida como “ #8197f0 ”.
- “ fronteira ” propriedade é definida como “ 5px pontilhado #13023a ”, onde 5px representa a largura da borda, pontilhado indica o tipo de linha e próximo indica a cor da borda.
- “ preenchimento ” é definido como “ 20px 100px ” onde 20px especifica o preenchimento da parte superior e inferior e 100px indica o preenchimento da esquerda e da direita.
- Para estilo de fonte, atribua o “ família de fontes ” valor da propriedade como “ cursiva ”.
CSS
div {cor de fundo: #8197f0;
borda: 5px pontilhada nº 13023a;
preenchimento: 20px 100px;
tamanho da fonte: 20px;
família da fonte: cursiva;
}
Pode ser visto que o elemento div foi estilizado com sucesso:
É isso! Explicamos em detalhes sobre o botão de opção HTML.
Conclusão
Um botão de opção é uma entrada que sempre aparece em grupos de duas ou mais opções. Deste grupo, o usuário pode selecionar apenas uma opção. Em HTML, um botão de rádio pode ser criado usando o “