• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5验证以及日期显示的实现详解
    1.Email输入框,自动验证Email有效性。

    复制代码
    代码如下:

    <!DOCTYPE HTML>
    <html>
    <body>
    <form action="#" method="get">
    E-mail: <input type="email" name="user_email"/>

    <input type="submit"/>
    </form>
    </body>
    </html>

    2.number数字输入，验证正确，可以设置开始结束位。

    复制代码
    代码如下:

    <!DOCTYPE HTML>
    <html>
    <body>
    <form action="#" method="get">
    <input type="number" step="5" min="5"max="20" name="number" value="0"/>
    <input type="submit"/>
    </form>
    </body>
    </html>

    3.URL输入框，可以验证URL输入的有效性。
    <form action="#" method="get"> URL: <input type="url" name="user_email"/><br /> <input type="submit"/></form>
    4.Date pickers (date, month, week, time, datetime, datetime-local)选择框，可以选择日期，时间，月，周。

    复制代码
    代码如下:

    <!DOCTYPE HTML>
    <html>
    <body>
    <form action="#" 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输入选择。

    复制代码
    代码如下:

    <!DOCTYPE HTML> <html>
    <body>
    <form action="#" 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>
    上一篇：html标签之Object和EMBED标签详解
    下一篇：HTML5 Canvas draw方法制作动画效果示例
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5验证以及日期显示的实现详解 HTML5,验证,以及,日期,显示,