表单在网页设计中的作用非常重要，HTML5又增加了表单方面的诸多功能，包括增加input输入类型，input属性，form元素，form属性等，解决了我们以前比较头疼或者繁琐的功能。
|
新增的输入类型 |
1.email输入类型：此类型是一种专门用于输入E-mail地址的文本输入框，在提交表单时会自动验证email输入框的值，如果值无效则浏览器是不允许提交的,并会有一个错误信息提示。
<input type="email" name="user_email" />
2.number类型：用于包含数值的输入域。还可以设定数字的限制即规定允许的最大最小值，合法的数字间隔等，不在范围内的数字会出现错误提示。
<input type="number" name="number1" > <input type="number" name="number1" min="1" max="20" step="4">
3.url类型：文本域要求输入格式正确的URL地址。
<input type="url" name="user_url" />
4.range类型：此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
<input type="range" name="range1" min="1" max="30" />
5.日期时间相关输入类型：输入日期，这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件。
<input type="date" name=" date1" /><!--选取日，月，年--> <input type="month" name=" month1" /><!--选取月，年--> <input type="week" name="week1" /><!--选取周，年--> <input type="time" name="time1" /><!--选取时间（小时和分钟）--> <input type="time" name="time1" step="5" value="09:00"> <input type="datetime" name="datetime1" /><!--选取时间、日、月、年（UTC 时间）--> <input type="datetime-local" name="datetime-local1" /><!--选取时间、日、月、年（本地时间）-->
6.search类型：此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.
<input type="search" name="search1" />
7.tel类型：此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
<input type="tel" name="tel1" />
8.color类型：用于颜色选择域。点击时会弹出一个颜色选择框。
<input type="color" name="color1" />
| 新增属性 |
1.autocomplete属性：此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="/formexample.asp" method="get" autocomplete="on"> 姓名：<input type="text" name="name1" /><br /> 职业：<input type="text" name="career1" /><br /> 电子邮件地址：<input type="email" name="email1" autocomplete="off" /><!--用off单独设置这一行，当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。--><br /> <input type="submit" value="提交信息" /> </form> <form autocompelete="on"> <!--属性设置为on时可以使用HTML5中新增的datalist和list属性提供一个数据列表供用户选择--> 输入你最喜欢的城市名称：<input type="text" id="city" list="cityList" "> <datalist id="cityList" style="display:none;"> <option value="BeiJing">BeiJing</option> <option value="QingDao">QingDao</option> <option value="QingZhou">QingZhou</option> <option value="QingHai">QingHai</option> </datalist> </form>
2.autofocus属性：规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。
<input type="submit" value="同意" autofocus="on"><!--属性值为on则此按钮获得焦点-->
3.form属性：规定输入域所属的一个或多个表单。适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id。
<form action="" method="get" id="form1"> 请输入姓名：<input type="text" name="name1" autofocus/> <input type="submit" value="提交"/> </form> <p>下面的输入框在 form 元素之外，但因为指定的form属性，并且值为表单的id，所以该输入框仍然是表单的一部分。</p> 请输入住址：<input type="text" name="address1" form="form1" />
4.表单重写属性：用于重写 form 元素的某些属性设定。
注意表单重写属性只适应于submit 和 image
<form id="user_form"> <input type="email" name="userid" /> <input type="submit" value="Submit" /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <input type="submit" formnovalidate="true" value="Submit without validation" /> </form>
5.required属性：表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.
<form action="demo.asp" method="get"> 请输入姓名: <input type="text" name="usr_name" required="required" /> <input type="submit" value="提交" />
6.placeholder属性：提供一种提示。适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
请输入邮政编码: <input type="text" name="m" placeholder="请输入邮政编码" /> <input type="submit" value="提交" />
7.pattern属性:规定用于验证 input 域的内容是否与自定义的正则表达式相匹配，适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
请输入邮政编码: <input type="text" name="zip_code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码" /> <input type="submit" value="提交" />
8.multiple属性：规定输入域中可选择多个值。适用于email 和 file。
请选择要上传的多个文件： <input type="file" name="file1" multiple="multiple" /> <input type="submit" value="提交" />
9.max/min/step属性:限制值的输入范围,以及值的输入渐进程度
请输入数值：<input type="number" name=number1" min="0" max="12" step="4" /> <input type="submit" value="提交" />
10.list属性:该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
请输入网址： <input type="url" list="url_list" name="weblink" /> <datalist id="url_list"> <option label="新浪" value="http://www.sina.com.cn" /> <option label="搜狐" value="http://www.sohu.com" /> <option label="网易" value="http://www.163.com" /> </datalist>
11.novalidate属性：规定在提交表单时不应该验证 form 或 input 域。适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
<form novalidate="true"> <input type="email" name="user_email" /> <input type="submit" /> </form>
| 新增元素 |
1.datalist元素：规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。
例子请看list属性
2.keygen元素：提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
请输入用户名: <input type="text" name="usr_name" /><br> 请选择加密强度: <keygen name="security" />
3.output元素：用于不同类型的输出，比如计算或脚本输出
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <head> <script type="text/javascript"> function multi(){ a=parseInt(prompt("请输入第1个数字。",0)); b=parseInt(prompt("请输入第2个数字。",0)); document.forms["form"]["result"].value=a*b; } </script> </head> <body onload="multi()"> <form action="/testform.asp" method="get" name="form"> 两数的乘积为:<output name="result"></output> </form> </body> </html>