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">

html5新增input属性 input属性中html5新增哪些属性_html5新增input属性

新增的time属性

是获取的时间

//时间
<input type="time">

html5新增input属性 input属性中html5新增哪些属性_表单_02

新增的week属性

是用来计算你的选择的日期直接变成一年中的第几周

//一年中的第几周
<input type="week">

html5新增input属性 input属性中html5新增哪些属性_表单_03

新增datetime-local属性

这个则就是把date和time的效果结合在一起的,使用方法和前面的date的注意条件和time的条件也是一样的。只是显示数据的样子和date跟time不一样

//显示年 月 日 时间
<input type="datetime-local">

html5新增input属性 input属性中html5新增哪些属性_html5_04

新增number属性

在这儿个里面同样也新增了min(最小值)、max(最大值)和step(根据它自带的按钮的点击进行一个单位增长多少的值)

//数字输入框
<input type="number" min="3" max="9" step="3">

html5新增input属性 input属性中html5新增哪些属性_表单_05

新增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>

html5新增input属性 input属性中html5新增哪些属性_html5新增input属性_06

新增color属性

这个属性是用来设置颜色的,点击这个框会出现一个RGB的色域显示,这色域你可以在上面点击然后直接填充显示颜色的区域。

//颜色
<input type="color" name="" id="">

html5新增input属性 input属性中html5新增哪些属性_html5_07

新增range属性

这个的意思是范围空间控件,在这控件上面有着和number上面的一样的属性,min(最小值)和max(最大值)

<!-- 范围选择控件 -->
        <input type="range" name="range" min="1" max="100">

html5新增input属性 input属性中html5新增哪些属性_html5新增input属性_08

新增url属性
这个使用进行验证你输入是否为网址,如果网址就不会出现提示语,如果验证失败了就会出现提示语,但是这个控件不会出现浏览器的兼容问题

//地址输入框
 请输入网址:<input type="url">

html5新增input属性 input属性中html5新增哪些属性_html5_09

注意:有三个属性主要用在移动端的,那三个属性就是number、tel和email他们使用在手机端的时候键盘会自动的更改为数字