Lernprogramm zur Verwendung von HTML-Formular-Tags

Mithilfe von HTML-Formularen können verschiedene Arten von Eingabeinformationen von Benutzern erfasst werden. Ein Formular ist eigentlich ein Bereich, der Formularelemente enthält. Die Eingabeinformationen verschiedener Elemente in diesem Bereich werden schließlich über das Formular an das Programmskript übermittelt. Zu den gängigen Vorgängen gehören beispielsweise die Benutzeranmeldung, die Registrierung, die Veröffentlichung von Artikeln usw., die alle über Formulare an das dynamische Programm zur Verarbeitung übermittelt werden. In diesem Abschnitt werden hauptsächlich Formulare und Formularelemente behandelt. Wie Formularinformationen an dynamische Programme übermittelt werden, wird in zukünftigen Programmiersprachenkursen besprochen.
Der Formularbereich wird durch das Tag <form> definiert. Die Werte der Elemente in <form></form> werden über dieses Formular an die entsprechende Adresse übermittelt.

Eingabeinformationen
Im Allgemeinen wird das <input>-Tag in Formularen verwendet, um Benutzereingabeinformationen zu erfassen, und der Eingabetyp wird durch den Typ bestimmt.
Das in den meisten Fällen verwendete Formular-Tag ist das Eingabe-Tag (<input>). Der Eingabetyp wird durch das Typattribut (Typ) definiert. Zu den üblichen Eingabetypen zählen Textfelder, Optionsfelder, Kontrollkästchen, Dropdown-Menüs usw.

Textfeld
Das Textfeld bietet Benutzern die Möglichkeit, Text einzugeben. Der Browser interpretiert das Textfeld als rechteckiges Feld. Der Benutzer kann den Cursor in das Feld bewegen und klicken, um den Cursor in das Feld zu verschieben. Benutzer können Buchstaben, Zahlen usw. in das Formular eingeben.
Das Textfeld wird definiert, indem der Textwert für das Typattribut im <input>-Tag festgelegt wird.

Der Browser zeigt Folgendes an:

Optionsfeld
Optionsfelder erscheinen meist in den Optionen, wenn Benutzer bei der Registrierung Informationen eingeben. Diese Art von Schaltfläche wird verwendet, wenn Benutzer nur ein Ergebnis auswählen dürfen.
Ein Optionsfeld wird definiert, indem der Wert des Typattributs im <input>-Tag auf Radio gesetzt wird.

Der Browser zeigt Folgendes an:

Kontrollkästchen
Kontrollkästchen ermöglichen Benutzern die Auswahl einer oder mehrerer Optionen. Eine häufige Funktion besteht darin, Benutzern Funktionen wie die Speicherung ihres Anmeldekontos bei der Anmeldung bereitzustellen. Sie können auf der Seite mit der Benutzerumfrage auch mehrere Meinungen von Benutzern sammeln.
Um ein Kontrollkästchen zu definieren, legen Sie den Wert des Typattributs im <input>-Tag auf Kontrollkästchen fest.

Der Browser zeigt Folgendes an:

Dropdown-Menü
Ein Dropdown-Menü ähnelt hinsichtlich der Informationsauswahl einem Optionsfeld, kann jedoch mehr Informationen enthalten. Und das Dropdown-Menü kann nach Auswahl des Menüwerts zusätzliche Skripte ausführen.
Das Dropdown-Menü beginnt mit dem Tag <select> und jeder Optionstag im Auswahltag ist ein Wert im Dropdown-Menü.

Der Browser zeigt Folgendes an:

Schaltfläche „Senden“
Eine Senden-Schaltfläche ist ein wesentlicher Bestandteil jedes Formulars. Nachdem der Benutzer die entsprechenden Informationen eingegeben hat, muss er durch Klicken auf die Schaltfläche „Senden“ die Aktion auslösen, um den Formularwert an die nächste Seite zu übermitteln. Wenn das Aktionsattribut im <form>-Tag auf die entsprechende Übermittlungsadresse eingestellt ist, übermittelt die Schaltfläche „Senden“ alle im Formular erhaltenen Daten an die Seite mit dieser Adresse.
Die Schaltfläche „Senden“ wird definiert, indem im Eingabetag der Wert vom Typ „Senden“ festgelegt wird. Unten wird am Beispiel des Suchfelds des Front-End-Entwicklers die Übermittlungsadresse für die Suchseite festgelegt.

Der Browser zeigt Folgendes an:

Fazit: Dieser Abschnitt bietet nur eine grundlegende Demonstration und Erklärung häufig verwendeter Frontend-Layoutelemente von Formularen. Echte Formularanwendungen werden meist in Server-Programmiersprachen verwendet und erfordern das Festlegen weiterer Parameter und Regeln. In dieser Lektion müssen Sie nur verstehen, wie Sie die Elemente des Formulars anordnen. In den meisten Fällen können Sie grundsätzlich mit den Backend-Programmierern zusammenarbeiten, um die Website-Entwicklung abzuschließen.