HTML 元素用于为基于 Web 的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件,具体取决于设备和user agent。
Try it
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
types
的工作方式相当程度上取决于type属性的值,不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性,则采用的默认类型为 text。
可用的值包括:
Type | 描述 | 基础例子 | Spec |
---|---|---|---|
button | 没有默认行为的按钮,上面显示 value 属性的值,默认为空。 |
||
checkbox | 复选框,可设为选中或未选中。 | ||
color | 用于指定颜色的控件;在支持的浏览器中,激活时会打开取色器。 | HTML5 | |
date | 输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 | HTML5 | |
datetime-local | 输入日期和时间的控件,不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 | HTML5 | |
编辑邮箱地址的区域。类似 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 | 和 的 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 | 和 的 src 属性一样;图像资源的地址 |
step | 数字 type | 有效的递增值 |
type | 所有 | input 表单控件的 type |
value | 所有 | 表单控件的值。以名字/值对的形式随表单一起提交 |
width | image | 与 的 width 属性一样 |
持续补充:
tabindex
tabindex 全局元素指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航。(通常使用tab键)
<p>Click anywhere in this pane, then try tabbing through the elements.</p>
<label>First in tab order:<input type="text"></label>
<div tabindex="0">Tabbable due to tabindex.</div>
<div>Not tabbable: no tabindex.</div>
<label>Third in tab order:<input type="text"></label>
它接受一个整数作为值,具有不同的结果,具体取决于整数的值:
- tabindex=负值 (通常是 tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用 JS 做页面小组件内部键盘导航的时候非常有用。
- tabindex=”0” ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的 DOM 结构来决定的。
- tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。
根据键盘序列导航的顺序,值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。
实际应用
上传文件
<label for="avatar">Choose a profile picture:</label>
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
值 | A DOMString 表示已选择文件的路径 |
---|---|
事件 | change 和 input |
支持的公共属性 | required |
附加属性 | accept , capture , files , multiple |
IDL 属性 | files 和 value |
DOM 接口 | HTMLInputElement |
属性 | 仅适用于类型为file元素的属性 |
方法 | select() |