首先看下面要使用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>

 
需要注意的是,如果页面中设置了多个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>

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

只需要将atuocomplete的值设置成off，就可以阻止自动完成。

 
 
 

HTML5_注册表单的自动聚焦与占位文本的更多相关文章

  1. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  2. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  3. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  4. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  5. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  6. form注册表单圆角 demo

    form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...

  7. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  9. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

随机推荐

  1. flume ng配置拓扑图

  2. Uva592 Island of Logic

      题意:神人鬼三个种族,神只说真话,鬼只说假话,人白天说真话,晚上说假话.根据对话内容区分种族和白天黑夜.  最多有A, B, C, D, E五个人 算法:枚举A, B, C, D, E的种族情况和 ...

  3. Linux(Centos)配置OpenSSH无密码登陆<转>

    最近在搭建Hadoop环境需要设置无密码登陆,所谓无密码登陆其实是指通过证书认证的方式登陆,使用一种被称为"公私钥"认证的方式来进行ssh登录.   " 公私钥" ...

  4. OSG中找到特定节点的方法（转）

    OSG中找到特定节点的方法 为了在OSG中找到需要的节点并对节点做出相应的操作,可以从NodeVisitor类中继承一个类,NPS的教程 [download id="14"] 阐述 ...

  5. UITableViewController

    UITableViewController 目录 概述 UITableView UITableViewCell 与UITableViewController相关的代理 UITableViewDataS ...

  6. Objective-C面向对象的编程

    Objective-C面向对象的编程 目录 对面向对象编程思想的理解 类的声明和定义 类的声明和定义 对关键字super和self的理解 初始化函数 @property声明类成员 类的实例化 继承 组 ...

  7. 0c-39-ARC下单对象内存管理

    1.ARC工作原理详述 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autorelease A ...

  8. 【阿里云产品公测】一句话告诉你什么样的人该使用ACE，如何使用ACE

    作者:阿里云用户小鸡咕咕 首先回应标题,这一句话就是:看完这篇帖子你就知道了.     前言 写在文章之前,我想先阐述一下写这篇文章的意义.可能大伙就要说了,写这篇文章不就是为了200的代金券吗?错, ...

  9. 从源码的角度分析ViewGruop的事件分发

    从源码的角度分析ViewGruop的事件分发. 首先我们来探讨一下,什么是ViewGroup?它和普通的View有什么区别? 顾名思义,ViewGroup就是一组View的集合,它包含很多的子View ...

  10. sphinx-2.2.10-1.rhel6.x86_64 rpm包安装的位置

    /etc/logrotate.d/sphinx /etc/rc.d/init.d/searchd/etc/sphinx/etc/sphinx/sphinx.conf/usr/bin/indexer/u ...