玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
2017-04-19 08:58
615 查看
请珍惜小编劳动成果,该文章为小编原创。转载请注明出处。
今天正式開始学习html5了。相比html曾经的版本号。html5新增了好多功能,属性,使我们做出来的界面更加的绚丽。并且使用起来超级简单,这篇文章先来说说html添加的那些input类型和属性。
这些代码是在猎豹浏览器下实现的。
html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color
email:提交时会自己主动验证输入的内容是否满足格式
![](https://oscdn.geek-share.com/Uploads/Images/Content/201406/3645cdf1175270dda04426668565980e)
url:提交时会自己主动验证输入内容是否为url
![](https://oscdn.geek-share.com/Uploads/Images/Content/201406/09d0fc3964fa902982446ed0953a81b1)
number:用于输入数字,当中min为最小值。max为最大值,step为点击箭头是数字的变化量,value为默认值,min,max,step,value均可不写
![](https://oscdn.geek-share.com/Uploads/Images/Content/201704/81b8569fda17a662903da58fd57ef1e5)
range:用于应该包括一定范围内数字值的输入域,显示为滑动条
![](https://oscdn.geek-share.com/Uploads/Images/Content/201406/e96a8ce38157fd7109bbd774c62e8ab3)
date pickers:有date,month,week,time,datetime,datetime-local这几种类型。
date--选取年月日,month---选取年月,week---选取年周。time--选取小时和分钟,datetime--选取年月日时间。datetime-local--选取本地时间
这里给一个datetime-local的截图
![](https://oscdn.geek-share.com/Uploads/Images/Content/201406/9ab6ad3b6e24ed5381e30e17205c1153)
datalist:相当于下拉列表,有自己主动补充功能
![](https://oscdn.geek-share.com/Uploads/Images/Content/201704/0e5e979a4498c7f88fe143f7ab328a4b)
color:颜色选择器
![](https://oscdn.geek-share.com/Uploads/Images/Content/201406/c11dce7046ddd5295185612a75cd0dc0)
还有两个类型是telephone和search。因为我使用时看不出效果来,就不在这里写了。大家自己试试。
今天正式開始学习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。因为我使用时看不出效果来,就不在这里写了。大家自己试试。
相关文章推荐
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 玩转 html5 (一) --- 盘点 html5 新增的那些酷酷的 input 类型和属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 盘点 html5 新增的那些酷酷的 input 类型和属性
- 盘点 html5 新增的那些酷酷的 input 类型和属性
- html5 新增input类型与属性
- HTML5中新增的input类型及其属性
- HTML5中input标签新增的类型
- HTML5 input新增的几种类型(数字、日期、颜色选取、范围)
- HTML5探索一(那些新增的标签和属性)
- html5中input新增属性
- HTML5 Input 类型,HTML5 表单元素,HTML5 表单属性
- HTML5 INPUT新增属性
- HTML5新增的8类INPUT输入类型介绍
- HTML5 input元素新增和改良的类型与其js验证
- html5中新增类型以及属性