Einer der primären Zwecke bei der Verwendung von HTML ist das Erstellen von Webformen. Diese Webformulare sind zum Sammeln der erforderlichen Informationen vom Benutzer gedacht. Sie können kurze oder lange Frage enthalten, Antworten, Aktionsschaltflächen, Optionsfelder, Dropdown -Listen, Kontrollkästchen usw. In Bezug auf dieses Tutorial wird es dann hauptsächlich den Zweck und die Verwendung der Kontrollkästchen in HTML erörtert.

Zweck von Kontrollkästchen in HTML

Die Kontrollkästchen und Optionsfelder werden beide verwendet, um mehrere Optionen für den Benutzer auszuwählen. Man könnte sich jedoch fragen, wo sich diese beiden HTML -Elemente dann unterscheiden? Nun, ein Optionsfeld wird immer in Situationen verwendet. Andererseits wird ein Kontrollkästchen verwendet, wenn der Benutzer ermöglicht, mehr als eine Option zu wählen. Wenn Sie daher die maximal mögliche Auswahl aus der angegebenen Liste herausholen möchten, verwenden Sie immer die Kontrollkästchen in HTML. Um diese Verwendung ausführlich zu verstehen, müssen Sie den nächsten Abschnitt dieses Tutorials lesen.

HTML -Code zum Erstellen von Kontrollkästchen

Sie können Checkboxen in HTML sehr schnell erstellen. Alles, was Sie tun müssen, ist, den beiden folgenden Beispielen zu verfolgen, um diesen Hack zu erlernen:

Beispiel 1: Abrufen der Besetzung einer Person

Wir haben bereits erwähnt, dass die Kontrollkästchen in HTML und jede andere Sprache immer verwendet werden, wenn Sie die Freiheit haben, mehr als eine Option zu wählen. In diesem Szenario werden wir daher ein HTML -Skript entwerfen, um die Besetzung einer Person zu holen. Jetzt kann diese Person entweder ein „Schüler“, ein „Lehrer“ oder beides sein. Bei der letzten Option möchten wir der Person die Freiheit geben, beide Kontrollkästchen gleichzeitig auszuwählen. Um solche Funktionen zu entwickeln, haben wir das folgende HTML -Skript entworfen:

Nachdem wir die Anweisung der Dokumenttyp -Deklaration verwendet haben, haben wir die Tags „“ und „“ verwendet, damit wir unser HTML -Skript schreiben können. Dann haben wir die "benutzt"

Header Flag zum Angeben der Überschrift unserer Webseite. Es folgt das Flag „Eingabetyp“, mit dem wir mitgeteilt haben, dass wir ein Kontrollkästchen in HTML erstellen werden. Dann haben wir für dieses Kontrollkästchen eine "ID" und "Name" erstellt. Wir haben diesem Kontrollkästchen auch ein Etikett zugewiesen. Danach haben wir das "Label" -Tag verwendet, um das Etikett gegen jede unserer HTML -Kontrollkästchen zu erwähnen. Auf die gleiche Weise haben wir das andere Kontrollkästchen entworfen. Danach haben wir auch eine Schaltfläche „Senden“ erstellt, nur um das Erscheinen unserer Webseite schön zu machen.

Nach dem Speichern und Ausführen dieses HTML -Skripts mit Google Chrome wurde die im Bild unten angezeigte Webseite in unserem Browser angezeigt:

Jetzt dürfen Sie so viele Optionen auf dieser Webseite auswählen, wie Sie möchten. Im folgenden Bild haben wir nur eine der beiden Kontrollkästchen ausgewählt.

In dem unten gezeigten Bild haben wir beide Kontrollkästchen ausgewählt.

Um die Funktionalität dieses HTML -Skripts zu verbessern, können Sie sogar eine Aktionsseite mit PHP entwerfen.

Beispiel 2: Auswählen des Lieblingsgeschmacks von Milchshake:

Manchmal können Sie sogar eine sehr einfache Webseite entwerfen, während Sie die HTML -Kontrollkästchen ohne Aktionschaltflächen verwenden. Zum Beispiel möchten Sie dem Benutzer möglicherweise einfach ein paar Kontrollkästchen vorstellen, um seinen Lieblingsgeschmack von Milchshake auszuwählen. Sie möchten jedoch nicht, dass er nach dieser Auswahl etwas weiter tut. Solche Fälle sind sehr selten. Normalerweise bitten Sie den Benutzer, nach der Auswahl eine Aktion zu ergreifen, z. B. Klicken auf eine Schaltfläche. Trotzdem möchten wir Ihnen immer noch ein solches Beispiel zeigen. Um dieses Beispiel zu veranschaulichen, haben wir das folgende HTML -Skript für Sie entworfen:

In diesem HTML -Skript sind die wesentlichen Wesentlichen des Skripts: Die Deklaration vom Dokumenttyp, die „“ und die „“ -Tags sind gleich und ihre Zwecke sind ebenfalls genau die gleichen, wie wir in unserem ersten Beispiel beschrieben haben. Dann haben wir ein Absatz -Tag verwendet, um dem Benutzer eine Nachricht anzuzeigen. Ein Benutzer kann bequem mehr als einen Geschmack seiner Wahl wählen, wenn er/ sie will. Dann haben wir die Beschriftungen für diese Kontrollkästchen definiert, gefolgt von der jeweiligen Erklärung der Kontrollkästchen. Sie müssen hier bemerken, dass wir dieses Mal das HTML -Tag -Tag nicht verwendet haben. Vielmehr haben wir gerade die Etiketten so definiert, wie es ist. Dies bedeutet, dass Sie eine weitere Möglichkeit sind, wie Sie Labels für Ihre Kontrollkästchen erstellen können, nur um Ihr HTML -Skript zu vereinfachen. Nachdem wir dieses Skript vollständig geschrieben haben, haben wir diese Notepad -Datei einfach mit der "gespeichert" gespeichert.HTML ”Erweiterung, damit sie leicht mit jedem Browser unserer Wahl ausgeführt werden kann.

Wir haben dieses HTML -Skript ausgeführt, während wir Google Chrome verwendet haben, und es wurde die im Bild unten gezeigte Webseite in unserem Browser angezeigt:

Jetzt können Sie bequem so viele dieser Kontrollkästchen wie gewünscht auswählen. Dies wird im folgenden Bild angezeigt:

Abschluss

Mit diesem Tutorial wollten wir die Verwendung der HTML -Kontrollkästchen auf die einfachste Weise mit Ihnen teilen. Dafür haben wir Sie zum ersten Mal in den grundlegenden Zweck dieses HTML -Elements vorgestellt. Danach haben wir Ihnen zwei verschiedene Beispiele erklärt, die dieses HTML -Element verwendet haben. Wenn Sie diese Erklärungen durchlaufen, können Sie die HTML -Kontrollkästchen problemlos verwenden, wenn Sie Ihren Benutzern die Flexibilität zur Auswahl von mehr als eine Option aus einer bestimmten Liste von Optionen zur Verfügung stellen möchten.