基于 Web 的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件,具体取决于设备和 user agent。
应用场景
按钮、复选框、颜色选择器、年月周日时间选择器、邮箱格式输入、文件上传、数字输入、密码输入、单选按钮、范围值滑动选择器、重置按钮、搜索框、提交按钮、
<input type="text" />
控件类型 type
button:无缺省行为按钮。
checkbox: 复选框。
必须使用 value 属性定义此控件被提交时的值。
使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。
color:HTML5 用于指定颜色的控件。
date:HTML5 用于输入日期的控件(年,月,日,不包括时间)。
datetime-local:HTML5 用于输入日期时间控件,不包含时区。
email:HTML5 用于编辑 e-mail 的字段。
合适的时候可以使用 :valid 和 :invalid CSS 伪类。
- file:此控件可以让用户选择文件。
使用 accept 属性可以定义控件可以选择的文件类型。
hidden:不显示在页面上的控件,但它的值会被提交到服务器。
image:图片提交按钮。
必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
还可以使用 height 和 width 属性以像素为单位定义图片的大小。
month:HTML5 用于输入年月的控件,不带时区。
number: HTML5 用于输入浮点数的控件。
password:一个值被遮盖的单行文本字段。
使用 maxlength 指定可以输入的值的最大长度。
- radio:单选按钮。
必须使用 value 属性定义此控件被提交时的值。
使用 checked 必须指示控件是否缺省被选择。
在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
- range:HTML5 用于输入不精确值控件。
如果未指定相应的属性,控件使用如下缺省值: min:0 max:100 value:min + (max-min)/2,或当 max 小于 min 时使用 min step:1
reset:用于将表单所内容设置为缺省值的按钮。
search:HTML5 用于输入搜索字符串的单行文本字段。
换行会被从输入的值中自动移除。
submit:用于提交表单的按钮。
tel:HTML5 用于输入电话号码的控件;
换行会被自动从输入的值中移除 A,但不会执行其他语法。
可以使用属性,比如 pattern 和 maxlength 来约束控件输入的值。
恰当的时候,可以应用 :valid 和 :invalid CSS 伪类。
- text:单行字段;
换行会将自动从输入的值中移除。
time:HTML5 用于输入不含时区的时间控件。
url:HTML5 用于编辑 URL 的字段。
用户可以输入空白或无效的地址。换行会被自动从输入值中移队。
可以使用如:pattern 和 maxlength 样的属性来约束输入的值。
恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
- week:HTML5 用于输入一个由星期-年组成的日期,日期不包括时。
常用属性
autocomplete: 自动填充
autofocus: 当表单被呈现在网页上时,焦点会自动落在此元素上
disabled: 禁用
list: 指向一个 id 为 list 属性值的 datalist 元素, 为这个 input 元素提供建议值
name
readonly: 不能被编辑
required: 只有当此 input 元素有值时,整个表单才能提交
tabindex: 一个数字,相当于序号,当用户按键盘 Tab 键时,焦点会按序号从小到大落在对映的元素上
当此值为-1 时,表示焦点永远不会通过 Tab 键落在此元素上
value: 当前的值
accept: MIME 类型