HTML5学习笔记第二节（Email标签（自动验证格式），Number标签，URL标签...）
2011-11-28 15:01 苏飞 阅读(13091) 评论(14) 编辑 收藏 举报介绍与导航，
----------------------------------------------------------------------------------------
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时候早日到来吧，让我们一起期待更多浏览器提供更好更全面的支持。
