zoukankan      html  css  js  c++  java
  • H5表单input标签新增type

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="">
        <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->
        邮箱:<input type="email"> <br>
        <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
        电话:<input type="tel"> <br>
        <!--验证只能输入合法的网址:必须包含http://-->
        网址:<input type="url"> <br>
        <!--number:只能输入数字(包含小数点),不能输入其它的字符
        max:最大值
        min:最小值
        value:默认值-->
        数量:<input type="number" value="60" max="100" min="0"> <br>
        <!--search:可以提供更人性化的输入体验-->
        请输入商品名称:<input type="search"> <br>
        <!--range:范围-->
        范围:<input type="range" max="100" min="0" value="50"> <br>
        颜色:<input type="color"> <br>
        <!--日期时间相关-->
        <!--time:时间:时分秒-->
        时间:<input type="time"> <br>
        <!--date:日期:年月日-->
        日期:<input type="date"> <br>
        <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
        日期时间:<input type="datetime"><br>
        <!--datetime-local:日期和时间-->
        日期时间:<input type="datetime-local"> <br>
        月份:<input type="month"> <br>
        星期:<input type="week">
        <!--提交-->
        <input type="submit">
    </form>
    </body>
    </html>

    补充:邮箱验证及其他验证,当input标签上有required属性时浏览器才会在表单提交前自动执行验证

    当验证不通过时触发invalid事件,通过表单元素DOM对象方法setCustomValidity("提示信息")可以改变默认的提示信息

    document.getElementById("userPhone").oninvalid=function(){
        /*设置默认的提示信息*/
        this.setCustomValidity("请输入合法的11位手机号");
    }
  • 相关阅读:
    Hibernate+mysql 中文问题解决方案.
    FpSpread表格控件,FpSpread事件介绍(一)
    如何实现打开有宏的EXCEL时不提示
    使用VB.Net写一个简单的数据访问层(不能称ORM):CRUD操作
    Asp.NET 时间Since转换
    64位操作系统上。NET操作MSMQ的问题
    IIS7配置管理Windows2008 64位系统IIS7的问题
    数据库开发批量附加数据库
    IIS7中对静态文件的处理
    techsailor三步曲
  • 原文地址:https://www.cnblogs.com/chuanzi/p/10807504.html
Copyright © 2011-2022 走看看