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.