Web-Frontend
H5-Tutorial
Was sind die neuen häufig verwendeten Formularelemente in HTML5? Anbei Anwendungsbeispiele
Was sind die neuen häufig verwendeten Formularelemente in HTML5? Anbei Anwendungsbeispiele
HTML5 wird immer beliebter. Viele Leute möchten HTML5 lernen, aber HTML5 hat mehr neue Formularelemente als die alte Version. Werfen wir nun einen Blick auf die neuen Formularelemente. Was sind die neuen häufig verwendeten Formularelemente in HTML5? Wie werden sie verwendet?
In diesem Kapitel werden die folgenden neuen Formularelemente vorgestellt: datalist; keygen; Ausgabe
datalist-Element:
datalist-Element gibt an Eingabe Eine Liste von Optionen für die Domäne.
Listen werden durch Optionselemente innerhalb der Datenliste erstellt.
Wenn Sie die Datenliste an das Eingabefeld binden müssen, verwenden Sie bitte das Listenattribut des Eingabefelds, um auf die ID der Datenliste zu verweisen:
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="php中文网" value="http://www.php.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
Tipp: Das Optionselement muss immer festgelegt sein das Wertattribut.
keygen-Element: Der Zweck des
keygen-Elements besteht darin, eine zuverlässige Möglichkeit zur Authentifizierung des Benutzers bereitzustellen.
Das keygen-Element ist ein Schlüsselpaargenerator. Beim Absenden des Formulars werden zwei Schlüssel generiert, einer ist der private Schlüssel und der andere ist der öffentliche Schlüssel.
Der private Schlüssel wird auf dem Client gespeichert und der öffentliche Schlüssel wird an den Server gesendet. Der öffentliche Schlüssel kann später zur Überprüfung des Client-Zertifikats des Benutzers verwendet werden.
Derzeit ist die Browserunterstützung für dieses Element schlecht genug, um es zu einem nützlichen Sicherheitsstandard zu machen.
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
Ausgabeelement:
Ausgabeelement wird für verschiedene Arten der Ausgabe verwendet, z. B. Berechnung oder Skriptausgabe:
<output id="result" onforminput="resCalc()"></output>
Eingabe Typ:
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
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
Der Bereichstyp wird für Eingabefelder verwendet, die numerische Werte innerhalb eines bestimmten Bereichs enthalten sollen.
Der Bereichstyp wird als Schieberegler angezeigt.
Sie können auch Grenzwerte für die akzeptierten Zahlen festlegen:
5. Eingabetyp – Datumsauswahl
HTML5 verfügt über viele neue Eingabetypen für die Auswahl von Datums- und Uhrzeitangaben:
Datum – Tag, Monat, Jahr auswählen
Monat – Monat, Jahr auswählen
Woche – Woche und Jahr auswählen
Zeit – Auswählen Uhrzeit (Stunden und Minuten)
datetime – Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen
datetime-local – Uhrzeit, Tag, Monat, Jahr (Ortszeit) auswählen
6.Eingabetyp – Suche
Der Suchtyp wird für Suchfelder verwendet, z. B. für die Site-Suche oder die Google-Suche.
Das Suchfeld erscheint als normales Textfeld.