UDN-企业互联网技术人气社区

板块导航

浏览  : 1782
回复  : 5

[HTML5] HTML5注册表单的自动聚焦与占位文本示例代码

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-23 15:07:28 | 显示全部楼层 |阅读模式
本帖最后由 友美C_cup 于 2015-8-1 14:19 编辑
  1. <!DOCTYPE html> 2: <html>
  2. <head>
  3. <title>注册帐号</title>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <form method="post" action="goto">
  8. <fieldset id="register_information">
  9. <legend>新用户注册</legend>
  10. <ol>
  11. <li>
  12. <label for="name">邮 箱</label>
  13. <input type="email" id="name" name="name">
  14. </li>
  15. <li>
  16. <label for="user"> 用户名</label>
  17. <input type="text" id="user" name="user">
  18. </li>
  19. <li>
  20. <label for="nickname"> 显示名称</label>
  21. <input type="text" id="nickname" name="user">
  22. </li>
  23. <li>
  24. <label for="password">密码</label>
  25. <input type="password" id="password" name="user_password">
  26. </li>
  27. <li>
  28. <label for="confirm_password">确认密码</label>
  29. <input type="password" id="confirm_password" name="user_password">
  30. </li>
  31. </ol>
  32. </fieldset>
  33. </form>
  34. </body>
  35. </html>
复制代码

  使用自动聚焦

  要使用HTML5的自动聚焦功能,只需要在表单域中添加autofocus属性即可

  例如上面,想让页面加载完成时自动将光标定位到表单的第一个表单域邮箱上以及提高输入效率。

  1. <li>
  2. <label for="name">邮 箱</label>
  3. <input type="email" id="name" name="name" autofocus>
  4. </li>
复制代码


  使用占位文本
 
  占位文本的最大用处,就是向用户说明应该如何正确的填写表单。即进行输入提示。要使用占位文本的话,只需要在输入域中添加placeholder属性即可

  下面是使用了placeholder属性的输入表单域

  1. <ol>
  2. <li>
  3. <label for="name">邮 箱</label>
  4. <input type="email" id="name" name="name" autofocus placeholder="请输入有效的邮件地址">
  5. </li>
  6. <li>
  7. <label for="user"> 用户名</label>
  8. <input type="text" id="user" name="user" placeholder="输入用户名">
  9. </li>
  10. <li>
  11. <label for="nickname"> 显示名称</label>
  12. <input type="text" id="nickname" name="user" placeholder="输入昵称">
  13. </li>
  14. <li>
  15. <label for="password">密码</label>
  16. <input type="password" id="password" name="user_password" placeholder="输入密码">
  17. </li>
  18. <li>
  19. <label for="confirm_password">确认密码</label>
  20. <input type="password" id="confirm_password" name="user_password" placeholder="再次输入密码">
  21. </li>
  22. </ol>
复制代码


  是否启用自动完成

  在HTML5中引入了autocomplete属性。用来通知浏览器是否为当前表单域自动填充数据。某些浏览器会记住用户之前输入的数据,而在某些情况下,我们可能并不希望用户使用记录数据,特别类似于密码这一类的

  关闭自动完成

  1. <input type="password" id="password" name="user_password" autocomplete="off" placeholder="输入密码">
复制代码


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


相关帖子

发表于 2015-8-10 17:00:35 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2015-8-14 02:48:19 | 显示全部楼层
不知道大家有没有注意到,html5和云的概念是对应有关联的性的
使用道具 举报

回复

发表于 2015-8-14 09:57:07 | 显示全部楼层
说是html5 其实都是js和css3
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月14日 11:19 详情 回复

都差不多啦哈哈

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-14 11:19:55 | 显示全部楼层
冷月葬花魂 发表于 2015-8-14 09:57
说是html5 其实都是js和css3

都差不多啦哈哈
使用道具 举报

回复

发表于 2015-9-10 16:58:05 | 显示全部楼层
每天发这些东西,是不是直接给书 更好呢。。。。。,最好人手一本。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部