Kontrollkästchen sind Eingangskomponenten, die die Booleschen Werte halten. Mit der Verwendung kann der Benutzer mehrere Optionen aus einer Liste von Optionen auswählen. Bei der Entwicklung einer Website ist das Hinzufügen eines Kontrollkästchens eine hervorragende Option, wenn Sie möchten, dass Ihre Besucher mehrere Elemente aus einem Menü auswählen. Kontrollkästchen funktionieren jedoch gegenüber Optionshintergrund, die nur eine Auswahl aus einer Liste ermöglichen.

Um den Status des Kontrollkästchens von deaktiviert auf Überprüfung zu ändern, müsste der Benutzer damit interagieren.

In diesem Handbuch führen Sie das HTML -Kontrollkästchen, seine Zustände und die Syntax und demonstrieren ein praktisches Beispiel zum Hinzufügen eines Kontrollkästchens in HTML.

Was sind die Zustände des Kontrollkästchen in HTML?

Das Kontrollkästchen enthält drei mögliche Zustände:

• WAHR: Dieser Status zeigt an, dass das Kontrollkästchen überprüft wird.
• FALSCH: Dieser Status zeigt an, dass das Kontrollkästchen nicht überprüft wird.
• gemischt: Ob das Kontrollkästchen aktiviert ist oder nicht, ist undefiniert ist.

Syntax

In HTML wird das Tag zum Hinzufügen von Eingangselementen verwendet. Setzen Sie für ein Kontrollkästchen den Eingangstyp als “Kontrollkästchen”.

Syntax

Wechseln wir zum praktischen Beispiel, in dem wir ein Kontrollkästchen erstellen. So lass uns anfangen.

Beispiel: Hinzufügen eines Kontrollkästchen in HTML

In der HTML erstellen wir einen Container und weisen den Klassennamen als “zu“ zudiv”. Innerhalb des Tags werden wir mit dem eine Überschrift hinzufügen

. Erstellen Sie danach einen Unter-DIV, um Kontrollkästchen und Beschriftungen hinzuzufügen.

Hier verwenden wir das Tag, um das Beschriftung des Kontrollkästchens und das Tag zu setzen, um das Eingabeelement hinzuzufügen. Setzen Sie als nächstes den Eingangstyp als "KontrollkästchenNach dem Schließen des Tags von werden wir das Break -Tag hinzufügen
Tag einstellen, um das Kontrollkästchen in der nächsten Zeile des Anzeigebildschirms festzulegen. Hier haben wir vier Kontrollkästchen hinzugefügt:

Eingabetyp "Kontrollkästchen"

Die Länder, die Sie besuchen möchten:


Spanien


Truthahn


Japan


China

Sie können sehen, dass das Eingangstyp -Kontrollkästchen erfolgreich erstellt wurde:

Sie können auch die “stylen“Kontrollkästchen”Durch die folgende Syntax folgen.

Schritt 1: Stil Div

Hier werden wir verwenden “.div"Um auf den erstellten Container in HTML zuzugreifen und seine Höhe als" festlegen "festlegen250px”. Verwenden Sie als nächstes die “Hintergrundfarbe”Eigenschaft, um die Hintergrundfarbe des DIV festzulegen und den Wert der Farbe als“ zuzuweisen “RGB (185, 255, 176)”. Dann stylen Sie die DIV mit dem “Grenze”Eigentum, um die Grenze rund um die Div zu setzen. Die Breite der Grenze ist “5px"Stil als"gestrichelt"Und Farbe als"RGB (24, 58, 20)”.

CSS

.div
Höhe: 250px;
Hintergrund: RGB (185, 255, 176);
Grenze: 5PX gestrichelt RGB (24, 58, 20);

Es ist ersichtlich, dass der Container erfolgreich Stile ist:

Schritt 2: Style Checkbox

Jetzt werden wir verwenden “Eingang”Zugreifen auf die in HTML erstellte Eingabe. Verwenden Sie als nächstes die “linksEigenschaft, um die Marge von der linken Seite des Kontrollkästchens einzustellen und den Wert als "30px”. Verwenden Sie zum Einstellen des unteren Randes die “RandbodenEigenschaft und setzen Sie den Wert als "15px”:

Eingang
Rand-Links: 30px;
Randboden: 15px;

Das untergegebene Bild bedeutet, dass der hinzugefügte Margin-Eigenschaftswert erfolgreich auf die Kontrollkästchen angewendet wird:

Das ist es! Wir haben im Detail über den Eingangstyp erklärt “Kontrollkästchen”.

Abschluss

A "KontrollkästchenIst ein Eingangstypelement von HTML, mit dem der Benutzer zwischen zwei oder mehr möglichen Optionen auswählen kann. Es ermöglicht dem Benutzer, mehrere Werte aus einer vordefinierten Liste auszuwählen. Ein Kontrollkästchen hat drei Zustände: wahr, falsch und gemischt. In diesem Handbuch haben wir das Kontrollkästchen Eingabetyp im Detail erläutert und ein Beispiel zum Hinzufügen eines Eingabebuchs und zum Styling angegeben.