HTML5新增的表单类型

HTML5新增的表单类型

整理时间：2017-10-4 整理人：info#haixia.net(将#替换成@，来信必复)

序号	属性名称	描述
1	number	仅限数值型数据，可设置区间范围与步长增量
2	date	仅限日期型数据，可设置区间范围与步长增量
3	time	仅限时间型数据，可设置区间范围与步长增量
4	email	限定必须输入电子邮箱地址。如@
5	search	不限定内容，当有内容时，控件尾部有一个取消符号
6	url	限定必须是以http://或https://开头的合法的url地址
7	color	自动打开系统的色板或拾色器，进行颜色选择

• 1、number:仅限数值型数据

<input type="number" name="age" min="18" max="120" step="5">

• 2、date:仅限日期型数据

<input type="date" min="2014-10-10" max="2018-10-20" value="2017-03-08">

• 3、time:仅限时间型数据，仅允许设置小时区间，分钟供参考

<input type="time" name="time" min="10:10" max="14:20" value="10:20">

• 4、email:仅限电邮地址

<input type="email" name="email" placeholder="yourname@mail.com">

• 5、search:有内容时，会显示一个取消图标

<input type="search" placeholder="请输入查询关键字">

• 6、url:仅限以http://或者https://开头的url地址

<input type="url" name="url" placeholder="请输入以http://或https://起始的完整网址" size="40">

• 7、color:通过系统调色板来获取颜色，返回16进制颜色值

<form action="" method="get">
<input type="color" name="color" id="color">
<input type="button" value="获取颜色值" id="btn">
<input type="text" name="color_value" id="color_value">
</form>
<script>
document.getElementById('btn').onclick=function(){
document.getElementById('color_value').value=document.getElementById('color').value;
}
</script>