之前的教程中已经简单的介绍过了表单，早期的网页中为了实现复杂的交互效果，通常需要使用 div+css 模拟复杂的表单类型实现类似日期、滑块条、颜色选择等效果。HTML5 标准中考虑到这种情况，增加了不少的复杂表单效果。本章主要介绍 HTML5 新增的几种增强的表单类型。
此类型的表单跟普通 text 类型的表单类型表现方式一致，只是在输入完成之后如果不符合 email 类型浏览器会有提示，且不允许提交，定义方式如下：
<input type=email>代码块预览 复制
以下实例使用 email 类型的表单实现了一个简单的注册功能：
实例演示
预览
复制
<script> function beforeSend(){ if(document.getElementById("password").value != document.getElementById("password1").value) return alert("请输入正确的密码"); } </script> <form method="post" action="/redister.html" onsubmit='beforeSend()'> <p><label for="loginName">登录名：</label><input name='loginName' type='text' pattern=".{3,20}">(3~20个字符)</p> <p><label for="password">登录密码：</label><input id='password' name='password' type='password' pattern=".{6,20}">(至少6位)</p> <p><label for="password1">重复密码：</label><input id='password1' name='password1' type='password' pattern=".{6,20}">(至少6位)</p> <p><label for="email">邮箱：</label><input name='email' type='email'>(请输入正确的邮箱地址)</p> <input type='reset' value='重置'><button type=submit>注册</button> </form>代码块预览 复制
url 类型的表单视觉展现跟 text 类型的一致，只是在输入完成之后如果不符合 URL 类型浏览器会有提示，且不允许提交，语法如下：
<input type='url'>代码块预览 复制
以下示例展示了 url 表单的实际使用场景：
实例演示
预览
复制
<form> <label>姓名：</label><input type=text name='name' pattern=".{3,20}"><!--pattern属性用于约束输入值--> <label>电话：</label><input type=tel name='phone' ><!--使用tel类型表单--> <label>住址：</label><input type=text name='address' pattern=".{5,50}"> <label>个人主页：</label><input type=url name='url'><!--使用url类型表单--> <input type='reset' value='重置'> <button type=submit>提交</button> </form>代码块预览 复制
number 类型的表单也跟 text 表现形式一致，但是浏览器会强制不能输入非数字类型的字符，表单最后侧默认会有上下两个按钮，语法如下：
实例演示
预览
复制
<input type=number>代码块预览 复制
tel 类型要求输入一个电话号码，但实际上它并没有特殊的验证，与 text 类型没什么区别:
实例演示
预览
复制
<input type=tel>代码块预览 复制
此类型将显示一个可拖动的滑块条，并可通过设定 max/min/step 值限定拖动范围。拖动时会反馈给 value 一个值。
实例演示
预览
复制
<input type=range min=20 max=100 step=2 >代码块预览 复制
在实际项目中可以根据动态获取滑块的 value 值，来实现一定的效果。以下展示了一个使用 range 表单实现了一个动态缩放图片的功能：
实例演示
预览
复制
<!DOCTYPE html> <html> <head> <title>使用滑动条缩放图片</title> </head> <body style=""> <canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;background:black"> 你的浏览器不支持canvas。 </canvas> <input type="range" id="range" min="0.5" max="5.0" step="0.01" value="1.0" style="display: block;margin: 20px auto;width: 800px;"/><!--定义滑动条--> </body> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var slider = document.getElementById("range"); var image = new Image(); window.onload = function(){//浏览器加载完成之后触发 canvas.width = 600; canvas.height = 400; image.src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"; //加载图片 image.onload = function() { slider.onmousemove = function(){//通过监听鼠标事件动态获取滑块的value值 var scale = slider.value; var width = canvas.width * scale; var height = canvas.height * scale; var dx = canvas.width/2 - width/2; var dy = canvas.height/2 - height/2; context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(image, dx, dy, width, height);//设置图片的缩放度 }; }; }; </script> </html>代码块预览 复制
此类型表单，可让用户通过颜色选择器选择一个颜色值，并反馈到 value 中，可以设置默认值，语法如下：
实例演示
预览
复制
<input type=color>代码块预览 复制
实际项目中，一般用来作为为画笔或者绘图选择颜色，以下示例展示了一个简单的颜色选择器表单：
实例演示
预览
复制
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>颜色选择器</title> </head> <body> <form name="test" id="test" method="post" action="test.php"> 选择颜色:<input type="color" form="ant" name="color"/> <input type="submit" value="提交"> </form> </body> </html>代码块预览 复制
这个类型的表单包含几种类型，用来实现繁琐的日历控件，效果各有不同，语法如下：
<input type=date ><!-- 日期 --> <input type=time ><!-- 时间 --> <input type=datetime ><!-- 日期+时间 （已经废弃）--> <input type=datetime-local ><!-- 日期+时间 --> <input type=month ><!-- 月份 --> <input type=week ><!-- 星期 -->代码块预览 复制
可以运行下面代码，试试效果：
实例演示
预览
复制
<p>日期：<input type=date ></p> <!-- 日期 --> <p>时间：<input type=time ></p> <!-- 时间 --> <p>日期+时间(已经废弃):<input type=datetime ></p> <!-- 日期+时间 （已经废弃）--> <p>日期+时间:<input type=datetime-local ></p> <!-- 日期+时间 --> <p>月份:<input type=month ></p> <!-- 月份 --> <p>星期:<input type=week ></p> <!-- 星期 -->代码块预览 复制
