HTML5为用户添加了很多新的表单类型,下面为大家整理一下:
input的type属性拥有更多的值:
-
button
:无缺省行为按钮。 -
checkbox
: 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。 -
color
:HTML5 用于指定颜色的控件。 -
date:
HTML5 用于输入日期的控件(年,月,日,不包括时间)。 -
datetime
:HTML5 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。 -
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的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如:pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用:valid
和:invalid
CSS 伪类。 -
week
:HTML5 用于输入一个由星期-年组成的日期,日期不包括时区。
input元素页拥有了一些新的属性:
- placeholder:
placeholder
特性作用于
与 <input>
元素上,提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。<textarea>
- autofocus:
autofocus
特性让你能够指定一个表单控件,当页面载入后该表单自动获得焦点,除非用户覆盖它,例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus
特性,它是一个 Boolean 值。这个特性适用于 <input>
,<button>
,<select>
,与
元素。例外情况是,如果一个 <textarea>
autofocus
元素的 type
特性值设置成了 hidden,则
autofocus
无法生效(就是说,你无法让一个隐藏控件自动获得焦点)。
html对于表单元素的约束验证:
-
<input>
,<select>
, 和<textarea>
元素上的required
特性,指定必须提供该元素的值。(在<input>
元素上,required
只能与特定的type
特性值结合起来生效。) -
<input>
元素的step
特性(与min
与max
特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符,则它无法通过验证。 -
<input>
与<textarea>
元素的maxlength
特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。 -
type
的url
与email
值分别用于限制输入值是否为有效的 URL 或电子邮件地址。
此外,若要阻止对表单进行约束验证,你可以在 <form>
上设置 novalidate
特性,或在 <button>
与 <input>
元素(当 type
是 submit
或 image
)上设置 formnovalidate
特性。这些特性指定了当表单提交时不做验证。