• 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给我最大的体会就是把N多的插件变成了标签或其它,

    但是现在支持Html5的浏览器太少了,我发现只有Opera支持的还行,其它的都基本上是一半支持一半不支持,让人尴尬啊。

    希望Html5时候早日到来吧,让我们一起期待更多浏览器提供更好更全面的支持。

    本人的博客不再维护从2013年就不再维护了 需要我帮助的朋友请到我的个人论坛 http://www.sufeinet.com 进行讨论,感谢大家对我的支持!
  • 相关阅读:
    test
    设置section的距离
    UISearchBar的应用
    Centos6.6 系统优化
    Linux系统之间文件传输 scp 命令
    MySQL 数据库安装
    AWS中国EC2 公网IP登录免pemKEY修改shh 配置文件
    Ubuntu 16.04 Chrome浏览器安装flash player插件
    Centos6.6 yum源更新
    qume-kvm 命令管理
  • 原文地址:https://www.cnblogs.com/sufei/p/2266224.html
Copyright © 2020-2023  润新知