Balise de case à cocher HTML

La case à cocher est un type d'élément de saisie disponible en HTML qui permet aux utilisateurs de la cocher ou de la laisser décochée et permet aux utilisateurs de sélectionner ou de désélectionner l'option affichée sur la page Web. La case à cocher permet à une application d'afficher l'entrée pour la sélection sous la forme d'une boîte et fournit à l'utilisateur l'accès pour sélectionner ou désélectionner l'option affichée. La case à cocher HTML peut être utilisée pour la sélection de l'utilisateur sous la forme d'une déclaration oui/non ou d'une déclaration de type accord ; en fonction de cette valeur, différentes fonctionnalités peuvent être obtenues.

Syntaxe :

Tout comme pour les autres paramètres de type d'entrée, nous changerons le type d'entrée en « case à cocher » dans le cas d'une case à cocher.

<input type="checkbox">

Tout comme les autres types d'entrée, nous pouvons ajouter des paramètres supplémentaires dans la syntaxe.

Fonction de la balise de case à cocher HTML

• La balise de case à cocher HTML attribue une valeur vraie ou fausse à l'élément d'entrée en tant que paramètre « coché ».
• Lorsque nous cliquons sur la case à cocher, cela modifie la valeur de cet élément comme vrai ou faux, qui peut être utilisé davantage pour la vérification.

Exemples de balise de case à cocher HTML

Vous trouverez ci-dessous des exemples de balises de cases à cocher HTML :

Exemple n°1 – Créez une case à cocher simple.

Code :

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare input box with type as checkbox, we have also assigned name to this element-->
Checkbox 1 <input type="checkbox" name="checkbox1">

Checkbox 2 <input type="checkbox" name="checkbox2">
<p id="result"> </p>
</div>

Sortie :

Ici, nous avons déclaré deux éléments d'entrée comme Checkbox 1 et Checkbox 2 sur la page Web. Nous n'avons pris aucune mesure en cliquant sur une case à cocher.

Exemple n°2 – Plusieurs éléments de sélection.

Code :

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4 id="Choose-languages"> Choose languages </h4>
<div>
<input type="checkbox" name="English">
<label for="English"> English </label>
</div>
<div>
<input type="checkbox" name="Hindi">
<label for="Hindi"> Hindi </label>
</div>
<div>
<input type="checkbox" name="German">
<label for="German"> German </label>
</div>
<div>
<input type="checkbox" name="French">
<label for="French"> French </label>
</div>
<p id="result"> </p>
</div>

Sortie :

Cet exemple montre comment nous pouvons créer simultanément plusieurs éléments de saisie de cases à cocher. Ici, nous avons créé un total de quatre éléments de case à cocher pour choisir les langues. Notez que nous pouvons cocher plusieurs cases à la fois ; cela contraste avec la saisie par bouton radio, où une seule option peut être choisie parmi toutes les options d'élément affichées.

Exemple n°3 – Attribut vérifié.

Comme observé dans les exemples jusqu'à présent, la case à cocher est décochée lors du chargement d'une page Web. Si nous voulons afficher une case à cocher avec coché par défaut, nous pouvons utiliser l'attribut « coché » avec l'élément checkbox.

Code :

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4 id="Choose-languages"> Choose languages </h4>
<div>
<input type="checkbox" name="English" checked>
<label for="English"> English </label>
</div>
<div>
<input type="checkbox" name="Hindi" checked>
<label for="Hindi"> Hindi </label>
</div>
<div>
<input type="checkbox" name="German">
<label for="German"> German </label>
</div>
<div>
<input type="checkbox" name="French">
<label for="French"> French </label>
</div>
<p id="result"> </p>
</div>

Sortie :

Ici, sur quatre éléments de case à cocher, nous avons créé deux cases à cocher à charger comme cochées par défaut. Notez que les deux premières langues sont affichées comme cochées par défaut.

Exemple n°4 – Case à cocher dans un formulaire HTML.

Une autre façon d'utiliser la case à cocher. Il sera ajouté sous forme HTML, et nous verrons comment identifier si une case à cocher est cochée.

Code :

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<form>
<div>
Checkbox 1 <input type="checkbox" name="checkbox1" id="selected" value="Yes">
</div>
<br>
<div>
Checkbox 2 <input type="checkbox" name="checkbox2" id="selected" value="Yes">
</div>

<div>
<button type="submit"> Submit </button>
</div>
</form>
<p id="result"> </p>
</div>

Sortie :

Ici, nous avons inclus des éléments de case à cocher dans un élément de formulaire. Ceci est utile pour traiter la valeur de la case à cocher sur le serveur. La soumission inclura les valeurs des cases à cocher lors de l'envoi du formulaire au serveur. La valeur de l'URL est générée en combinant le nom de la case à cocher et l'attribut value dans l'élément de la case à cocher.

Par exemple, dans notre cas, lorsque les deux cases sont envoyées comme cochées, l'URL contiendra « checkbox1=Yes&checkbox2=Yes ».

Conclusion

Un élément d'entrée appelé case à cocher permet aux utilisateurs de choisir ou de décocher une option qui leur est présentée en HTML. Dans cet article, nous avons vu plusieurs cas d'utilisation du même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!