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 (
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 (
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
5Detaillierte 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!
