Html5中form表单元素和属性总结

 

1.      新增表单元素

1)         email：email类型的输入框，在提交表单时，会验证输入的email是否为合法的email格式，多数浏览器还不能对email做出完美的判断，仅能判断是否有@符号，以及@符号前后是否有字符

2)         url：url类型的输入框，在提交表单时，会验证输入的url是否为合法的url；多数浏览器校验时会判断输入值是否以http://开头

3)         number：只能输入数字类型的输入框，

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

 

4)         range：相当于可限定最大最小值的number输入框

5)         datepickers(date,month,week,time,datetime,datetime-local)：日期时间选择器

6)         search：搜索框，显示为普通文本，具有清除功能

7)         color：点击可调用出系统颜色选取窗口

8)         datalist：规定输入域的选项列表，格式如下：

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="3" value="http://www.360.cn" />

<option label="b" value="http://www.baidu.com" />

<option label="q" value="http://www.qq.com" />

</datalist>

在需要引用datalist的输入域中增加list=”xxx”，其中xxx为dataList的id

9)         keygen：

10)     output：

2.      新增form属性

autocomplete：相当于ie里边的自动完成功能，而不是百度等搜索引擎的联想提示功能

novalidate：指定表单是否验证

3.      新增input元素属性

1)         placeholder：占位符属性(类似于hint)，在输入区域为空或者不处于焦点时显示，以前只能用javascript实现

<input type="numbers" name="numbers"  placeholder="请输入有效的数字" />

2)         autofocus：页面加载完毕后，输入域自动获取焦点，适用于所有input输入

<input type="text" name="user_name"  />

3)         form：规定属于域所属于的一个或者多个表单(form)，属于多个form用空格分隔

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

Last name: <input type="text" name="lname" form="user_form" />

4)         表单重写属性

formaction：重写表单的action属性

formenctype：重写表单的enctype属性

formmethod：重写表单的method属性

formnovalidate：重写表单的novalidate属性

formtarget：重写表单的target属性

<form action="demo_form.asp" method="get" id="user_form">

E-mail: <input type="email" name="userid" /><br />

<input type="submit" value="Submit" />

<br />

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

<br />

<input type="submit" formnovalidate="true" value="Submit without validation" />

<br />

</form>

重写这些属性，对于创建不同的提交按钮特别有用

5)         Height和width属性：用于input类型为image的输入框，显示图片的宽度、高度

<input type="image" src="img_submit.gif" width="99" height="99" />

 

6)         List属性：使用该属性可以使输入域显示datalist中定义的选项列表，适用于text、search、url、telephone、email、datepickers、number、range、color

示例前面已经有了

7)         Min、max、step属性：为数字(number、range)、日期类型(datepickers)的输入域设定限制

Min：规定输入域所允许的最小值

Max：规定输入域所允许的最大值

Step：为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

8)         Multiple属性：这个不是html5的新属性，但是其功能有所扩展，适用于email和file这两种输入域。用于email时多个email之间用逗号分隔，用于file时一次可选择多个文件

 

9)         Novalidate：适用于form和text, search, url, telephone, email, password, date pickers, range以及 color等input输入域，用于form时代表form提交时不做验证，用于input输入域时代表提交form时对该输入域不做验证

 

10)     Pattern：自定义正则表达式来验证表单输入项，适用于text, search, url, telephone, email 以及password。

<input type="text" name="zip" id="zip" placeholder="5 digits" pattern="\d{5}" title="The zip code should consist of five numbers only">

         如上所示：将只能输入5位数字的邮编

11)     Required：标明该输入项为必填项，适用于text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file