Detaillierte Einführung in HTML-Formulare

HTML-Formulare werden verwendet, um verschiedene Arten von Benutzereingaben zu sammeln. HTML5-Eingabe mit mehreren neuen Formulareingabetypen bietet eine bessere Eingabekontrolle und -validierung.

Formular

Bearbeiten

Ein Formular ist ein Bereich, der Formularelemente enthält.

Formularelemente sind Elemente, die es Benutzern ermöglichen, Informationen in ein Formular einzugeben (z. B. Textfelder, Dropdown-Listen, Optionsfelder, Kontrollkästchen usw.).

Formulare werden mithilfe des Formular-Tags (

) definiert.

Eingabetyp

Bearbeiten

HTML5 verfügt über mehrere neue Formulareingabetypen. Diese neuen Funktionen sorgen für eine bessere Eingabekontrolle und -validierung.

1.Eingabetyp – E-Mail

Der E-Mail-Typ wird für Eingabefelder verwendet, die E-Mail-Adressen enthalten sollen. Beim Absenden des Formulars wird der Wert des E-Mail-Felds automatisch überprüft.

2.Eingabetyp – URL

Der URL-Typ wird für Eingabefelder verwendet, die URL-Adressen enthalten sollen. Beim Absenden des Formulars wird der Wert des URL-Felds automatisch überprüft.

3.Eingabetyp - Zahl

Der Zahlentyp wird für Eingabefelder verwendet, die numerische Werte enthalten sollen. Sie können auch Grenzen für die akzeptierten Zahlen festlegen:

4.Eingabetyp – Bereich

Bereichstyp wird verwendet, wenn ein bestimmtes Eingabefeld für numerische Werte innerhalb des Bereichs.

Der Bereichstyp wird als Schieberegler angezeigt.

Sie können auch Grenzwerte für die akzeptierten Zahlen festlegen:

5.Eingabetyp - DatumAuswähler (Datenprüfer)

HTML5 verfügt über mehrere neue Eingabetypen für die Auswahl von Datum und Uhrzeit:

Datum – wählt Tag, Monat, Jahr aus

Monat – wählt Monat, Jahr aus

Woche – Woche auswählen und Jahr

Zeit – Uhrzeit auswählen (Stunden und Minuten)

Datum/Uhrzeit – Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen

Datum/Uhrzeit- lokal – Uhrzeit, Tag, Monat, Jahr (Ortszeit) auswählen

6.Eingabetyp – Suche

Suchtyp wird verwendet Suche nach Domain, wie z. B. Site Search oder Google-Suche.

Das Suchfeld erscheint als normales Textfeld.

Eingabe

Bearbeiten

Das in den meisten Fällen verwendete Formular-Tag ist das Eingabe-Tag ( ). Eingabetypen werden durch das Typ--Attribut (Typ) definiert. Die am häufigsten verwendeten Eingabetypen sind wie folgt:

Textfeld

Text wird verwendet, wenn Benutzer Buchstaben, Zahlen usw. in Formularfelder (Textfelder) eingeben möchten ).

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

Der Browser zeigt Folgendes an:

Beachten Sie, dass das Formular selbst nicht sichtbar ist. Außerdem beträgt die Standardbreite eines Textfelds in den meisten Browsern 20 Zeichen.

Optionsfelder werden verwendet, wenn der Benutzer eine von mehreren vorgegebenen Optionen auswählt.

<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>

Der Browser zeigt Folgendes an:

Male
Female

Beachten Sie, dass Sie nur eine davon auswählen können.

Wie in der Abbildung gezeigt:

Kontrollkästchen

Wenn der Benutzer aus mehreren auswählen muss gegebene Auswahlmöglichkeiten Bei der Auswahl einer oder mehrerer Optionen werden Kontrollkästchen verwendet.

<form>
<input type="checkbox" name="bike" />I have a bike
<br />
<input type="checkbox" name="car" />I have a car
</form>

Der Browser zeigt Folgendes an:

I have a bike
I have a car

Andere Komponenten

Bearbeiten

Bestätigen-Schaltfläche

Wenn der Benutzer auf die Bestätigungsschaltfläche (Senden) klickt, wird der Inhalt des Formulars in eine andere Datei übertragen. [1]

Aktionsattribut

Das Aktionsattribut (Aktion) des Formulars definiert den Dateinamen der Zieldatei. Die durch das Aktionsattribut definierte Datei führt normalerweise eine entsprechende Verarbeitung der empfangenen Eingabedaten durch.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Der Browser zeigt Folgendes an:

Benutzername:

Wie unten gezeigt:

Wenn Sie sind oben Geben Sie ein paar Buchstaben in das Textfeld ein und klicken Sie auf die Schaltfläche „Bestätigen“. Anschließend werden die Eingabedaten an die Seite mit dem Namen „html_form_action.asp“ gesendet. Auf dieser Seite werden die Ergebnisse Ihrer Eingabe angezeigt.

Formular-Tags

[Verwandte Empfehlungen]

1. Kostenloses HTML-Video-Tutorial

2.

Detaillierte Erläuterung des Arbeitsprozesses des Formulars

3.

Detaillierte Erläuterung des Methodenattributs im Formular-Tag

4.

Erlernen Sie die Tabellen- und Formularformulare in HTML

5

Detaillierte Erläuterung der Parameter und Attribute des Formularformulars in HTML

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML-Formulare. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!