玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

请珍惜小编劳动成果，该文章为小编原创。转载请注明出处。

今天正式開始学习html5了。相比html曾经的版本号。html5新增了好多功能，属性，使我们做出来的界面更加的绚丽。并且使用起来超级简单，这篇文章先来说说html添加的那些input类型和属性。

这些代码是在猎豹浏览器下实现的。

html5新增的input类型有：email,url,number,range,date pickers,datalist,telephone,search,color

email:提交时会自己主动验证输入的内容是否满足格式

邮箱 :<input type="email" name="user_email"/>

url:提交时会自己主动验证输入内容是否为url

url: <input type="url" name="user_url"/>

number:用于输入数字，当中min为最小值。max为最大值，step为点击箭头是数字的变化量，value为默认值，min,max，step,value均可不写

 年龄：<input type="number" name="user_age" min="18" max="120" step="1" value="20"/>

range:用于应该包括一定范围内数字值的输入域,显示为滑动条

 比例:<input type="range" name="user_range" min="10" max="100"/></br>

date pickers:有date,month,week,time,datetime,datetime-local这几种类型。

date--选取年月日，month---选取年月，week---选取年周。time--选取小时和分钟，datetime--选取年月日时间。datetime-local--选取本地时间

这里给一个datetime-local的截图

时间：<input type="datetime-local" name="user_date"/>

datalist:相当于下拉列表，有自己主动补充功能

 网址: <input type="url" list="url_list" name="link" required />      <!-- 自己主动补充 -->
             <datalist id="url_list">
               <option label="web1" value="http://www.web1.com.cn" />
               <option label="web2" value="http://www.web2.com" />
               <option label="web3" value="http://www.web3.com" />
             </datalist>

color:颜色选择器

颜色：<input type="color"/>

还有两个类型是telephone和search。因为我使用时看不出效果来，就不在这里写了。大家自己试试。