<input>：输入（表单输入）元素

HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

<input> 类型

<input> 的工作方式相当程度上取决于 type 属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

可用的值包括：

类型	描述	基本示例
button	没有默认行为的按钮，上面显示 `value` 属性的值，默认为空。
checkbox	复选框，可将其值设为选中或未选中。
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email	编辑邮箱地址的字段。类似 `text` 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。
file	让用户选择文件的控件。使用 `accept` 属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image	图形化 `submit` 按钮。显示的图像由 `src` 属性决定。如果 `src` 属性缺失，就会显示 `alt` 的内容。
month	输入年和月的控件，没有时区。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 `name` 值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 `min` 和 `max` 来规定可接受值的范围。
reset	此按钮将表单的所有内容重置为默认值。不推荐使用该类型。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text	默认值。单行的文本字段，输入值中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。
url	用于输入 URL 的控件。类似 `text` 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期，不带时区。
废弃的值
`datetime` 已弃用	用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。

<input> 元素由于拥有诸多属性而异常强大，其中前文举例说明的 type 属性尤其重要。由于所有 <input> 元素无论是哪种 type，都基于 HTMLInputElement 接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 type。此外，一些属性作用于 <input> 的方式取决于 <input> 的 type 属性，不同的 type 有不同的效果。

下面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些 input 类型相关。与大部分或者全部 input 类型都相关的属性会讲述更多细节。一些针对特定 input 类型的属性，或者所有 input 类型都有，但在特定的 input 类型上有特定表现的属性，会在相应的类型页面中说明。这个元素包含全局属性，一些针对 <input> 元素有额外意义的全局属性也会特别说明。

<input> 元素包含的属性包含全局的 HTML 属性和以下这些额外属性：

属性	类型	描述
`accept`	`file`	文件上传控件中预期文件类型的提示
`alt`	`image`	图片类型的 alt 属性。对无障碍是必需的
`autocomplete`	除了 `checkbox`、`radio` 和按钮以外	表单自动填充特性提示
`capture`	`file`	文件上传控件中媒体捕获方法的提示
`checked`	`checkbox`、`radio`	控件是否选中
`dirname`	`search`、`text`	表单字段的名称，用于在提交表单时发送元素的方向性
`disabled`	所有类型	表单控件是否禁用
`form`	所有类型	将控件联系到表单元素中
`formaction`	`image`、`submit`	要提交表单的 URL 地址
`formenctype`	`image`、`submit`	提交表单时使用的表单数据编码类型
`formmethod`	`image`、`submit`	提交表单时所使用的 HTTP 方法
`formnovalidate`	`image`、`submit`	绕过表单提交时的表单控件验证
`formtarget`	`image`、`submit`	提交表单时的浏览上下文
`height`	`image`	与 `<img>` 元素的 height 属性有相同含义，垂直方向上的维度值
`list`	除了 `hidden`、`password`、`checkbox`、`radio` 和按钮以外	自动完成选项的 `<datalist>` 的 id 属性的值
`max`	`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`	最大值
`maxlength`	`text`、`search`、`url`、`tel`、`email`、`password`	`value` 的最大长度（字符数）
`min`	`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`	最小值
`minlength`	`text`、`search`、`url`、`tel`、`email`、`password`	`value` 的最小长度（字符数）
`multiple`	`email`、`file`	布尔值。是否允许多个值
`name`	所有类型	表单的控件名称，作为键值对的一部分与表单一同提交
`pattern`	`text`、`search`、`url`、`tel`、`email`、`password`	为了使得 `value` 有效，必须符合的模式
`placeholder`	`text`、`search`、`url`、`tel`、`email`、`password`、`number`	当没有值设定时，出现在表单控件上的文字
`readonly`	除了 `hidden`、`range`、`color`、`checkbox`、`radio` 和按钮以外	布尔值。如果存在，其中的值将不可编辑。
`required`	除了 `hidden`、`range`、`color` 和按钮以外	布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。
`size`	`text`、`search`、`url`、`tel`、`email`、`password`	控件的尺寸
`src`	`image`	与 `<img>` 元素的 `src` 属性含义相同，图片资源的地址
`step`	`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`	有效的增量值
`type`	所有类型	表单控件的类型
`value`	所有类型	表单控件的初始值
`width`	`image`	与 `<img>` 元素的 `width` 属性含义相同

一些额外的非标准属性被列在标准属性的描述之后。

属性各论

accept

仅对 file 输入类型有效。accept 属性定义了 file 上传控件可选择文件类型的列表。参见 file 输入类型以了解更多信息。

alt

仅对 image 类型有效。alt 属性提供了图片的替代文字，在图片的 src 属性缺失或对应资源加载失败时，会显示该属性的值。参见 image 输入类型以了解更多信息。

autocomplete

（不是一个布尔属性！）autocomplete 属性将一个空格分隔的字符串作为其值，描述输入应该提供什么类型的自动完成功能。一个典型的自动完成的实现是回忆以前在同一输入字段中输入的值，但也可能存在更复杂的自动完成形式。例如，浏览器可以与设备的联系人列表集成，在电子邮件输入栏中自动完成 email 地址。请参阅 autocomplete 以了解允许的值。

autocomplete 属性对 hidden、text、search、url、tel、email、date、month、week、time、datetime-local、number、range、color 和 password 类型的输入有效。该属性对于那些不返回数值或文本数据的输入控件没有效果，对除了 checkbox、radio、file 和任何按钮类型的所有输入类型均有效。

查看 HTML autocomplete 属性以了解额外信息，包括密码安全和对于 hidden 来说，autocomplete 的方式与其他输入类型略有不同。

autofocus

一个布尔属性，如果存在，表示当页面加载完毕（或包含该元素的 <dialog> 显示完毕）时，该 input 元素应该自动拥有焦点。

备注：具有 autofocus 属性的元素可能在 DOMContentLoaded 事件触发前获得焦点。

文档中只有一个表单元素可以具有 autofocus 属性。如果放置了多于一个元素，会聚焦第一个具有该属性的元素。

autofocus 不能应用于类型为 hidden 的输入控件上，因为隐藏的控件不可聚焦。

警告：自动聚焦表单控件会使使用读屏技术的视力障碍者和有认知障碍的人感到困惑。当指定了 autofocus 时，读屏器会将用户“传送”到表单控件上，而不会事先警告他们。

在应用 autofocus 属性时，要仔细考虑无障碍问题。自动聚焦于一个控件会导致页面在加载时滚动。焦点也会导致动态键盘在某些触摸设备上显示。虽然屏幕阅读器会宣布收到焦点的表单控件的标签，但屏幕阅读器不会宣布标签之前的任何内容，在小设备上的视力良好的用户同样会错过前面的内容所创造的背景。

capture

在 HTML 媒体捕获规范中引入，仅对 file 输入类型有效，capture 属性定义了应该使用哪种媒体（如麦克风、视频或相机）来捕获一个新文件，以便在支持场景中用 file 上传控件上传。参见 file 输入类型。

checked

布尔属性，对于 radio 和 checkbox 类型有效。如果在 radio 类型上出现，代表该单选按钮是当前同名称组中所选定的那一个。如果在 checkbox 类型上出现，代表页面加载时，默认选择该复选框，这并不代表复选框当前是否选择：如果复选框状态改变，该内容属性不会反馈这种改变，只会更新 HTMLInputElement 的 checked IDL 属性。

备注：与其他输入控件不同，复选框和单选按钮的值只会在 checked 状态时才会包括在提交的数据中。如果当前是 checked 状态，复选框的名称和值就会被提交。

例如，name 为 fruit 的复选框含有 value 为 cherry 的一项，且该复选框为选中状态，提交的表单数据将包含 fruit=cherry；如果复选框为非活动状态，它不会列入到表单数据中。复选框和单选按钮的默认 value 值为 on。

dirname

仅对 text 和 search 输入类型有效。dirname 属性允许提交元素的方向。当包含这个属性时，表单控件将提交两个名称/值对：第一个是 name 和 value，第二个是 dirname 作为名称，其值为浏览器设置的 ltr 或 rtl。

<form action="page.html" method="post">
  <label
    >水果：
    <input type="text" name="fruit" dirname="fruit.dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit.dir=ltr -->

当提交上述表单时，会发送 name / value 对 fruit=cherry 和 dirname / 方向对 fruit.dir=ltr。

disabled

一个布尔属性，如果存在的话，表示用户不应该与该输入进行交互。禁用的输入通常以较暗的颜色呈现，或使用一些其他形式的指示，表明该字段不能使用。

具体来说，禁用的输入不会接收 click 事件，而且禁用的输入不会随表单提交。

备注：虽然规范中没有要求，但 Firefox 默认会在不同的页面加载中保持 <input> 的动态禁用状态。使用 autocomplete 属性来控制这个特性。

form

一个字符串，指定该输入与之相关的 <form> 元素（即其表单所有者）。如果存在该属性，该字符串的值必须与相同文档中的 <form> 元素的 id 相同。如果没有指定该属性，该 <input> 元素与最近包含它的表单相关。

form 属性可以让你在文档的任何地方放置一个输入控件，但在文档的其他地方包含一个表单。

备注：一个输入只能与一个表单相关。

formaction