Latest web development tutorials

HTML input type Attribute

HTML-Eingabe Tag Referenz HTML <input> -Tag

Beispiele

HTML-Formular mit zwei verschiedenen Eingangstypen, Text und einreichen:

<form action="demo-form.php">
用户名: <input type="text" name="usrname"><br>
<input type="submit" value="提交">

Versuchen »
(Siehe unten auf dieser Seite finden Sie weitere Beispiele)

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle gängigen Browser unterstützen das type-Attribut. Allerdings sind nicht alle gängigen Browser unterstützen alle die verschiedenen Eingabetypen in allen gängigen Browsern funktionieren kann.

Siehe unten für jeden Eingangstyp-Browser-Unterstützung.


Definition und Verwendung

<Input> type-Attribut gibt die Art des Elements, das Sie anzeigen möchten.

Der Standardtyp ist: Text.

Hinweis: Dieses Attribut ist nicht erforderlich, aber wir denken , dass Sie es immer verwenden sollten.


Die Unterschiede zwischen den HTML 4.01 und HTML5

Folgende Eingabearten sind neu in HTML5 Typ: Farbe, Datum, Datumzeit, datetime-local, Monat, Woche, Zeit, E-Mail, Zahl, Reichweite, Suche, Tel und URL.


Grammatik

<input type="value">

Eigenschaft Wert

描述
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框。
color New 定义拾色器。
date New 定义 date 控件(包括年、月、日,不包括时间)。
datetime New 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local New 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email New 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month New 定义 month 和 year 控件(不带时区)。
number New 定义用于输入数字的字段。
password 定义密码字段(字段中的字符会被遮蔽)。
radio 定义单选按钮。
range New 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset 定义重置按钮(重置所有的表单值为默认值)。
search New 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel New 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time New 定义用于输入时间的控件(不带时区)。
url New 定义用于输入 URL 的字段。
week New 定义 week 和 year 控件(不带时区)。


Beispiele

Eingabetyp: Taste

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definition von anklickbaren Schaltflächen, wenn der Benutzer auf eine Schaltfläche klickt einen Zeitraum von JavaScript zu starten:

<input type="button" value="点我" onclick="msg()">

Versuchen »


Eingabetyp: Checkbox

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Box ermöglicht es dem Benutzer eine oder mehrere Optionen in einer Reihe von Möglichkeiten zur Auswahl:

<input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>

Versuchen »


Eingabetyp: Farbe

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Wählen Sie eine Farbe aus der Farbauswahl:

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

Versuchen »


Eingang: Datum

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definierte Datum Kontrollen:

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

Versuchen »


Eingabetyp: datetime

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Legen Sie das Datum und Zeitkontrollen (mit Zeitzone):

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

Versuchen »


Eingabetyp: datetime-local

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Legen Sie das Datum und Zeitkontrollen (ohne Zeitzone):

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

Versuchen »


Eingabetyp: E-Mail

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Felddefinitionen für die E-Mail-Adresse (wenn das Formular automatisch auf den Wert des E-Mail-Bereich vorgelegt wird, um zu überprüfen):

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

Versuchen »

Tipp: iPhone Safari Browser wird die E - Mail - Eingang Typ erkennen, dann die Tastatur Touchscreen ändern , um es (hinzufügen @ und .com - Optionen) anzupassen.


Eingang: Datei

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Um Dateiauswahlfeld und eine "Durchsuchen ...", für Datei-Upload festlegen:

选择一个文件: <input type="file" name="img">

Versuchen »


Eingabetyp: versteckt

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definition von versteckten Feldern, versteckte Felder sind nicht für den Benutzer sichtbar. Versteckte Felder speichern oft einen Standardwert, oder ihre Werte ändern, indem Sie die JavaScript-:

<input type="hidden" name="country" value="Norway">

Versuchen »


Eingang Typ: image

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Benutzerdefinierte Bild als Submit-Button:

<input type="image" src="img_submit.gif" alt="Submit">

Versuchen »


Eingabetyp: Monat

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie den Monat und das Jahr Kontrolle (ohne Zeitzone):

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

Versuchen »


Eingabetyp: Zahl

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Geben Sie eine Zahl, die Felder zu definieren (Sie die akzeptable Grenze Zahlen festlegen können):

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

Versuchen »

Bitte verwenden Sie die folgenden Attribute Einschränkungen angeben:

  • MAX - die maximale durch Regelungen erlaubt.
  • min - das Minimum von Bestimmungen zulässig.
  • STEP - Anforderungen für legale digitale Intervall.
  • Der Wert - angegebene Standard.

Eingabetyp: Passwort

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie Passwort-Felder (Passwort-Felder sind maskierte Zeichen):

<input type="password" name="pwd">

Versuchen »


Eingabetyp: radio

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Es ermöglicht dem Benutzer eine Option in einer Anzahl von Möglichkeiten ausgewählt werden:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

Versuchen »


Eingabetyp: Bereich

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Es definiert die genaue Wert ist nicht wichtig digitalen Eingangssteuerung (wie Schieberegler). Sie können auch Grenzen akzeptablen Zahlen gesetzt:

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

Versuchen »

Bitte verwenden Sie die folgenden Attribute Einschränkungen angeben:

  • MAX - die maximale durch Regelungen erlaubt.
  • min - das Minimum von Bestimmungen zulässig.
  • STEP - Anforderungen für legale digitale Intervall.
  • Der Wert - angegebene Standard.

Eingangstyp: reset

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie die Reset-Taste (Zurücksetzen aller Form ist die Standardeinstellung):

<input type="reset">

Versuchen »

Tipp: Seien Sie vorsichtig mit der Reset - Taste!Für Anwender, klickte aus Versehen auf die Reset-Taste eine sehr ärgerliche Sache ist.


Eingabetyp: Suche

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definierte Suchfeld (zB Website-Suche oder Google-Suche, etc.):

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

Versuchen »


Eingabetyp: submit

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definieren Sie den Absenden-Button:

<input type="submit">

Versuchen »


Eingabetyp: tel

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definierte Felder für die Eingabe von Telefonnummern:

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

Versuchen »


Eingabetyp: Text

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Der Benutzer kann zwei definieren eine einzelne Textzeile in einem Textfeld eingeben:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

Versuchen »


Eingabetyp: Zeit

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Geben Sie die Zeit der Definition der Steuerung verwendet wird (ohne Zeitzone):

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

Versuchen »


Eingabetyp: url

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definiert Eingabefelder der URL:

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

Versuchen »

Tipp: iPhone Safari - Browser die URL - Eingabetyp erkennen, dann die Touchscreen-Tastatur ändern , um es anzupassen (.com Option hinzufügen).


Eingang: Woche

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Definition der Woche und Jahr Kontrolle (ohne Zeitzone):

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

Versuchen »


HTML-Eingabe Tag Referenz HTML <input> -Tag