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

Try it

  1. <label for="name">Name (4 to 8 characters):</label>
  3. <input type="text" id="name" name="name" required
  4.        minlength="4" maxlength="8" size="10">

types

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

可用的值包括：

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

属性

元素由于拥有诸多属性而异常强大，其中前文举例说明的type属性尤其重要 面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些 type相关。

元素的属性包括全局 HTML 属性和以下属性：

属性 相关的 type 描述
accept file 用于规定文件上传控件中期望的文件类型
alt image image type 的 alt 属性，是可访问性的要求。
autocomplete 所有 用于表单的自动填充功能
autofocus 所有 页面加载时自动聚焦到此表单控件
capture file 文件上传控件中媒体拍摄的方式
checked radio, checkbox 用于控制控件是否被选中
dirname text, search 表单区域的一个名字，用于在提交表单时发送元素的方向性
disabled 所有 表单控件是否被禁用
form 所有 将控件和一个 form 元素联系在一起
formaction image, submit 用于提交表单的 URL
formenctype image, submit 表单数据集的编码方式，用于表单提交
formmethod image, submit 用于表单提交的 HTTP 方法
formnovalidate image, submit 提交表单时绕过对表单控件的验证
formtarget image, submit 表单提交的浏览上下文
height image 和 input - 图1 的 height 属性相同；垂直方向
list 绝大部分 自动填充选项的
的 id 值
max 数字 type 最大值
maxlength password, search, tel, text, url value 的最大长度（最多字符数目）
min 数字 type 最小值
minlength password, search, tel, text, url value 的最小长度（最少字符数目）
multiple email, file 布尔值。 是否允许多个值
name 所有 input 表单控件的名字。以名字/值对的形式随表单一起提交
pattern password, text, tel 匹配有效 value 的模式（pattern）
placeholder password, search, tel, text, url 当表单控件为空时，控件中显示的内容
readonly (en-US) 绝大部分 布尔值。存在时表示控件的值不可编辑
required (en-US) 绝大部分 布尔值。表示此值为必填项或者提交表单前必须先检查该值
size email, password, tel, text 控件的大小
src image 和input - 图2
的 src 属性一样；图像资源的地址
step 数字 type 有效的递增值
type 所有 input 表单控件的 type
value 所有 表单控件的值。以名字/值对的形式随表单一起提交
width image 与 input - 图3
的 width 属性一样

持续补充：
tabindex
tabindex 全局元素指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航。（通常使用tab键）

  1. <p>Click anywhere in this pane, then try tabbing through the elements.</p>
  3. <label>First in tab order:<input type="text"></label>
  5. <div tabindex="0">Tabbable due to tabindex.</div>
  7. <div>Not tabbable: no tabindex.</div>
  9. <label>Third in tab order:<input type="text"></label>

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

  • tabindex=负值 (通常是 tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用。
  • tabindex=”0” ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。
  • tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

实际应用

上传文件

  1. <label for="avatar">Choose a profile picture:</label>
  3. <input type="file"
  4.        id="avatar" name="avatar"
  5.        accept="image/png, image/jpeg">
值 A DOMString
表示已选择文件的路径
事件 change
和 input
支持的公共属性 required
附加属性 accept
, capture
, files
, multiple
IDL 属性 files 和 value
DOM 接口 HTMLInputElement
属性 仅适用于类型为file元素的属性
方法 select()

事件说明（重要）
当一个 ,