Detaillierte Einführung und Beispielcode des HTML5-Eingabetyps

HTML5 verfügt über mehrere neue Formulareingabetypen. Diese neuen Funktionen sorgen für eine bessere Eingabekontrolle und -validierung.

Dieses Kapitel bietet eine umfassende Einführung in diese neuen Eingabetypen:

1.Farbe

2.Datum

3. datetime

4.datetime-local

5.email

6.month

7.number

8. Reichweite

9.Suche

10.Tel

11.Zeit

12.URL

13.Woche

Hinweis: Nicht alle gängigen Browser unterstützen die neuen Eingabetypen, Sie können sie aber bereits in allen gängigen Browsern verwenden. Auch wenn es nicht unterstützt wird, kann es dennoch als normales Textfeld angezeigt werden.

Eingabetyp: Farbe

Der Farbtyp wird im Eingabefeld verwendet und hauptsächlich zur Auswahl von Farben verwendet, wie unten gezeigt:

Instanz

Wählen Sie aus der Farbauswahl eine Farbe:

Wählen Sie eine Farbe, die Ihnen gefällt:

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

Eingabetyp: Datum

Mit dem Datumstyp können Sie eine Farbe aus einem auswählen Datumsauswahl Wählen Sie ein Datum.

Instanz

Definieren Sie eine ZeitController:

生日: <input type="date" name="bday">

Eingabetyp: Datum/Uhrzeit

Der Datum/Uhrzeit-Typ ermöglicht Ihnen die Auswahl ein Datum (UTC-Zeit).

Instanz

Definieren Sie einen Datums- und Zeit-Controller (Ortszeit):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Eingabetyp: datetime-local

datetime-local-Typ Ermöglicht Sie können ein Datum und eine Uhrzeit auswählen (ohne Zeitzone).

Instanz

Datum und Uhrzeit festlegen (ohne Zeitzone):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

Eingabetyp: E-Mail

Der E-Mail-Typ wird für Eingabefelder verwendet, die E-Mail-Adressen enthalten sollen.

Instanz

Beim Absenden des Formulars wird automatisch überprüft, ob der Wert des E-Mail-Felds zulässig und gültig ist:

E-mail: <input type="email" name="email">

Tipps : Safari auf dem iPhone Der Browser unterstützt den E-Mail-Eingabetyp und ändert die Touchscreen-Tastatur entsprechend (Hinzufügen von @- und .com-Optionen).

Eingabetyp: Monat

Mit dem Monatstyp können Sie einen Monat auswählen.

Beispiel

Monat und Jahr definieren (keine Zeitzone):

生日 (月和年): <input type="month" name="bdaymonth">

Eingabetyp: Zahl

Der Zahlentyp wird für die Eingabe verwendet, die eingegeben werden soll Domäne mit numerischen Werten enthalten.

Sie können auch Grenzwerte für die akzeptierten Zahlen festlegen:

Beispiel

Definieren Sie ein numerisches Eingabefeld (Limit):

Menge ( 1 bis 5) :

<input type="number" name="quantity" min="1" max="5">

Verwenden Sie das folgende Attribut, um Grenzwerte für numerische Typen anzugeben:

max – gibt den maximal zulässigen Wert an.

min – gibt an minimal zulässiger Wert

Schritt – gibt das gesetzliche Zahlenintervall an (wenn Schritt = „3“, ist die gesetzliche Zahl -3,0,3,6 usw.)

Wert – gibt das an Standardwert

Probieren Sie das Beispiel mit allen qualifizierten Attributen aus. Probieren Sie es aus

Eingabetyp: Bereich

Bereichstyp wird für numerische Werte verwendet, die ein bestimmtes Bereichseingabefeld enthalten sollen.

Der Bereichstyp wird als Schieberegler angezeigt.

Beispiel

定义一个不需要非常精确的数值（类似于滑块控制）:

<input type="range" name="points" min="1" max="10">

请使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值

min - 规定允许的最小值

step - 规定合法的数字间隔

value - 规定默认值

Input 类型: search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

实例

定义一个搜索字段 (类似站点搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

Input 类型: tel

实例

定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

Input 类型: time

time 类型允许你选择一个时间。

实例

定义可输入时间控制器（无时区）：

选择时间: <input type="time" name="usr_time">

Input 类型: url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

实例

定义输入URL字段:

添加您的主页: <input type="url" name="homepage">

提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

Input 类型: week

week 类型允许你选择周和年。

实例

定义周和年 (无时区):

选择周: <input type="week" name="week_year">

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung und Beispielcode des HTML5-Eingabetyps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!