<input>

HTML <input>元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据；可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

浏览器支持

所有浏览器都支持<input>

示例

你可以使用各种与颜色相关的属性来设置<input>元素的样式。与文本输入相关的元素特有的一个不常见的特性是CSScaret-color属性，该属性允许你设置用于绘制文本输入插入符的颜色

//HTML
<label for="textinput">note the red caret:</label>
<input id="textinput" class="custom" size="32"/>

//css
input.custom {
  caret-color: red;
  font: 16px "helvetica", "arial", "sans-serif"
}

定义和用法

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

属性

• type。<input>的工作方式因其类型属性的值而有很大差异，不同的类型会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为text

  可用的值包括：

  • button：无缺省行为按钮。
  • checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
  • color：HTML5新增用于指定颜色的控件。
  • date：HTML5新增用于输入日期的控件（年，月，日，不包括时间）。
  • datetime-local：HTML5新增用于输入日期时间控件，不包含时区。
  • email：HTML5新增用于编辑 e-mail 的字段。合适的时候可以使用:valid和:invalidCSS 伪类。
  • file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
  • hidden：不显示在页面上的控件，但它的值会被提交到服务器。
  • image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
  • month：HTML5新增用于输入年月的控件，不带时区。
  • number:HTML5新增用于输入浮点数的控件。
  • password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。maxlength THML5中废弃。此功能已过时。尽量避免使用它。
• readonly这个布尔属性用于指明用户无法修改控件的值。

  HTML5新增如果控件的type属性为hidden,range,color,checkbox,radio,file或type时，此属性会被忽略。

• requiredHTML5新增
  这个属性指定用户在提交表单之前必须为该元素填充值。当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用.:optional和:requiredCSS 伪元素的样式将可以被该字段应用作外观.
• selectionDirectionHTML5新增
  The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTLlocale, or "backward" if the selection was made in the opposite direction. This can be "none"if the selection direction is unknown.
• size控件的初始大小。以像素为单位。但当type属性为text或password时，它表示输入的字符的长度。从HTML5开始，此属性仅适用于当type属性为text,search,tel,url,email,或password；否则会被忽略。此外，它的值必须大于0。如果未指定大小，则使用默认值20。HTML5概述"用户代理应该确保至少大部分字符是可见的",但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有x的字符即使定义了到x的大小也将显示不完整。。
• spellcheckHTML5新增
  将此属性的值设置为true表示元素需要检查其拼写和语法。值default表示该元素将根据默认行为进行操作，可能基于父元素自己的spellcheck值。值false表示不应该检查元素
• src如果type属性的值是image,这个属性指定了按钮图片的路径；否则它被忽视.
• stepHTML5新增
  使用min和max属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何，则控件仅接受大于最小步长值的倍数的值。
• tabindexelement-specific in, global in HTML5新增
• 元素在当前文档的Tab导航顺序中的位置。
• usemapTHML5中废弃
• 作为图像映射的<map>元素的名称.
• value控件的初始值。此属性是可选的，除非type属性是radio或checkbox。注意，当重新加载页面时，如果在重新加载之前更改了值，Gecko和IE将忽略HTML源代码中指定的值。
• widthHTML5新增
  如果type属性的值是image，这个属性定义了按钮图片的宽度。

非标准<input>属性

• autocorrect尚未标准化
  This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the<input>. Possible attribute values are:
  • on: Enable autocorrection.
  • off: Disable autocorrection.
  autocorrectdocumentationin the Safari HTML Reference.
• incremental尚未标准化
  This is a nonstandard attribute supported by WebKit(Safari)and Blink(Chrome)that only applies when thetypeissearch. If the attribute is present, regardless of what its value is, the<input>firessearchevents as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, thesearchevent is only fired when the user explicitly initiates a search(e.g. by pressing the Enter key while within field).incrementaldocumentation in the Safari HTML Reference
• mozactionhint尚未标准化
  Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values arego,done,next,search, andsend. These automatically get mapped to the appropriate string and are case-insensitive.
• results尚未标准化
  This is a nonstandard attribute supported by Safari that only applies when thetypeissearch. It is used to control the maximum number of entries that should be displayed in the<input>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.
• webkitdirectory尚未标准化
  This Boolean attribute indicates if the selector used when thetypeattribute isfilehas to allow for the selection of directories only.
• x-moz-errormessage尚未标准化
  This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

属性

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，该元素有很多新属性，同时不再支持 HTML 4.01 中的一些属性。

在 HTML 5 中，type 属性有很多新的值。

实例

一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：

<form action="./">
	first name:<input type="text" name="fname"><br>
	last name:<input type="text" name="lname"><br>
	<input type="submit" value="submit">
</form>

<input>标签type属性

type属性指定要显示的<input>元素的类型。默认类型是text。

button值

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

checkbox值

<form action="./">
	<input type="checkbox" name="vehicle1" value="Bike"> 我有一辆自行车<br>
	<input type="checkbox" name="vehicle2" value="Car"> 我有一辆自轿车<br>
	<input type="checkbox" name="vehicle3" value="Boat" checked> 我有一只船<br><br>
	<input type="submit" value="提交">
</form>

color值

<form action="./">
  选择您喜欢的颜色: <input type="color" name="favcolor" value="#00ff00"><br><br>
  <input type="submit">
</form>

date值

<form action="./">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

datetime-local值

<form action="./">
  生日: <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

email值

<form action="./">
  E-mail: <input type="email" name="emailaddress">
  <input type="submit">
</form>

file值

<form action="./">
  选择文件: <input type="file" name="myFile"><br><br>
  <input type="submit">
</form>

hidden值

<form action="./">
  用户名: <input type="text" name="fname"><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="提交">
</form>

image值

<form action="./">
  姓氏: <input type="text" name="fname"><br>
  名字: <input type="text" name="lname"><br>
  <input type="image" src="https://www.lanmper.cn/upload/image/202004/jquery.jpg" alt="Submit" width="48" height="48">
</form>

month值

<form action="./">
  生日(年和月): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

number值

<form action="./">
  数量 (1 - 5): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

password值

<form action="./">
  用户名: <input type="text" name="username"><br>
  密码: <input type="password" name="pwd" maxlength="8"><br>
  <input type="submit">
</form>

radio值

<form action="./">
  <input type="radio" name="gender" value="male"> PHP<br>
  <input type="radio" name="gender" value="female"> Java<br>
  <input type="radio" name="gender" value="other"> Python<br>  
  <input type="submit" value="Submit">
</form>

range值

<form action="./">
范围: <input type="range" name="points" min="0" max="10">
<input type="submit">
</form>

reset值

<form action="./">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

search值

<form action="./">
  百度搜索: <input type="search" name="q"><br>
  <input type="submit">
</form>

submit值

<form action="./">
First name: <input type="text" name="firstname" value="Mickey"><br>
Last name: <input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="提交">
</form> 

tel值

<form action="./">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form> 

text值

<form action="./">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

time值

<form action="./">
  选择一个时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

url值

<form action="./">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

week值

<form action="./">
  选择星期: <input type="week" name="year_week">
  <input type="submit">
</form>