查看“Input：输入（表单输入）元素”的源代码


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

<br>

<span id="input-类型"></span>
== <code>&lt;input&gt; 类型</code> ==

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

<br>

可用的值包括：

{| class="wikitable"
|-
! 类型
! 描述
|-
| 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
| 用于输入以年和周数组成的日期，不带时区。
|}

<br>

== 属性 ==

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

<br>

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

<br>

<code>&lt;input&gt;</code> 元素包含的属性包含全局的 HTML 属性和以下这些额外属性：

{| class="wikitable"
|-
! 属性
! 类型
! 描述
|-
| 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
| 与 <code>&lt;img&gt;</code> 元素的 height 属性有相同含义，垂直方向上的维度值
|-
| list
| 除了 hidden、password、checkbox、radio 和按钮以外
| 自动完成选项的 <code>&lt;datalist&gt;</code> 的 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
| 与 <code>&lt;img&gt;</code> 元素的 src 属性含义相同，图片资源的地址
|-
| step
| date、month、week、time、datetime-local、number、range
| 有效的增量值
|-
| type
| 所有类型
| 表单控件的类型
|-
| value
| 所有类型
| 表单控件的初始值
|-
| width
| image
| 与 <code>&lt;img&gt;</code> 元素的 width 属性含义相同
|}