Einführung in HTML-Formularelemente

In den Webentwicklungstechnologien (insbesondere für das Front-End) ist „HTML“ die grundlegende oder primäre Auszeichnungssprache, mit der wir die Webseiten anzeigen (die Seite, die wir auf einer Website sehen). Manchmal müssen wir in einer HTML-Seite neben der anderen Inhaltsanzeige auch einige Benutzereingaben vornehmen (insbesondere in dynamischen Websites). Und um die Benutzereingaben in einer HTML-Seite zu erfassen, müssen wir mehrere Formularelemente verwenden, um diese Formulare ordnungsgemäß zu erstellen. Mithilfe dieser Formulare nehmen wir die Benutzereingaben auf die richtige Art und Weise auf und stellen diese Eingaben (Daten) in unsere internen Datenbanken im Backend. Nun, da wir wissen, dass HTML-Codes unter verschiedenen Tag-Elementen () geschrieben sind, sind „HTML-Formularelemente“ im Grunde diejenigen Elemente, die in einem „“ -Tag verwendet werden. Und diese Elemente zusammen mit anderen Standard- und eindeutigen Attributen ergeben auch eine Form und Struktur, die den Benutzer wissen lassen, was mit dem Formular zu tun ist und wie strukturiert vorzugehen ist.

Erläutern von HTML-Formularelementen (einschließlich Syntax und Beispielen mit Ausgabe)

Da es mehrere HTML-Formularelemente gibt, um ein Formular zu erstellen und dem Formular auf strukturierte Weise ein angemessenes Aussehen zu verleihen. Im Folgenden werden einige von ihnen einzeln erklärt.

Sl. Nein.StichworteBedeutungen / Beschreibungen

1

So definieren Sie ein HTML-Formular für Benutzereingaben

2

Eingabesteuerung definieren

3

Angeben einer Liste vordefinierter Optionen

4

Gruppenbezogene Elemente definieren

5

So definieren Sie eine sichere Eingabe

6

So definieren Sie eine Beschriftung der Eingabe

7

So definieren Sie eine Beschriftung für das Feldset

8

Eine Gruppe ähnlicher Optionen definieren

9

Definieren einer Option für das Dropdown-Menü

10

Ergebnis definieren

11

Definieren einer Dropdown-Liste

12

Definieren eines mehrzeiligen Eingabebereichs

Hinweis: Die meisten der hier behandelten HTML-Tag-Elemente beziehen sich auf HTML5, die neueste Version der HTML-Sprache. Das Tag-Element wird in HTML5 nicht mehr unterstützt. Es wurde tatsächlich für die Vorgängerversion von HTML verwendet.

Syntax und Beispiel

Einige Syntaxen und Beispiele für HTML-Formularelemente mit Ausgaben werden nachfolgend erläutert:

  1. "" Element

Dieses Element kann auch viele andere Elemente enthalten, einschließlich der folgenden:

    Beispiel für ein „“ Element mit Eingabe- und Übergabeschaltfläche:

    Syntax:


    Your Name:

    Codes:



    Your name:


    Ausgabe:

    1. "" Element

    Dieses Element ist ein Inline-Element und gehört zur Gruppe der Formularelemente.

    Syntax:


    Input name:
    Input age:

    Codes:



    Input name:
    Input age:


    Ausgabe:

    1. "" Element

    In der Regel wird eine vordefinierte Liste von Eingaben für das Element angegeben, in der Benutzer eine beliebige Option aus der vordefinierten Liste auswählen können.

    Syntax:





    Codes:









    Ausgabe:

    1. "" Element

    Dieses Element wird im Wesentlichen zum Gruppieren zusammengehöriger Elemente in Formularen verwendet und zeichnet einen Rahmen um die ähnlichen Elemente.

    Syntax:


    Celebrity:
    Name:
    Phone:
    Age:

    Codes:




    Celebrity:
    Name:
    Phone:
    Age:

    Ausgabe:

    1. "" Element

    Dieses Element kann sich außerhalb des Formulars befinden, es kann jedoch auch Teil des Formulars sein. In der Regel wird dieses Element verwendet, um eine oder mehrere Formulare anzugeben. Dieses Element wird in der HTML5-Version neu verwendet, um einen Verschlüsselungsschlüssel zu generieren, mit dem verschlüsselte Daten über ein Formular in einer auf HTML basierenden Website übertragen werden.

    Syntax:

    Codes:



    Username:

    Das unten angegebene keygen-Feld befindet sich außerhalb des Formulars, ist jedoch immer noch Teil des obigen Formulars.

    Verschlüsselung:

    Ausgabe:

    1. "" Element

    Dieses Element gibt im Wesentlichen einen Namen für das Eingabeformular an, damit der Benutzer versteht, welche Eingabedaten es sein sollen. Es dient als Indikator für Benutzer.

    Syntax:

    …

    Codes:


    Example of HTML label tag


    Boy
    Girl

    Ausgabe:

    1. "" Element

    Dieses Element definiert tatsächlich eine Beschriftung für ein Element. Es ist eine Art unterstützendes Element für ein anderes Element, ein Teil des Gruppenelements.

    Syntax:


    Celebrity:
    Name:
    Phone:
    Age:

    Codes:


    Example of HTML legend tag


    Celebrity:
    Name:
    Phone:
    Age:

    Ausgabe:

    1. "" Element

    Dieses Element ist ein gruppenbezogenes Element, das für Optionen in einer Dropdown-Liste in einem HTML-Formular verwendet wird. Es hilft den Benutzern, eine lange Liste leicht zu handhaben.

    Syntax:


    Ninja 300
    Ninja 450

    Pulsar 200
    Pulsar 150

    Codes:



    Example of HTML legend tag


    Ninja 300
    Ninja 450

    Pulsar 200
    Pulsar 150

    Ausgabe:

    1. "" Element

    Dieses Element wird verwendet, um eine Option aus einer Dropdown-Liste unter Element darzustellen. Die Dropdown-Liste muss mindestens eine Option enthalten.

    Syntax:

    …

    Codes:



    Example of HTML option tag


    Bikes
    Cars
    Buses

    Ausgabe:

    1. "" Element

    Dieses Element wird im Wesentlichen verwendet, um die Ausgabe einer Berechnung anzuzeigen (z. B. in einer Skriptberechnung).

    Syntax:

    …

    Codes:



    Example of HTML output Tag

    +
    =

    Ausgabe:

    1. "" Element

    Dieses Element wird verwendet, um eine Auswahl aus einer Liste innerhalb eines Formulars zu treffen.

    Syntax:


    Bike
    Car
    Bus

    Codes:



    Example of HTML select Tag


    Bike
    Car
    Bus

    Ausgabe:

    1. "" Element

    Dieses Element dient zur Definition mehrzeiliger Texteingaben (zB für Adresse).

    Syntax:

    Geben Sie Ihren Kommentar ein:
    Leg es hierhin…

    Codes:


    Example of HTML textarea Tag

    Geben Sie Ihren Kommentar ein:
    Leg es hierhin…


    Ausgabe:

    Fazit

    Es sind so viele HTML-Formularelemente verfügbar. In diesem Artikel haben wir einige der grundlegenden oder systemeigenen HTML-Formularelemente erläutert. HTML-Formularelemente helfen uns dabei, korrekte und funktionierende HTML-Formulare zu erstellen. Zu beachten ist, dass die meisten HTML-Formularelemente einige Attribute benötigen, die mit ihnen einbezogen werden. Einige der Elemente hängen voneinander ab und müssen zusammen codiert werden. Die Elemente, die bereits veraltet sind, werden möglicherweise nicht von allen Browsern angezeigt.

    Empfohlene Artikel

    Dies war ein Leitfaden für HTML-Formularelemente. Hier diskutieren wir die Einführung und Elemente der Form mit Syntax und Beispielcode. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -

    1. Versionen von HTML
    2. Vorteile von HTML
    3. Karriere in HTML
    4. HTML-Blöcke
    5. Kostenloser HTML-Kurs
    6. HTML-Frames
    7. Stellen Sie eine Hintergrundfarbe in HTML mit Beispiel ein

    Kategorie:

    Web-Entwicklungstools