Acht neue INPUT-Eingabetypen für HTML5 hinzugefügt

In diesem Artikel werden hauptsächlich die acht neuen Eingabetypen in HTML5 vorgestellt: E-Mail-Typ, URL-Typ, Nummerntyp, Bereichstyp, Datumstyp, Suchtyp und Tel-Typ 1. Freunde in Not können auf

vorhandene HTML-Codebeispiele für Eingabetypen verweisen:

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

In HTML5 wurden mehrere neue Eingabetypen für Formulareingaben hinzugefügt, wodurch eine bessere Eingabesteuerung und -validierung erreicht werden kann mit diesen neuen Elementen.
1. E-Mail-Typ-Anwendung
Das E-Mail-Typ-Eingabeelement ist ein Texteingabefeld, das speziell zum Eingeben einer E-Mail-Adresse verwendet wird. Der E-Mail-Eingabewert wird automatisch überprüft der Box.

<input type="email" name="user_email" />

2. Anwendung des URL-Typs
Das Eingabeelement des URL-Typs stellt ein Textfeld zur Eingabe von speziellem Text wie der URL-Adresse bereit.

<input type="url" name="user_url" />

3. Anwendung des Zahlentyps
Das Eingabeelement des Zahlentyps stellt ein Textfeld zur Eingabe numerischer Werte bereit.

<input type="number" name="number1" min="1" max="20" step="4" />

4. Anwendung des Bereichstyps
Das Eingabeelement des Bereichstyps stellt ein Textfeld zur Eingabe numerischer Werte innerhalb eines bestimmten Bereichs bereit, das als Bildlaufleiste angezeigt wird auf der Webseite.

<input type="range" name="range1" min="1" max="30" />

5. Datumserkennungstyp-Anwendung
Eingabetyp HTML-Code Funktionsbeschreibung

date <input type="date">

Tag, Monat, Jahr auswählen

month <input type="month">

Monat und Jahr auswählen

week <input type="week">

Woche und Jahr auswählen

time <input type="time">

Zeit auswählen (Stunden und Minuten)

datetime <input type="datetime">

Zeit, Tag, Monat, Jahr (UTC) auswählen Zeit)

datetime-local
<input type="datetime-local"> 选取时间、日、月、年（本地时间）

6. Suchtyp-Anwendung

Das Suchtyp-Eingabeelement stellt ein Textfeld zur Eingabe von Suchbegriffen bereit.

<input type="search" name="search1" />
input[type="search"]
{  
 -webkit-appearance:textfield;
 }

7. Tel-Typ-Anwendung
Das Tel-Typ-Eingabeelement bietet ein Textfeld speziell für die Eingabe von Telefonnummern.

<input type="tel" name="tel" />

8. Anwendung des Farbtyps
Das Eingabeelement des Farbtyps stellt ein Textfeld bereit, das speziell zum Festlegen der Farbe verwendet wird.

<input type="color" name="color" />

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Bitte achten Sie auf PHP Chinesische Website!

Verwandte Empfehlungen:

HTML5-Touch-Ereignisse

Das obige ist der detaillierte Inhalt vonAcht neue INPUT-Eingabetypen für HTML5 hinzugefügt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!