zoukankan      html  css  js  c++  java
  • html字段验证

    (1)连接去掉下划线:style="text-decoration:none"

    <a href="/example/html/lastpage.html" style="text-decoration:none">
    这是一个链接!
    </a>
    

     (2)文本框输入时提示曾经输入过的内容:autocomplete="on",不提示则:autocomplete="off"

    autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    <!--Name文本框会提示,Email文本框不会提示--> <form action="" method="get" autocomplete="on"> Name:<input type="text" name="name" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form> </body> </html>

     

    (3)文本框提示信息:placeholder="提示信息"

    向用户显示描述性说明文字或者提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    <p><label for="runnername">姓名:</label>
    <input id="runnername"name="runnername" type="text" placeholder="请输入姓名" />
    </p>
    
    </body>
    </html>
    

     

    (4)为输入型的控件提供可以选择的列表内容:list,datalist

    控件属性list=“datalist.id”

    <datalist>

      <option lable="xxxx" value="xxxxxx"/>

      ......

    </datalist>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    Webpage: <input type="url" list="url_list" name="link" style="250px" />
    <datalist id="url_list">
        <option label="W3School" value="http://www.w3school.com.cn" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    
    </body>
    </html>
    

     

    (5)必填项验证:required:required="required"

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    <form action="" method="get">
    Name: <input type="text" name="usr_name" required="required" />
    <input type="submit" value="提交" />
    </form>
    
    </body>
    </html>
    

     

    (6)正则匹配:pattern=“正则表达式”

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    <form action="" method="get">
    Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="请输入三位字母的城市代码" />
    <input type="submit" value="提交" />
    </form>
    
    </body>
    </html>
    

     

    (7)Email验证:type="email"

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    <form action="" method="get">
    Email: <input type="email" name="email" required="required"/>
    <input type="submit" value="提交" />
    </form>
    
    </body>
    </html>
    

     

    (8)字段长度限定:min=“”,max=“”

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    <form action="" method="get">
    Count:<input type="number" id="count" name="count" min="0" max="100" required="required"/>
    <input type="submit" value="提交" />
    </form>
    
    </body>
    </html>
    

     

    (9)验证两次密码是否一致:customError

    这个需要用到js的知识,后续再补充

    (10)文本框只能输入数值:type=“number”

    单一的数字验证输入可以用type,但如果是其他的允许输入数字和字母的组合等需要用正则表达式来限定

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <body>
    
    <form action="" method="get">
    请输入数字:<input type="number" id="number" name="number" min="6" max="8" required="required"/>
    <input type="submit" value="提交" />
    </form>
    
    </body>
    </html>
    

     

  • 相关阅读:
    PAT-字符串处理-A 1001 A+B Format (20分)
    PAT-字符串处理-B 1048 数字加密 (20分)
    数据库-第二章 关系数据库-2.3 关系的完整性
    数据库-第二章 关系数据库-2.2 关系操作
    数据库-第二章 关系数据库-2.1 关系数据结构及形式化定义
    IDLE打开Python报错 api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案
    老毛桃pe安装系统
    LeetCode 213. House Robber II (动态规划)
    LeetCode 198. House Robber(DP)
    LeetCode 211. Add and Search Word
  • 原文地址:https://www.cnblogs.com/evablogs/p/7003620.html
Copyright © 2011-2022 走看看