Les cases à cocher sont des composants d'entrée qui contiennent des valeurs booléennes. En utilisant, l'utilisateur peut sélectionner plusieurs options dans une liste d'options. Lors du développement d'un site Web, l'ajout d'une case à cocher est une excellente option si vous souhaitez que vos visiteurs sélectionnent plusieurs éléments dans un menu. Cependant, les cases à cocher fonctionnent en face des boutons radio, qui ne permettent qu'un seul choix d'une liste.

Afin de modifier l'état de la case à cocher de non contrôlé à cocher, l'utilisateur devrait interagir avec lui.

Ce manuel vous guidera sur la case à cocher HTML, ses états et la syntaxe et démontrera un exemple pratique lié à l'ajout d'une case à cocher dans HTML.

Quels sont les états de la boîte à cocher dans HTML?

La case à cocher a trois états possibles:

• vrai: Cet état indique que la case à cocher est cochée.
• FAUX: Cet état indique que la case à cocher n'est pas cochée.
• mixte: Que la case à cocher soit cochée ou non n'est pas définie.

Syntaxe

Dans HTML, la balise est utilisée pour ajouter des éléments d'entrée. Pour une case à cocher, définissez le type d'entrée comme «cocher".

Syntaxe

Passons à l'exemple pratique, dans lequel nous créerons une case à cocher. Alors, commençons.

Exemple: ajout d'une case à cocher dans HTML

Dans le HTML, nous créerons un conteneur et attribuerons le nom de classe comme «div". À l'intérieur de la balise, nous ajouterons une rubrique en utilisant le

. Après cela, créez un sous-div pour ajouter des cases et des étiquettes.

Ici, nous utiliserons la balise pour définir l'étiquette de la case à cocher et la balise pour ajouter l'élément d'entrée. Ensuite, définissez le type d'entrée comme «cocher"Après avoir fermé l'étiquette de, nous ajouterons la balise de pause
Tag pour définir la case à cocher dans la ligne suivante de l'écran d'affichage. Ici, nous avons ajouté Ajouter quatre cases à cocher:

Type d'entrée "Box"

Les pays que vous souhaitez visiter:


Espagne


Turquie


Japon


Chine

Vous pouvez voir que la boîte à cocher Type d'entrée a créé avec succès:

Vous pouvez également styliser le «cocher”En suivant la syntaxe fournie ci-dessous.

Étape 1: Style Div

Ici, nous utiliserons ".div«Pour accéder au conteneur créé en HTML et régler sa hauteur comme«250px". Ensuite, utilisez le «Couleur de l'arrière plan”Propriété pour définir la couleur d'arrière-plan de la div et attribuer la valeur de la couleur comme«RVB (185, 255, 176)". Ensuite, style le div en utilisant le «frontière”Propriété pour placer la frontière autour du div. La largeur de la frontière est «5px"Style comme"en pointillé"Et la couleur comme"RVB (24, 58, 20)".

CSS

.div
hauteur: 250px;
Contexte: RVB (185, 255, 176);
Border: 5px RVB en pointillé (24, 58, 20);

On peut voir que le conteneur est des styles avec succès:

Étape 2: boîte à cocher Style

Maintenant, nous allons utiliser "saisir«Pour accéder à l'entrée créée dans HTML. Ensuite, utilisez le «marge-gauche”Propriété pour définir la marge du côté gauche de la case à cocher et définir la valeur comme«30px". Pour régler la marge inférieure, utilisez le «marge-fond»Propriété et définissez la valeur comme«15px»:

saisir
marge-gauche: 30px;
marge-fond: 15px;

L'image fournie ci-dessous signifie que la valeur de propriété de marge ajoutée est appliquée avec succès aux cases à cocher:

C'est ça! Nous avons expliqué en détail le type d'entrée "cocher".

Conclusion

UN "cocher"Est un élément de type d'entrée de HTML qui permet à l'utilisateur de choisir entre deux ou plusieurs options possibles. Il permet à l'utilisateur de choisir plusieurs valeurs à partir d'une liste prédéfinie. Une case à cocher a trois états: vrai, faux et mixte. Dans ce guide, nous avons expliqué la case à cocher Type d'entrée en détail et avons fourni un exemple lié à l'ajout d'un champ de saisie et à le styliser.