介绍与导航,
----------------------------------------------------------------------------------------
1.Email输入框,自动验证Email有效性。
2.number数字输入,验证正确,可以设置开始结束位。
3.URL输入框,可以验证URL输入的有效性。
4.Date pickers (date, month, week, time, datetime, datetime-local)选择框,可以选择日期,时间,月,周。
5.datalist输入选择。
在大家使用HTml的时候请一定要把你的浏览器改成OPera的,
因为现在只有Opera对Html5支持的才是最好的,
其它的浏览器可能是无效的,特别是IE根本就不管用。
说明一下本文中所有的标签都起名为user_email,如果大家自己使用的话就自己修改一下,我这里是方便 写代码
1.Email输入框,自动验证Email有效性
----------------------------------------------------------------------------------------
大家以前在做注册功能时或者是登录功能时,如果让用户输入Email时,肯定 要加或多或少的验证吧,而且有时候正则写起来也不是很爽,但在HTml5里面这些都将成为一个标签
只要一个Email类型 的INput标签就可以实现下面咱们来看看效果吧
如果在我输入的邮件地址不对的时候就会有提示,下面看下我的代码吧
<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
E-mail: <input type="email" name="user_email"/><br />
<input type="submit"/>
</form>
</body>
</html>
自己输入来试试吧E-mail:
是不是很方便 呀,以后再想让用户输入Email的时候直接拉个控件过来就 OK了。
2.number数字输入,验证正确,可以设置开始结束位
----------------------------------------------------------------------------------------
以前我们如果想让用户输入数字的话,一定不是一件简单的工作,但有了number类型的标签时大家会很爽的,不多说了看
下效果
看下我的代码吧
<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
<input type="number" step="5" min="5" max="20" name="number" value="0"/>
<input type="submit"/>
</form>
</body>
</html>
而且你可以设置最大值最小值,并且可以设置增长的间隔,
一起来看看他的属性
属性 | 值 | 描述 |
---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) |
value | number | 规定默认值 |
现在自己来试试吧
3.URL输入框,可以验证URL输入的有效性。
----------------------------------------------------------------------------------------
这个跟之前的都差不多也是直接Type类型,但是他只验证协议,不验证有效性,比如你直接输入一个123,它会自动给你加上http://头协议
看下面的代码就知道了
<form action="../Default.aspx" method="get">
URL: <input type="url" name="user_email"/><br />
<input type="submit"/>
</form>
还是自己动手试试吧URL:
4.Date pickers (date, month, week, time, datetime, datetime-local)
----------------------------------------------------------------------------------------
我们平时如果要做个日历控件的话一定是非费劲的吧,而且效果 也不怎么好,
但是在这里你就太方便 了,在家一起来看看效果吧
代码如下
<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
Date: <input type="date" name="user_email"/>
month : <input type="month" name="user_email"/>
week: <input type="week" name="user_email"/>
time: <input type="time" name="user_email"/>
datetime: <input type="datetime" name="user_email"/>
datetime-local : <input type="datetime-local" name="user_email"/>
<input type="submit"/>
</form>
</body>
</html>
一起来试试吧
5.datalist
----------------------------------------------------------------------------------------
这个其实有点像DropDownList了,但又比它的功能要强大一些,
先来看看效果
代码如下
<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
Webpage:
<input type="url" list="url_list" value="fdf" name="user_email"/>
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>
<input type="submit"/>
</form>
</body>
</html>
自己动手来试试吧
html5给我最大的体会就是把N多的插件变成了标签或其它,
但是现在支持Html5的浏览器太少了,我发现只有Opera支持的还行,其它的都基本上是一半支持一半不支持,让人尴尬啊。
希望Html5时候早日到来吧,让我们一起期待更多浏览器提供更好更全面的支持。