HTML5 新的表单属性

HTML5 的 <form> 和 <input>标签都添加了一些新属性。

一、<form>新属性:

1、autocomplete:属性规定 form 域应该拥有自动完成功能(详情看文章 关于form和input的autocomplete属性

2、novalidate;属性描述了 <input> 元素在表单提交时无需被验证。

注意:在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

二、<input>新属性:

1、autocomplete:规定input 域应该拥有自动完成功能(详情看文章 关于form和input的autocomplete属性

2、autofocus:属性规定在页面加载时,域自动地获得焦点。

注意: Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。

3、form:form 属性规定输入域所属的一个或多个表单。

<form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> Last name: <input type="text" name="lname" form="form1">

虽然Last name不在表单form1内,但也属于表单form1的一部分

注意: IE 不支持 form 属性

4、formaction:属性用于描述表单提交的URL地址并且他会覆盖form中的action。

注意1: The formaction 属性用于 type="submit" 和 type="image".

注意2: Internet Explorer 9及更早 IE 版本不支持 input 标签的 formaction 属性。

5、formenctype:属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

注意1: 该属性与 type="submit" 和 type="image" 配合使用。

注意2: Internet Explorer 9及更早 IE 版本不支持 input 标签的 formenctype 属性。

6、formmethod:属性定义了表单提交的方式。该属性会覆盖form中的method。

<input type="submit" formmethod="post" formaction="demo-post.php"

注意1: 该属性可以与 type="submit" 和 type="image" 配合使用。

注意2: Internet Explorer 9及更早 IE 版本不支持 input 标签的 formmethod 属性。

7、formnovalidate:是一个 boolean 属性.属性描述了 <input> 元素在表单提交时无需被验证。并且它会覆盖 <form> 元素的novalidate属性

注意1: formnovalidate 属性与type="submit一起使用

注意2: Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 formnovalidate 属性。

8、formtarget:指定一个名称或一个关键字来指明表单提交数据接收后的展示。该属性覆盖form中的target属性。

属性值:_blank,_self,_parent_top framname,

注意1: formtarget 属性与type="submit" 和 type="image"配合使用.

注意2: Internet Explorer 9及更早 IE 版本不支持 input 标签的 formtarget 属性。

9、height 与 width:于 image 类型的 <input> 标签的图像高度和宽度。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。

10、list:规定输入域的 datalist。datalist 是输入域的选项列表。

注意1:list值为datalist元素的id。

注意2: Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。

11、min、max与 step:于为包含数字或日期的 input 类型规定限定(约束)。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

注意1: Internet Explorer 9及更早 IE 版本,Firefox 不支持 input 标签的 max 和 min 属性。

注意2: 在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间,IE 10 不支持这些输入类型。

12、multiple:是一个 boolean 属性规定<input> 元素中可选择多个值。

可用于选择多个文件:

file

注意1: multiple 属性适用于以下类型的 <input> 标签:email 和 file。

注意2: Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。

13、pattern (regexp):描述了一个正则表达式用于验证 <input> 元素的值。

注意1:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。

注意2: Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 pattern 属性。

14、placeholder提供一种提示(hint),描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意1: placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

注意2: Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。

15、required:是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域(不能为空)。

注意1:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

注意2: Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。

发布了39 篇原创文章 · 获赞 30 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/HU_YEWEN/article/details/84393545