Caixas de seleção são componentes de entrada que mantêm valores booleanos. Usando -o, o usuário pode selecionar várias opções de uma lista de opções. Ao desenvolver um site, adicionar uma caixa de seleção é uma excelente opção se você quiser que seus visitantes selecionem vários itens de um menu. No entanto, as caixas de seleção funcionam opostas aos botões de rádio, que permitem apenas uma opção de uma lista.

Para alterar o estado da caixa de seleção de desmarcado para verificado, o usuário teria que interagir com ele.

Este manual o guiará sobre a caixa de seleção HTML, seus estados e sintaxe e demonstrará um exemplo prático relacionado à adição de uma caixa de seleção em HTML.

Quais são os estados da caixa de seleção em html?

A caixa de seleção tem três estados possíveis:

• verdadeiro: Este estado indica que a caixa de seleção é verificada.
• falso: Este estado indica que a caixa de seleção não está verificada.
• misturado: Se a caixa de seleção está marcada ou não, está indefinida.

Sintaxe

No HTML, a tag é usada para adicionar elementos de entrada. Para uma caixa de seleção, defina o tipo de entrada como “Caixa de seleção”.

Sintaxe

Vamos passar para o exemplo prático, no qual criaremos uma caixa de seleção. Então vamos começar.

Exemplo: Adicionando uma caixa de seleção em HTML

No HTML, criaremos um contêiner e atribuiremos o nome da classe como “div”. Dentro da tag, adicionaremos um título usando o

. Depois disso, crie um subdiv para adicionar caixas de seleção e etiquetas.

Aqui, usaremos a tag para definir o rótulo da caixa de seleção e a tag para adicionar o elemento de entrada. Em seguida, defina o tipo de entrada como “Caixa de seleção”Depois de fechar a etiqueta, adicionaremos a tag de quebra
tag para definir a caixa de seleção na próxima linha da tela de exibição. Aqui, adicionamos adicionar quatro caixas de seleção:

Tipo de entrada "Caixa de seleção"

Os países que você deseja visitar:


Espanha


Peru


Japão


China

Você pode ver que a caixa de seleção Tipo de entrada criada com sucesso:

Você também pode estilizar o “Caixa de seleção”Seguindo a sintaxe abaixo do dado.

Etapa 1: Div de estilo

Aqui, vamos usar “.div”Para acessar o contêiner criado em HTML e definir sua altura como“250px”. Em seguida, use o “cor de fundo”Propriedade para definir a cor de fundo da div e atribuir o valor da cor como“RGB (185, 255, 176)”. Então, estilize o div usando o “fronteira”Propriedade para definir a fronteira ao redor da div. A largura da fronteira é “5px”Estilo como“tracejadas"E cor como"RGB (24, 58, 20)”.

CSS

.div
Altura: 250px;
Antecedentes: RGB (185, 255, 176);
borda: 5px RGB tracejado (24, 58, 20);

Pode -se observar que o contêiner tem estilos com sucesso:

Etapa 2: caixa de seleção de estilo

Agora, vamos usar “entrada”Para acessar a entrada criada em HTML. Em seguida, use o “margem-esquerda”Propriedade para definir a margem do lado esquerdo da caixa de seleção e definir o valor como“30px”. Para definir a margem inferior, use o “Margin-Bottom”Propriedade e defina o valor como“15px”:

entrada
margem-esquerda: 30px;
Margin-Bottom: 15px;

A imagem abaixo do rumo significa que o valor da propriedade de margem adicionado é aplicado com sucesso às caixas de seleção:

É isso! Explicamos em detalhes sobre o tipo de entrada “Caixa de seleção”.

Conclusão

A "Caixa de seleção”É um elemento do tipo de entrada de HTML que permite ao usuário escolher entre duas ou mais opções possíveis. Permite ao usuário escolher vários valores de uma lista predefinida. Uma caixa de seleção tem três estados: verdadeiro, falso e misto. Neste guia, explicamos a caixa de seleção do tipo de entrada em detalhes e fornecemos um exemplo relacionado à adição de um campo de entrada e ao estilo.