Heim > Artikel > Web-Frontend > HTML-Kontrollkästchen-Tag
HTML-Kontrollkästchen-Tag
- PHPzOriginal
- 2024-09-04 16:30:43412Durchsuche
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
- Das HTML-Kontrollkästchen-Tag weist dem Eingabeelement als Parameter „checked“ einen Wert als wahr oder falsch zu.
- Wenn wir auf das Kontrollkästchen klicken, wird der Wert dieses Elements in wahr oder falsch geändert, was zur weiteren Überprüfung verwendet werden kann.
Beispiele für HTML-Kontrollkästchen-Tags
Im Folgenden finden Sie Beispiele für HTML-Kontrollkästchen-Tags:
Beispiel #1 – Erstellen Sie ein einfaches Kontrollkästchen.
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.
Beispiel #2 – Mehrere ausgewählte Elemente.
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.
Beispiel #3 – Überprüftes Attribut.
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.
Beispiel #4 – Kontrollkästchen im HTML-Formular.
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“.
Fazit
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!