suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML-Formulare und Eingabetextfelder

HTML-Formulare und Eingabetextfelder

黄舟
黄舟Original
2016-12-22 14:41:263009Durchsuche

HTML-Formulare werden verwendet, um verschiedene Arten von Informationen zu sammeln, die von Benutzern eingegeben werden.

1) Beispiel

Textfeld
Dieses Beispiel zeigt, wie man ein Textfeld in einer HTML-Seite erstellt. Der Benutzer kann Text in das Textfeld eingeben.

Passwortfeld
Dieses Beispiel zeigt, wie man ein Passwort-Eingabefeld in einer HTML-Seite erstellt.

(Weitere Beispiele finden Sie später in diesem Artikel)

2) Formular

Ein Formular ist ein Formularfeld, das verschiedene Elemente innerhalb des Formulars enthält.

Formularelemente innerhalb von Formularfeldern ermöglichen Benutzern die Eingabe relevanter Informationen (z. B. Texteingabefelder, Textbereiche, Dropdown-Listen, Optionsfelder, Kontrollkästchen usw.).

Ein Formular wird durch das Tag

definiert.





Das am häufigsten verwendete Tag in Formularen ist das Eingabe-Tag . Die Art der Eingabe wird durch den Attributtyp angegeben. Die am häufigsten verwendeten Eingabetypen sind wie folgt (dargestellt in 4 bis 6).

4) Textfeld

Wenn Benutzer Buchstaben, Zahlen usw. in das Formular eingeben müssen, müssen sie Textfelder verwenden.

Vorname:


Nachname:






Das obige Codeausführungsergebnis:

Hinweis zu: Das Formular selbst wird nicht angezeigt und in den meisten Browsern beträgt die Standardanzahl der Zeichen, die in ein Textfeld eingegeben werden können, 20.

5) Optionsfelder

Optionsfelder werden verwendet, um Benutzern einen interaktiven Zugang zur Auswahl eines Elements aus begrenzten Optionen zu bieten.

value="male">Male


value="female">Female




Das obige Codeausführungsergebnis:

Beachten Sie, dass nur eine der Optionen ausgewählt werden kann.

6) Kontrollkästchen

Das Kontrollkästchen wird verwendet, um Benutzern einen interaktiven Zugang zur Auswahl mehrerer Elemente innerhalb begrenzter Optionen zu bieten.

Ich habe ein Fahrrad:

name="vehicle"

value="Bike" /> ;



Ich habe ein Auto:
name="vehicle"
value="Car" />


Ich habe ein Flugzeug:
name="vehicle"
value="Flugzeug"/>
< /form>



Das Ausführungsergebnis des obigen Codes:

7) Das Action-Attribut des Formulars und der Submit-Button (Submit-Button)

Wenn der Benutzer auf die Schaltfläche „Formular senden“ („Senden“) im Formular klickt, wird der Inhalt des Formulars zur entsprechenden Verarbeitung an eine andere Datei (normalerweise ist die Datei ein Skript) gesendet. Das Aktionsattribut des Formulars definiert, welche Skriptdatei den vom Formular übermittelten Inhalt verarbeitet (im Allgemeinen kann dem Aktionsattribut der Name oder der vollständige Pfad der Skriptdatei zugewiesen werden). Skriptdateien verarbeiten normalerweise Daten, die aus Formularen übermittelt werden.

action="html_form_action.asp"

method="get">

Benutzername:






Das Obige Code-Ausführungsergebnisse:

Wenn Sie Inhalte in das Texteingabefeld oben eingeben und auf die Schaltfläche „Senden“ klicken, übermitteln Sie die von Ihnen eingegebenen Informationen an eine Datei mit dem Namen „html_form_action.asp“ ( Dies ist ein Skript), diese Skriptdatei gibt die gesammelten Informationen an Sie aus.
{
Beachten Sie, dass hier eine Fehlerberichtsseite generiert wird, da die Skriptdatei hier: „html_form_action.asp“ keine Datei im Sina-Blogsystem ist, sondern nur zur Demonstration dient. Auf Ihrer Website müssen Sie Ihre eigenen Skriptdateien angeben.

}

8) Weitere Beispiele

Kontrollkästchen
Dieses Beispiel zeigt, wie man ein Kontrollkästchen in einer HTML-Seite erstellt. Der Benutzer kann jedes Element im Kontrollkästchen aktivieren oder nicht aktivieren.

Optionsschaltflächen
Dieses Beispiel zeigt, wie Optionsschaltflächen in einer HTML-Seite erstellt werden.

Dropdown-Listenfeld
Dieses Beispiel zeigt, wie man ein einfaches Dropdown-Listenfeld in einer HTML-Seite erstellt. Ein Dropdown-Listenfeld ist eigentlich ein Listenfeld, das Optionen bereitstellt.

Ein Dropdown-Listenfeld, das eine Option als aktuelle Option angibt
Dieses Beispiel zeigt, wie eine Dropdown-Liste erstellt wird, die das aktuell ausgewählte Element angibt.

Dateibereich
Dieses Beispiel zeigt, wie ein Textbereich erstellt wird (mehrzeiliges Texteingabesteuerelement). Benutzer können Text in den Textbereich eingeben, wobei die Anzahl der eingegebenen Zeichen unbegrenzt ist.

Erstellen Sie eine Schaltfläche
Dieses Beispiel zeigt, wie Sie eine Schaltfläche erstellen und den Beschreibungstext für die Schaltfläche selbst definieren.

Datensatz
Dieses Beispiel zeigt, wie ein Datensatz derselben Art erstellt wird, wobei alle Daten von einem Rahmen umgeben sind.

9) Beispiel einer Formularklasse

Formular mit Texteingabefeld und Senden-Schaltfläche
Dieses Beispiel zeigt, wie man ein Formular zu einer HTML-Seite hinzufügt, die ein Texteingabefeld und eine Senden-Schaltfläche enthält. Taste.

Formular mit Kontrollkästchen
Dieses Beispiel zeigt ein Formular mit zwei Kontrollkästchen und einer Schaltfläche zum Senden.

Formular mit Optionsfeldern
Dieses Beispiel zeigt ein Formular mit zwei Optionsfeldern und einer Senden-Schaltfläche.

E-Mail über ein Formular senden
Dieses Beispiel zeigt, wie eine E-Mail über ein Formular gesendet wird.

10) Formularbezogene Tags

Tag

Beschreibung

Definieren Sie Benutzereingaben Formular

Eingabefeld definieren