html的input和html5的input
- HTML里面的表单上面的标签和属性:
- 新增date的属性
- 新增的time属性
- 新增的week属性
- 新增datetime-local属性
- 新增number属性
- 新增tel属性
- 新增email属性
- 新增search属性
- 新增color属性
- 新增range属性
我先从字面上来对比:
我先现在常说的html的版本是html4.0,而html5则是html的升级版
我在这里要介绍的是html里面的表单上面的标签和html5的表单上面的标签的
HTML里面的表单上面的标签和属性:
表单上面的input标签上面的type属性:
text(文本输入框)、password(密码框)、radio(单选按钮)、checkbox(多选按钮)、submit(提交按钮)、reset(重置按钮)
表单上面有selectet标签、button标签和textarea标签
而在html5里面的表单上面的type属性上面新增的属性:
新增date的属性
是表示显示可以选择的年月日的,但是选择的年月日只能选择在当前日期之前的日期
//年月日
<input type="date">
新增的time属性
是获取的时间
//时间
<input type="time">
新增的week属性
是用来计算你的选择的日期直接变成一年中的第几周
//一年中的第几周
<input type="week">
新增datetime-local属性
这个则就是把date和time的效果结合在一起的,使用方法和前面的date的注意条件和time的条件也是一样的。只是显示数据的样子和date跟time不一样
//显示年 月 日 时间
<input type="datetime-local">
新增number属性
在这儿个里面同样也新增了min(最小值)、max(最大值)和step(根据它自带的按钮的点击进行一个单位增长多少的值)
//数字输入框
<input type="number" min="3" max="9" step="3">
新增tel属性
这个主要是用在电话的输入,这个在有的浏览器才能显示输入的电话是都输入成功的提示语(在谷歌和IE的浏览器的时候不会出现提示框)
//电话
<input type="tel">
新增email属性
这个主要是用来验证用户输入的值是否验证成功,验证失败就会出现提示语,和tel所提示出来的提示语差不多,这个的兼容和tel的提示框显示的兼容也是一个样的
//邮件的输入框
<input type="email" name="email">
新增search属性
这个属性的意思是搜索,这个输入的时候会出现一个X的符号,然后输入完了的时候点击提交,然后文本框在获取到焦点的时候就会出现在下面你之前输入的内容,还有之前提交的数据他会存储在电脑网页的Local Storage的里面
<input type="search" name="s">
<button>submit</button>
新增color属性
这个属性是用来设置颜色的,点击这个框会出现一个RGB的色域显示,这色域你可以在上面点击然后直接填充显示颜色的区域。
//颜色
<input type="color" name="" id="">
新增range属性
这个的意思是范围空间控件,在这控件上面有着和number上面的一样的属性,min(最小值)和max(最大值)
<!-- 范围选择控件 -->
<input type="range" name="range" min="1" max="100">
新增url属性
这个使用进行验证你输入是否为网址,如果网址就不会出现提示语,如果验证失败了就会出现提示语,但是这个控件不会出现浏览器的兼容问题
//地址输入框
请输入网址:<input type="url">
注意:有三个属性主要用在移动端的,那三个属性就是number、tel和email他们使用在手机端的时候键盘会自动的更改为数字