HTML5学习笔记第二节（Email标签（自动验证格式），Number标签，URL标签...）
介绍与导航，
----------------------------------------------------------------------------------------
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>
一起来试试吧
Date: month : week: time:
datetime: datetime-local :
|
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> 自己动手来试试吧 Webpage:
但是现在支持Html5的浏览器太少了，我发现只有Opera支持的还行，其它的都基本上是一半支持一半不支持，让人尴尬啊。 希望Html5时候早日到来吧，让我们一起期待更多浏览器提供更好更全面的支持。 -------------------------------------------------------------签名部分您可以不访问--------------------------------------------------------------
欢迎大家转载，如有转载请注明文章来自： http://sufei.cnblogs.com/ 签名：做一番一生引以为豪的事业;在有生之年报答帮过我的人;并有能力帮助需要帮助的人; 软件开发，功能定制，请联系我 |