English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Grundlagen-Tutorial

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Input-Typen

In HTML5In HTML, wurden mehrere neue Formular-Input-Typen hinzugefügt. Durch die Verwendung dieser neuen Elemente kann eine bessere Eingabe-Steuerung und -Validierung erreicht werden.

HTML5 Neue Input-Typen

HTML5 Es gibt mehrere neue Formular-Eingabetypen. Diese neuen Funktionen bieten eine bessere Eingabe-Steuerung und -Validierung.

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

  • Farbe

  • Datum

  • datetime

  • datetime-local

  • E-Mail

  • Monat

  • Zahl

  • Bereich

  • Suche

  • Telefonnummer

  • Zeit

  • URL

  • Woche

Beachtung:Nicht alle gängigen Browser unterstützen die neuen Input-Typen, aber Sie können sie in allen gängigen Browsern verwenden. Selbst wenn sie nicht unterstützt werden, können sie als reguläre Textfelder angezeigt werden.

Input-Typ: Farbe

color类型用在input字段主要用于选择颜色，如下所示：

Online-Beispiel

从拾色器中选择一个颜色：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　选择您喜欢的颜色：<input type="color" name="favcolor"><br>
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input类型: date

date类型允许您从一个日期选择器中选择一个日期。

Online-Beispiel

定义一个时间控制器：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　生日：<input type="date" name="bday">
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input类型: datetime

datetime类型允许您选择一个日期（UTC时间）。

Online-Beispiel

定义一个日期和时间控制器（本地时间）：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　生日（日期和时间）：<input type="datetime" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input类型: datetime-local

datetime-local类型允许您选择一个日期和时间（无时区）。

Online-Beispiel

定义一个日期和时间（无时区）：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　生日（日期和时间）：<input type="datetime-local" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input类型: email

email类型用于应该包含e-mail地址的输入域。

Online-Beispiel

在提交表单时，会自动验证email域的值是否合法有效：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input type="submit">
</form>
<p><b>Achtung:</b> Internet Explorer　9　　及更早的IE版本不支持type="email"。/p>
</body>
</html>
Testen Sie heraus ‹/›

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

Input类型: month

month类型允许您选择一个月份。

Online-Beispiel

定义月与年（无时区）：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　生日（月和年）：<input type="month" name="bdaymonth">
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input类型: number

number类型用于应该包含数值的输入域。

您还可以设定对所接受数字的限制：

Online-Beispiel

定义一个数值输入域（限定）：

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　数量（　1　到　5　之间): <input type="number" name="quantity" min="1" max="5">
　　<input type="submit">
</form>
<p><b>Achtung:</b>Internet Explorer　9　及更早的IE版本不支持type="number"。/p>
</body>
</html>
Testen Sie heraus ‹/›

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

属性Beschreibung
disabled规定的输入字段已被禁用
maxRegeln für den erlaubten Höchstwert
maxlengthRegeln für die maximale Zeichenlänge des Eingabefelds
minRegeln für den erlaubten Mindestwert
patternRegeln für das Muster zur Überprüfung des Eingabefelds
readonlyRegeln für das Unveränderliche des Wertes des Eingabefelds
requiredRegeln für die Notwendigkeit des Wertes des Eingabefelds
sizeRegeln für die Anzahl der sichtbaren Zeichen im Eingabefeld
stepRegeln für zulässige numerische Intervalle des Eingabefelds
valueRegeln für den Standardwert des Eingabefelds

Input-Typ: range

Der range-Typ wird für Eingabefelder verwendet, die numerische Werte in einem bestimmten Bereich enthalten sollten.

Der range-Typ wird als Schieberegler angezeigt.

Online-Beispiel

Definieren Sie ein nicht sehr genaues numerisches Wert (ähnlich einem Schiebereglage):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php" method="get">
Punkte: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>Achtung:</b> Internet Explorer　9　Frühere IE-Versionen unterstützen nicht type="range" .</p>
</body>
</html>
Testen Sie heraus ‹/›

Verwenden Sie die folgenden Attribute, um Beschränkungen für numerische Typen zu bestimmen:

  • max - Regeln für den erlaubten Höchstwert

  • min - Regeln für den erlaubten Mindestwert

  • step - Regeln für zulässige numerische Intervalle

  • value - Regeln für Standardwerte

Input-Typ: search

Der search-Typ wird für Suchfelder verwendet, wie z.B. Site-Suche oder Google-Suche.

Online-Beispiel

Definieren Sie ein Suchfeld (ähnlich Site-Suche oder Google-Suche):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Google durchsuchen: <input type="search" name="googlesearch"><br>
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input-Typ: tel

Online-Beispiel

Definieren Sie das Eingabe-Telefonnummer-Feld:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Telefonnummer: <input type="tel" name="usrtel"><br>
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input-Typ: time

Der time-Typ ermöglicht die Auswahl einer Zeit.

Online-Beispiel

Definieren Sie den Controller für die einzugebende Zeit (ohne Zeitzone):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Wählen Sie die Zeit: <input type="time" name="usr_time">
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

Input-Typ: url

Der URL-Typ wird für Eingabefelder verwendet, die URL-Adressen enthalten sollten.

Bei der Übermittlung des Formulars wird der Wert des URL-Domains automatisch überprüft.

Online-Beispiel

Definieren Sie das Eingabe-URL-Feld:

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Fügen Sie Ihre Startseite hinzu: <input type="url" name="homepage"><br>
　　<input type="submit">
</form>
<p><b>Achtung:</b> Internet Explorer　9Frühere IE-Versionen unterstützen nicht type="url" .</p>
</body>
</html>
Testen Sie heraus ‹/›

Hinweis: Der Safari-Browser im iPhone unterstützt den URL-Eingabetyp und passt ihn durch die Änderung der Tastatur des Berührungsbildschirms an (Hinzufügen der Option .com).

Input-Typ: week

Der "week"-Typ ermöglicht die Auswahl von Woche und Jahr.

Online-Beispiel

Definieren Sie Woche und Jahr (ohne Zeitzone):

!DOCTYPE html
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Wählen Sie die Woche: <input type="week" name="year_week">
　　<input type="submit">
</form>
</body>
</html>
Testen Sie heraus ‹/›

HTML5 <input>-Tag

TagBeschreibung
<input>Beschreibung des Input-Eingabegeräts
HTML5 FormularelementeHTML5 Audio(Audio)