HTML <input> Tag

定义和用法

<input> 标签定义输入字段，用户可以在其中输入数据。

<input> 元素是最重要的表单元素。

<input> 元素可以以多种方式显示，具体取决于 type 属性.

以下是不同的输入类型：

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">（默认值）
  • <input type="time">
  • <input type="url">
  • <input type="week">

参见 type 属性，以查看每种输入类型的示例！

Beispiel

HTML-Formular mit drei Eingabefeldern; zwei Textfelder und ein Absendeknopf:

<form action="/action_page.php">
  <label for="fname">Vorname:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nachname:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Probieren Sie es selbst aus

Hinweise und Anmerkungen

Hinweis:Verwenden Sie immer das <label>-Tag, um für die folgenden Elemente Beschriftungen zu definieren:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Eigenschaft

Eigenschaft Wert Beschreibung
accept
  • Dateierweiterung
  • audio/*
  • video/*
  • image/*
  • Medientyp

Bestimmt den Typ der Datei, die durch das Hochladen eingereicht wird.

Bestimmt, welche Dateitypenfilter der Benutzer aus dem Dateiauswahldialog auswählen kann (gilt nur für type="file").
alt Text Bestimmt den alternativen Text des Bildes (gilt nur für type="image").
autocomplete
  • on
  • off
 Bestimmt, ob das <input>-Element die automatische Vervollständigung aktiviert haben soll.
autofocus autofocus Bestimmt, dass das <input>-Element bei der Seiteinladung automatisch den Fokus erhält.
checked checked Bestimmt, dass das <input>-Element bei der Seiteinladung vorgewählt werden soll (gilt für type="checkbox" oder type="radio").
dirname inputname.dir Bestimmt die Textausrichtung, die beim Einreichen des Formulars verwendet wird.
disabled disabled Bestimmt, dass das <input>-Element deaktiviert sein soll.
form Formular-ID Bestimmt das Formular, dem das <input>-Element angehört.
formaction URL Bestimmt die URL, die zur Verarbeitung der Datei der Eingabekontrollen verwendet wird, wenn das Formular eingereicht wird (gilt für type="submit" und type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 定义将表单数据提交到服务器时应如何对其进行编码（适用于 type="submit" 和 type="image"）。
formmethod
  • get
  • post
 定义用于将数据发送到 action URL 的 HTTP 方法（适用于 type="submit" 和 type="image"）。
formnovalidate formnovalidate 定义在提交表单元素时不应对其进行验证。
formtarget
  • _blank
  • _self
  • _parent
  • _top
框架名称 		定义在何处显示提交表单后收到的响应（适用于 type="submit" 和 type="image"）。
height Pixel 定义 <input> 元素的高度（仅适用于 type="image"）。
list datalist_id 引用包含 <input> 元素的预定义选项的 <datalist> 元素。
max
  • Zahlen
  • 日期
 定义 <input> 元素的最大值。
maxlength Zahlen 定义 <input> 元素允许的最大字符数。
min
  • Zahlen
  • 日期
 定义 <input> 元素的最小值。
minlength Zahlen 定义 <input> 元素中所需的最少字符数。
multiple multiple 定义用户可以在 <input> 元素中输入多个值。
name Text 定义 <input> 元素的名称。
pattern 正则表达式 定义检查 <input> 元素值的正则表达式。
placeholder Text 定义描述 <input> 元素预期值的简短提示。
popovertarget 元素 id 定义要调用的弹出框元素（仅适用于 type="button"）。
popovertargetaction
  • hide
  • show
  • toggle
 定义当您单击按钮时弹出框元素会发生什么（仅适用于 type="button"）。
readonly readonly 定义输入字段是只读的。
required required 定义在提交表单之前必须填写输入字段。
size Zahlen 定义 <input> 元素的宽度（以字符数为单位）。
src URL URL der用作提交按钮的图像。仅适用于 type="image"。
step
  • Zahlen
  • any
 Legt den Abstand zwischen gültigen Zahlen im Eingabefeld fest.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Legt den Typ des <input>-Elements fest, das angezeigt werden soll.
value Text Legt den Wert des <input>-Elements fest.
width Pixel Legt die Breite des <input>-Elements fest (nur für type="image" gültig).

Globale Attribute

<input> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<input> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Keine.

Browserunterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

HTML-Tutorial:

HTML DOM-Referenzhandbuch: