zoukankan      html  css  js  c++  java
  • HTML5_注册表单的自动聚焦与占位文本

    首先看下面要使用HTML自动聚焦和占位文本的示例代码

       1: <!DOCTYPE html>
       2: <html>
       3: <head>
       4:     <title>注册帐号</title>
       5:     <meta charset="utf-8">
       6: </head>
       7: <body>
       8:  
       9: <form method="post" action="goto">
      10:     <fieldset id="register_information">
      11:         <legend>新用户注册</legend>
      12:         <ol>
      13:             <li>
      14:                 <label for="name">邮   箱</label>
      15:                 <input type="email" id="name" name="name">
      16:             </li>
      17:             <li>
      18:                 <label for="user"> 用户名</label>
      19:                 <input type="text" id="user" name="user">
      20:             </li>
      21:             <li>
      22:                 <label for="nickname"> 显示名称</label>
      23:                 <input type="text" id="nickname" name="user">
      24:             </li>
      25:             <li>
      26:                 <label for="password">密码</label>
      27:                 <input type="password" id="password" name="user_password">
      28:             </li>
      29:             <li>
      30:                 <label for="confirm_password">确认密码</label>
      31:                 <input type="password" id="confirm_password" name="user_password">
      32:             </li>
      33:         </ol>
      34:  
      35:     </fieldset>
      36:  
      37: </form>
      38:  
      39: </body>
      40: </html>
     
    使用自动聚焦
     
    要使用HTML5的自动聚焦功能,只需要在表单域中添加autofocus属性即可
    例如上面,想让页面加载完成时自动将光标定位到表单的第一个表单域邮箱上以及提高输入效率。
    <li>
    <label for="name">邮 箱</label>
    <input type="email" id="name" name="name" autofocus>
    </li>

    image
     
    需要注意的是,如果页面中设置了多个autofocus属性,那么用户的光标只会定位到最后一个设置了autofocus属性的表单域上。
     
    使用占位文本
    占位文本的最大用处,就是向用户说明应该如何正确的填写表单。即进行输入提示。要使用占位文本的话,只需要在输入域中添加placeholder属性即可
     
    下面是使用了placeholder属性的输入表单域
    <ol>
    <li>
    <label for="name">邮 箱</label>
    <input type="email" id="name" name="name" autofocus placeholder="请输入有效的邮件地址">
    </li>
    <li>
    <label for="user"> 用户名</label>
    <input type="text" id="user" name="user" placeholder="输入用户名">
    </li>
    <li>
    <label for="nickname"> 显示名称</label>
    <input type="text" id="nickname" name="user" placeholder="输入昵称">
    </li>
    <li>
    <label for="password">密码</label>
    <input type="password" id="password" name="user_password" placeholder="输入密码">
    </li>
    <li>
    <label for="confirm_password">确认密码</label>
    <input type="password" id="confirm_password" name="user_password" placeholder="再次输入密码">
    </li>
    </ol>

     
    运行效果如下
    image
     
     
    是否启用自动完成
     
    在HTML5中引入了autocomplete属性。用来通知浏览器是否为当前表单域自动填充数据。某些浏览器会记住用户之前输入的数据,而在某些情况下,我们可能并不希望用户使用记录数据,特别类似于密码这一类的
    关闭自动完成
    <input type="password" id="password" name="user_password" autocomplete="off" placeholder="输入密码">

    只需要将atuocomplete的值设置成off,就可以阻止自动完成。
     
     
     
  • 相关阅读:
    获取发布的头条的url,避免点击打开新的页面
    下载图片 保存至本地 返回路径
    线程运行的3个状态
    程序并发执行所需付出的时空开销
    web metrics dashboard 数据分析工具 看板 从可视化发现问题 避免sql重复写 调高效率
    Binary safe
    simple dynamic string
    a
    a
    从业务角度 减少代码执行的时间 和 因长时间执行的而带来的代码复杂性 日志恢复数据
  • 原文地址:https://www.cnblogs.com/tao-zi/p/3184917.html
Copyright © 2011-2022 走看看