Html5表单新控件详解
新的表单结构
HTML5中的表单结构变的更加的自由，原先我们在HTML4中所有的表单内容都得在一对form标签中，类似于这样：
<form action="" method="post">
<input type="text" name="account" value="请输入账号" />
</form>
在HTML5中表单控件完全可以放在页面任何位置，然后通过新增的form属性指向控件所属表单的id值，即可关联起来。
这样我们代码的自由性就会更高了，类似于下面这样：<form id="myform"></form>
<input type="text" form="myform " value="">
...
新增type属性
接下来，我们来认识一些新的控件：
1、email输入类型
说明：此类型要求键入格式正确的email地址，否则浏览器是不允许提交的,并会有一个错误信息提示。
此类型必须指定name值，否则无效果。
格式：<input type=email name=email>
错误效果展示(Firefox)：
图3-1
正确格式展示(Firefox)：
图3-2
2.URL输入类型
说明：此类型要求输入格式正确的url地址，否则浏览器是不允许提交的,并会有一个错误信息提示。
此类型必须指定name值，否则无效果。
格式：<input type=url name=url>
错误格式展示(Firefox)：
图3-3
正确格式展示(Firefox)：
图3-4
3.时间日期相关输入类型
说明：时间日期相关输入类型这一系列表单控件给我们提供了丰富的用于日期选择的表单样式，包括年、月、周、日等。
只需要一行代码就可以实现交互性非常强的效果，然而遗憾的是目前在Windows下仅有ChromeE和Opera支持。
格式：<input type=date name=my_date>
效果展示(Chrome)：
图3-5
格式：<input type=time name=my_time>
效果展示(Chrome)：
图3-6
格式：<input type=month name=my_month>
效果展示(Chrome)：
图3-7
格式：<input type=week name=my_week>
效果展示(Chrome)：
图3-8
格式：<input type=datetime name=my_datetime> 经测试，datetime类型在任何浏览器中都无效果
格式：<input type=datetime-local name=my_localtime>
选取本地时间
效果展示(Chrome)：
图3-9
4.number输入类型
说明：用于输入一个数值，可以通过属性设置最小值、最大值、数字间隔、默认值(IE 不支持)。
格式：<input type="number" max=10 min=0 step=1 value=5 name=number> max：规定允许的最大值；
min：规定允许的最小值；
step：规定合法的数字间隔；
value：规定默认值；
效果展示(Firefox)：
图3-10
5.range滑块类型
说明：和前面的number类似,只不过这里是用滑块展示,如果是在移动端展示的话,给用户的体验会比较好。
格式：<input type="range" max=10 min=0 step=1 value=5 name=val>
max：规定允许的最大值；
min：规定允许的最小值；
step：规定合法的数字间隔；
value：规定默认值；
效果展示(Firefox)：
图3-11
6.search输入类型
说明：此类型表示输入的将是一个搜索关键字,通过设置results=s可显示一个搜索小图标。
格式：<input type=search result=s>
效果展示(Chrome)：
图3-12
7.tel输入类型
说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。
因为不同国家不同地区的电话号码差别明显，所以想要添加更多限制可以使用我们下一节会讲到的pattern等属性。
格式：<input type=tel>
8.color输入类型
说明：一个非常炫酷的效果,并且在最新的火狐、谷歌、欧朋浏览器中都支持，可让用户通过颜色选择器选择一个颜色值，以十六进制保存，可以通过value访问到，并且可以自定义颜色组。
格式：<input type=color>
效果展示(Chrome)：
图3-13
新增表单控件
HTML5中新增的表单标签
1.datelist标签
说明：datalist 元素规定输入域的选项列表。
列表是通过datalist 内的option 元素创建的。
如需把datalist绑定到输入域，用输入域的list属性引用datalist的id.列表当中的value属性是必须，新版本的Chrome和Opera支持该属性。
格式：
<input type="text" list="my_list" placeholder="热门书籍排行" name="seniority">
<datalist id="my_list">
<option label="Top1" value="HTML5实战宝典">
<option label="Top2" value="HTML5实战宝典">
<option label="Top3" value="HTML5实战宝典">
</datalist>
效果展示(Chrome)：
图3-14
2.keygen 标签
说明：keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥存储于客户端，公钥则被发送到服务器。
公钥可用于之后验证用户的客户端证书。
格式:用户名:<input type="text" name="my_name" />
加密:<keygen name="security">
效果展示(Chrome)：
图3-15
3.output标签
说明：output用于计算结果的输出，Firefox、Chrome、Opera都支持此标签。
格式：
<script>
//页面加载完成后执行
window.onload=function(){
//通过id获取表单元素
var number= document.getElementById('number');
var total=document.getElementById('total');
//添加失去焦点事件
number.onblur=function(){
//计算总价利用单价乘以数目
var
totalprice=parseInt(document.getElementById('price').value)*parseInt(this.value) //将结果输出
total.value=totalprice;
}
}
</script>
<body>
<form action="">
单价:<input type="text" value="10" id="price" readonly="true"> 数目:<input type="text" placeholder="请输入数目"id="number"> 总价:<output id="total"></output>
</form>
</body>
效果展示(Chrome)：
图3-16。