简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Was sind die neuen häufig verwendeten Formularelemente in HTML5? Anbei Anwendungsbeispiele

寻∝梦
Freigeben： 2018-08-13 19:00:09
Original
5607 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ausgabeelement:

Ausgabeelement wird für verschiedene Arten der Ausgabe verwendet, z. B. Berechnung oder Skriptausgabe: 

<output id="result" onforminput="resCalc()"></output>
Nach dem Login kopieren

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.

Definieren Sie ein Formular für Benutzereingaben

Definieren Eingabebereich