HTML5增加与改良的input元素
h5中form表单中input新增的属性值
在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢?在下面咱们有几个场景来看,你就明白啦~
假如咱们需要把页面中不同的表单元素提交,而这些表单元素又分布在HTML中的各个位置,那么Form就只能包含所有的Form标签了。
HTML5的方法:
- <form id="form1" action="http://www.w3cfuns.com/">
- <input type="submit" value="提交"/>
- </form>
- <input id="userName" name="userName" form="form1" type="text"/>
- <input id="userPwd" name="userPwd" form="form1" type="password"/>
- <input id="userAge" name="userAge" type="text"/>
这里的form属性=表单的ID,这样一来,这些元素到底归那个表单就一目了然了,这个for属性,你可以理解为label中的for属性,只不过在HTML5中的这种情况下,他就属于fome1的元素了。现在再看代码,干净利索多了,项目文件也不大,易于维护。
在过去我们制作此种类型输入框,会用到不少JS验证,如今,有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。
1、URL类型:
- <form>
- <input name="urls" type="url" value="http://www.w3cfuns.com/"/>
- <input type="submit" value="提交"/>
- </form>
设置此类型后,从外观上来看与普通的元素差不多,可是如果你将此类型放到表单中之后,当点击提交按钮,如果此输入框中输入的不是一个URL地址,将无法提交。
运行效果如下图:
2、Email类型:
- <form>
- <input name="urls" type="email" value="http://www.w3cfuns.com/"/>
- <input type="submit" value="提交"/>
- </form>
如果我们讲上面的URL类型的代码中的type修改为email,那么在表单提交的时候,会自动验证此输入框中的内容是否为email格式,如果不是,则无法提交。
运行效果如下图:
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的
1、Date类型:
- <form>
- <input id="w3cfuns_date" name="w3cfuns.com" type="date"/>
- <input type="submit" value="提交"/>
- </form>
如果在之前,我们使用js+css+dom才能实现日历选择日期的效果,在HTML5中,我们只需要设置input为date类型即可,提交表单的时候也不需要我们验证数据了,它已经帮我们实现了。
运行效果如下图:
2、Time类型:
- <form>
- <input id="w3cfuns_time" name="w3cfuns.com" type="time"/>
- <input type="submit" value="提交"/>
- </form>
此类型是一个专门用来输入时间的文本框,在提交的时候检查是否输入了有效的时间。
运行效果如下图:
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170147857-884141325.png)
3、DateTime类型:
- <form>
- <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
- <input type="submit" value="提交"/>
- </form>
datetime类型的input元素是专门用来输入UTC日期和实践的文本框,在提交的时候,对日期和时间进行有效的检查。
运行效果如下图:
4、DateTime-Local类型:
- <form>
- <input id="w3cfuns_datetime-local" name="w3cfuns.com" type="datetime-local"/>
- <input type="submit" value="提交"/>
- </form>
此类型与datatime类型差不多,只不过是用来输入本地的日期和时间。
运行效果如下图:
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170318435-1481434929.png)
5、Month类型:
- <form>
- <input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
- <input type="submit" value="提交"/>
- </form>
month是一种专门输入月份的文本框,在日历中,你只能选择某一个月,不能选择某一天。
运行效果如下图:
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170352826-1541723681.png)
6、Week类型:
- <form>
- <input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
- <input type="submit" value="提交"/>
- </form>
week是专门用来输入周(星期)的文本框,W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周,同样不能选择某一天。
运行效果如下图:
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170430513-1802168906.png)
- <form>
- <input id="w3cfuns_date" name="w3cfuns.com" type="number"/>
- <input type="submit" value="提交"/>
- </form>
min:此输入框的最小值
max:此输入框的最大值
step:当点击上下箭头数值一次跳几个
value:表示此输入框的默认值
2、range类型:
- <form>
- <input id="w3cfuns_range" name="w3cfuns.com" type="range"/>
- <input type="submit" value="提交"/>
- </form>
min:此输入框的最小值
max:此输入框的最大值
step:当点击上下箭头数值一次跳几个
value:表示此输入框的默认值
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170617763-1275764553.png)
3、search类型:
- <form>
- <input id="w3cfuns_search" name="w3cfuns.com" type="search"/>
- <input type="submit" value="提交"/>
- </form>
- input[type="search"]{-webkit-appearance:textfield;}
4、tel类型:
- <form>
- <input id="w3cfuns_tel" name="w3cfuns.com" type="tel"/>
- <input type="submit" value="提交"/>
- </form>
5、color类型:
- <form>
- <input id="w3cfuns_color" name="w3cfuns.com" type="color"/>
- <input type="submit" value="提交"/>
- </form>
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170841435-261241540.png)
6、output标签:
- <form>
- <input id="w3cfuns_range" name="w3cfuns.com" type="range"/>
- <output id="w3cfuns_output" name="w3cfuns.com" type="output" value="w3cfuns_range.value">50</output>
- <input type="submit" value="提交"/>
- </form>
在这个例子中,元素绑定到了一个range元素上,当拖动range元素的滑动杆的时候,值就会显示出来。
目前大部分浏览器对其支持的还不是十分理想!
![](https://images2015.cnblogs.com/blog/889347/201607/889347-20160718170952794-214343956.png)
- <form>
- <input id="w3cfuns_required" name="w3cfuns.com" required type="text"/>
- <input type="submit" value="提交"/>
- </form>
required属性表示此输入框是必填项,当提交的时候,如果此输入框为空,那么将提示用户输入后提交。
立即运行:[html]
<form>
<input id="w3cfuns_required" name="w3cfuns.com" required type="text"/>
<input type="submit" value="提交"/>
</form>
[/html]
2、pattern属性:
- <form>
- <input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="d{3}" type="text"/>
- <input type="submit" value="提交"/>
- </form>
立即运行:[html]
<form>
<input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="d{3}" type="text"/>
<input type="submit" value="提交"/>
</form>
[/html]
3、min属性和max属性:
- <form>
- <input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
- <input type="submit" value="提交"/>
- </form>
立即运行:[html]
<form>
<input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
<input type="submit" value="提交"/>
</form>
[/html]
4、step属性:
- <form>
- <input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
- <input type="submit" value="提交"/>
- </form>
立即运行:[html]
<form>
<input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
<input type="submit" value="提交"/>
</form>
[/html]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--url类型--> <form> <input name="url" type="url" value="http://www.jikexueyuan.com"> <input type="submit" value="提交"> <br/> <br/> <!--email 类型 --> <input type="email" name="email" value="794023496@qq.com"> <input type="submit" name="提交"> <br/> <br/> <!--data 类型--> <input type="date" name="data" value="" > <br/> <br/> <!--time类型--> <input type="time" name="time" value="10:00"> <br/> <br/> <!--datetime类型--> <input type="datetime" name="datetime" value=""> <br/> <br/> <!--datetime-local类型--> <input type="datetime-local" name="datetime-local" > <br/> <br/> <!--month类型--> <input type="month" name="month" value="2016-08-26"> <br/> <br/> <!--week类型--> <input type="week" name="week"> <br/> <br/> <!--number类型--> <input type="number" name="number" value="15" max="100" step="5" min="10"> </form> <!--计算器--> <script> function sum() { var n1=document.getElementById("nu1").valueAsNumber; var n2=document.getElementById("nu2").valueAsNumber; document.getElementById("result").valueAsNumber=n1+n2; } </script> <br/> <form> <input type="number" id="nu1">+ <input type="number" id="nu2">= <input type="number" id="result" readonly> <input type="button" value="计算" onclick="sum()"> </form> <br/> <!--range类型--> <input name="range" type="range" value="20" min="0" max="100" step="2"> <br/> <br/> <!--search类型--> <input type="search"> <br/> <br/> <!--tel类型--> <input type="tel"> <!--color类型--> <input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value;"> <span id="currentColor"></span> <br/> <br/> <!--output元素追加--> <script> function value_change() { var number=document.getElementById("range").value; document.getElementById("output").value=number; } </script> <form id="testform"> <input type="range" id="range" min="0" max="100" step="5" value="10" onchange="value_change()" > <output id="output">10</output> </form> <br/> <br/> <!--表单验证--> <script> function check() { var email=document.getElementById("email"); if(email.value==""){ alert("请输入email"); }else if(!email.checkValidity()){ alert("请输入正确的Email地址!") return false; } } </script> <form id="teatform" onsubmit="check()" novalidate="true"> <label for="email">Email</label> <input name="email" type="email" id="email"> <input type="submit"> </form> <br/> <br/> <br/> <form> <fieldset> <legend>健康信息</legend> 身高:<input type="text" /> 体重:<input type="text" /> </fieldset> </form> </body> </html>