Elemente in HTML bilden
Die HTML -Formelemente helfen dabei, ein Formular mit verschiedenen Funktionen zu erstellen. Ein Eingangsformular enthält Eingabe, Ausgabe, Schaltfläche, Select, TextArea, Etikett, Datalist, Fieldsetetc,. Unter diesen ist das Eingabe -Tag das am häufigsten verwendete Element und wird als Kernteil einer HTML -Form angesehen. Während andere Formelemente ihre eigene Funktionalität haben. In Anbetracht der Formelemente dient dieser Artikel die folgenden Lernergebnisse.
- Grundlegende Informationen und Verwendung jedes Formularelements
- Verschiedene Beispiele für jedes Element
Elemente in HTML bilden
Dieser Abschnitt enthält eine Liste verschiedener Formelemente, die eine Schlüsselrolle bei der Generierung von Formularen spielen. Lassen Sie uns nacheinander in sie eingraben:
Eingabeelement
Dieses Element wird als Kernelement von HTML -Formen angesehen und es ist unmöglich, eine Form zu verfolgen, die kein Eingabeelement enthält. Die Funktionalität von Eingabelementen hängt von der Menge der von ihnen unterstützten Attribute ab. Zum Beispiel definiert das Typ-Attribut den Typ (Textbox, Radio-Button, Kontrollkästchen) des Eingangsfeldes.
Beispiel
Verwenden von HTML -Code erstellen die folgenden Codezeilen ein Textfeld mit dem Eingabeelement.
Neben dem Eingabeelement haben wir ein Attribut (Platzhalter) des Eingabeelements verwendet.
Ausgang
Die Ausgabe zeigt, dass das Textfeld mit dem Eingabeelement erstellt wird. Da wir das Platzhalterattribut verwendet haben, wird der Dummy -Text auch im Textfeld angezeigt.
Etikettelement
Das Etikettelement definiert den Zweck verschiedener Formelemente für die Endbenutzer. Ein Etikettelement kann mithilfe der folgenden Syntax deklariert werden.
Wie die meisten HTML -Elemente wird der Inhalt für das Etikettelement zwischen den Tags geschrieben.
Beispiel:
Die Verwendung des Etikettelements wird mit dem folgenden Code ausgearbeitet.
Ein Etikett wird erstellt, um es mit einem Textfeld zu verknüpfen, das den Namen des Benutzers erhält. Der Für Attribut (von Labelelement) und ID (des Eingabeelements) Muss die gleichen Werte haben, damit sie zusammen binden können.
Ausgang
Die Ausgabe enthält ein Etikett, mit dem Sie Ihren Namen in das Textfeld eingeben können.
Element auswählen
Das Auswahlelement erstellt eine Dropdown -Liste verschiedener Optionen. Das Element generiert mehrere Auswahlmöglichkeiten in einer Dropdown -Liste.
Beispiel
Der folgende Code übt das Element aus, um eine Dropdown -Liste zu erstellen.
Der obige Code wird als beschrieben als,
- Erstens wird ein Etikett-Tag deklariert (nur um den Endbenutzer zu leiten).
- Das Select -Tag ist definiert und enthält drei Options -Tag
Ausgang
Die Ausgabe zeigt ein Etikett, ein Dropdown -Menü und eine Schaltfläche.
Textbereichselement
Das Textbereichselement erstellt ein Textfeld, mit dem mehrere Zeilen geschrieben werden können. Das Eingabeelement kann jedoch ein Textfeld erstellen, es unterstützt jedoch nur Einzelzeileneingänge.
Beispiel
Der unten angegebene Code zeigt die Verwendung des Textbereichselements
Der obige Code erstellt eine Beschriftung für ein Textfeld und das Textfeld mit dem Textbereichselement. Zunächst wird die Standardhöhe und die Breite des Textbereichselements ausgeübt. Sie können jedoch das Attribut zur Höhe und Breite verwenden, um die benutzerdefinierte Größe eines Textbereichselements zu erhalten.
Ausgang
Tastenelement
Eine vergleichbare Schaltfläche kann mit dem Schaltflächenelement der HTML -Formulare erstellt werden.
Beispiel
Der unten geschriebene Code übt das Schaltflächenelement aus
Der oben geschriebene Code erstellt zwei Schaltflächen mit den Schaltflächenelementen.
Ausgang
Fieldset -Element
Dieses Element wird verwendet, um die mehreren Elemente einer Form in ein einzelnes Feld zu gruppieren.
Beispiel
Der obige Code erstellt ein Felderset, das das Feldersetelement in HTML verwendet, und seine Bildunterschrift wird unter Verwendung des Legendelements definiert. Das Fieldset -Element enthält zwei Eingabeelemente, die den Namen und die E -Mail des Benutzers erhalten.
Ausgang
Datalistisches Element
Das Datalist -Element erweitert die Funktionalität des Eingabeelements. Das Datalist-Element bietet Ihnen eine Liste vordefinierter Einträge, um den Eintrag aus ihnen auszuwählen (oder Sie können auch Ihren eigenen Wert eingeben).
Beispiel
Der nachstehend angegebene Code übt die Verwendung des Datalistenelements aus
Im obigen Code,
- Es wird eine Eingabeliste erstellt und dann das Datalistelement deklariert
- In dem Datalist -Element wird das Tag verwendet, um Optionen für das Datalist -Element zu erstellen.
Ausgang
Ausgabeelement
Dieses Element wird verwendet, um die Ausgabe jeder Aktion anzuzeigen (Formulareingabe).
Beispiel
Der folgende Code übt das Ausgabeattribut aus, um die Summe von zwei Zahlenfeldern zu erhalten.
Im obigen Code,
- zwei Eingangstypen = ”Nummer”Sind definiert mit IDs A und B bzw
- Die Ausgang Element berücksichtigt beide IDs für die Verarbeitung
- Die aufInput Das Ereignis des Formularelements fügt sowohl die Zahl hinzu (wenn sie eingefügt werden)
Ausgang
Durch den Durchgang dieses Artikels hätten Sie gelernt, eine fokussierte HTML -Form zu erstellen.
Abschluss
Die Formularelemente sind der wichtigste Stakeholder bei der Erstellung einer detaillierten Form. Die Formularelemente umfassen Eingabe, Etikett, TextArea, Schaltfläche und vieles mehr. In diesem Artikel werden die Formularelemente in HTML aufgeführt, und ein Beispiel für jedes Element wird ebenfalls bereitgestellt. Eine einfache HTML. Wenn Sie jedoch ein Formular mit detaillierten Funktionen wünschen, werden in diesem Leitfaden zahlreiche HTML -Formelemente zur Verfügung gestellt.