Das Kontrollkästchen ist eine Art Eingabeelement, das in HTML verfügbar ist und es Benutzern ermöglicht, es zu aktivieren oder deaktiviert zu lassen, und es Benutzern ermöglicht, die auf der Webseite angezeigte Option zu aktivieren oder zu deaktivieren. Das Kontrollkästchen ermöglicht es einer Anwendung, Eingaben zur Auswahl in Form eines Felds anzuzeigen und bietet dem Benutzer Zugriff zum Auswählen oder Abwählen der angezeigten Option. Das HTML-Kontrollkästchen kann für die Benutzerauswahl in Form einer Ja/Nein-Anweisung oder einer Zustimmungserklärung verwendet werden. Abhängig von diesem Wert können unterschiedliche Funktionalitäten erreicht werden.
Syntax:
Genau wie bei anderen Eingabetypparametern ändern wir im Fall eines Kontrollkästchens den Eingabetyp in ein „Kontrollkästchen“.
<input type = "checkbox">
Genau wie bei anderen Eingabetypen können wir der Syntax zusätzliche Parameter hinzufügen.
Funktion des HTML-Kontrollkästchen-Tags
Im Folgenden finden Sie Beispiele für HTML-Kontrollkästchen-Tags:
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>Ausgabe:
Hier haben wir zwei Eingabeelemente als Checkbox 1 und Checkbox 2 auf der Webseite deklariert. Wir haben beim Klicken auf ein Kontrollkästchen keine Maßnahmen ergriffen.
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>Ausgabe:
Dieses Beispiel zeigt, wie wir mehrere Kontrollkästchen-Eingabeelemente gleichzeitig erstellen können. Hier haben wir insgesamt vier Checkbox-Elemente zur Auswahl der Sprachen erstellt. Beachten Sie, dass wir mehr als ein Kontrollkästchen gleichzeitig aktivieren können. Dies steht im Gegensatz zur Optionsfeldeingabe, bei der nur eine Option aus allen angezeigten Elementoptionen ausgewählt werden kann.
Wie aus den bisherigen Beispielen hervorgeht, ist das Kontrollkästchen beim Laden einer Webseite deaktiviert. Wenn wir ein Kontrollkästchen mit aktiviertem Standardwert anzeigen möchten, können wir das „checked“-Attribut mit dem checkbox-Element verwenden.
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>Ausgabe:
Hier haben wir aus vier Kontrollkästchenelementen zwei Kontrollkästchen erstellt, die standardmäßig als aktiviert geladen werden. Beachten Sie, dass die ersten beiden Sprachen standardmäßig aktiviert sind.
Eine andere Möglichkeit, das Kontrollkästchen zu verwenden. Es wird in HTML-Form hinzugefügt und wir werden sehen, wie wir erkennen können, ob ein Kontrollkästchen aktiviert ist.
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>Ausgabe:
Hier haben wir Kontrollkästchenelemente in ein Formularelement eingefügt. Dies ist nützlich, um den Wert des Kontrollkästchens auf dem Server zu verarbeiten. Die Übermittlung umfasst die Kontrollkästchenwerte, wenn das Formular an den Server gesendet wird. Der URL-Wert wird durch die Kombination des Kontrollkästchennamens und des Wertattributs im Kontrollkästchenelement generiert.
Wenn in unserem Fall beispielsweise beide Kontrollkästchen als aktiviert gesendet werden, enthält die URL „checkbox1=Yes&checkbox2=Yes“.
Ein Eingabeelement namens Kontrollkästchen ermöglicht es Benutzern, eine ihnen in HTML angezeigte Option auszuwählen oder die Auswahl aufzuheben. In diesem Artikel haben wir mehrere Anwendungsfälle desselben gesehen.
Das obige ist der detaillierte Inhalt vonHTML-Kontrollkästchen-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
