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
Vous trouverez ci-dessous des exemples de balises de cases à cocher HTML :
Code :
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> 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" >
</br>
Checkbox 2 <input type = "checkbox" name = "checkbox2" >
<p id = "result"> </p>
</div>
</body>
</html>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.
Code :
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> 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>
</body>
</html>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.
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 :
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> 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>
</body>
</html>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.
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 :
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> 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>
</br>
<div>
<button type = "submit" > Submit </button>
</div>
</form>
<p id = "result"> </p>
</div>
</body>
</html>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 ».
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
