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.

baa23ccbf9fd7d73759240490d3ae466

ff9c23ada1bcecdd1a0fb5d5a0f18437Definieren Sie ein Formular für Benutzereingaben

d5fd7aea971a85678ba271703566ebfd Definieren Eingabebereich

4750256ae76b6b9d804861d8f69e79d3Textbereich definieren (ein mehrzeiliges Eingabesteuerelement)

2e1cf0710519d5598b1f0f14c36ba674Steuerelementbezeichnung definieren

02609e582fd7962059acb31154de1a92Definitionsfeld

e911751791aa3ba95dc724e2fb905976Definieren Sie den Titel des Feldes

221f08282418e2996498697df914ce4eDefinieren Sie eine Auswahlliste

5b7a15bed8615d1b843806256bebea72Definieren Sie die Optionsgruppe

< ; Option>Optionen in der Dropdown-Liste definieren

bb9345e55eb71822850ff156dfde57c8Schaltfläche definieren

[Verwandte Artikel]

Die Entwicklungsgeschichte von HTML und HTML5

Grundlegende Elemente von HTML, damit Sie HTML von Grund auf lernen können

Das obige ist der detaillierte Inhalt vonWas sind die neuen häufig verwendeten Formularelemente in HTML5? Anbei Anwendungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!