Latest web development tutorials

HTML5 Eingabetypen

HTML5 Neue Eingabetypen

HTML5 hat einige neue Formulareingabetypen. Diese neuen Funktionen bieten eine bessere Eingangskontrolle und Validierung.

Dieses Kapitel beschreibt diese umfassende neue Input-Typen:

  • Farbe
  • Datum
  • Datetime
  • datetime-local
  • E-Mail
  • Monat
  • Anzahl
  • Reichweite
  • Suche
  • tel
  • Zeit
  • url
  • Woche

Hinweis: Nicht alle großen Browser unterstützen die neuen Input - Typen, aber Sie können sie bereits in allen gängigen Browsern nutzen.Wenn nicht unterstützt, kann es immer noch als reguläre Textfelder erscheinen.


Eingabetyp: Farbe

Farbe in dem Eingabefeldtyp verwendet wird hauptsächlich verwendet, um die Farbe zu wählen, wie folgt:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Wählen Sie eine Farbe aus der Farbauswahl:

选择你喜欢的颜色: <input type="color" name="favcolor">

Versuchen »


Eingabetyp: Datum

Datumstyp ermöglicht es Ihnen, ein Datum von einem Datumsauswahl zu wählen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie eine Zeitsteuerung:

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

Versuchen »


Eingabetyp: datetime

Datetime-Typ können Sie ein Datum (UTC-Zeit) zu wählen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie ein Datum und eine Zeitsteuerung (Ortszeit):

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

Versuchen »


Eingabetyp: datetime-local

datetime-local-Typ können Sie ein Datum und Uhrzeit (keine Zeitzone) zu wählen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie ein Datum und Uhrzeit (keine Zeitzone):

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

Versuchen »


Eingabetyp: E-Mail

E-Mail-Typ wird für Eingabefelder verwendet werden, sollten E-Mail-Adressen enthalten.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Wenn das Formular abgeschickt wird, wird es automatisch, ob der Wert gültige E-Mail-Domäne überprüfen:

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

Versuchen »

Tipp: iPhone in Safari - Browser unterstützt E - Mail - Eingangstyp und durch die Touchscreen-Tastatur zu ändern , es zu passen (hinzufügen @ und .com - Optionen).


Eingabetyp: Monat

Monat Typ ermöglicht es Ihnen, einen Monat zu wählen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definierte Monat und Jahr (keine Zeitzone):

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

Versuchen »


Eingabetyp: Zahl

Nummerntyp wird für Eingabefelder verwendet wird, sollte einen Wert enthalten.

Sie können auch zu akzeptieren, eine begrenzte Anzahl festgelegt:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie einen numerischen Eingabefeld (Limited):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

Versuchen »

Verwenden Sie die folgende Eigenschaft, um die Art von digitalen Limited angeben:

  • Die maximale durch Regelungen erlaubt Max-
  • min - das Minimum von Bestimmungen zulässig
  • Schritt - gibt die gesetzlichen Nummernintervalle für (wenn Schritt = "3", rechtliche Zahlen -3,0,3,6 sein könnte, usw.)
  • Wert - der Standardwert angegeben

Versuchen Sie ein Beispiel mit alle definierten Attribute versuchen


Eingabetyp: Bereich

Range-Typ wird für Eingabefelder verwendet werden, sollten eine Reihe von numerischen Werte enthalten.

Range-Typ wird als ein Schieberegler angezeigt.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Sie brauchen nicht einen sehr genauen Wert (wie ein Schieberegler) zu definieren:

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

Versuchen »

Bitte benutzen Sie die folgenden Attribute, die Art von Digital Limited angeben:

  • max - das Maximum von Bestimmungen zulässig
  • min - das Minimum von Bestimmungen zulässig
  • Schritt - gibt die gesetzlichen Nummernintervalle für
  • Wert - der Standardwert angegeben

Eingabetyp: Suche

Suchart für das Suchfeld ein, wie Website-Suche oder Google-Suche.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

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

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

Versuchen »


Eingabetyp: tel

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Geben Sie die Telefonnummernfeld ist definiert:

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

Versuchen »


Eingabetyp: Zeit

Zeittyp ermöglicht es Ihnen, eine Zeit auszuwählen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definiert Eingangszeitsteuerung (keine Zeitzone):

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

Versuchen »


Eingabetyp: url

URL-Typ für Eingabefelder verwendet wird, sollte eine URL-Adresse enthalten.

Wenn das Formular abgeschickt wird, wird es automatisch den Wert des URL-Feld überprüfen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie das Eingabefeld URL:

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

Versuchen »

Tipp: iPhone in Safari - Browser unterstützt URL - Eingabetyp und durch die Touchscreen-Tastatur zu ändern , es zu passen (.com Option hinzufügen).


Eingabetyp: Woche

Woche können Sie die Art der Woche und Jahr auszuwählen.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definitionen Woche und Jahr (keine Zeitzone):

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

Versuchen »


HTML5 <input> -Tag

标签 描述
<input> 描述input输入器