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


Posted in HTML / CSS onJuly 19, 2013

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

复制代码
代码如下:

<!DOCTYPE html> 2: <html>
<head>
<title>注册帐号</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="goto">
<fieldset id="register_information">
<legend>新用户注册</legend>
<ol>
<li>
<label for="name">邮 箱</label>
<input type="email" id="name" name="name">
</li>
<li>
<label for="user"> 用户名</label>
<input type="text" id="user" name="user">
</li>
<li>
<label for="nickname"> 显示名称</label>
<input type="text" id="nickname" name="user">
</li>
<li>
<label for="password">密码</label>
<input type="password" id="password" name="user_password">
</li>
<li>
<label for="confirm_password">确认密码</label>
<input type="password" id="confirm_password" name="user_password">
</li>
</ol>
</fieldset>
</form>
</body>
</html>

使用自动聚焦
要使用HTML5的自动聚焦功能,只需要在表单域中添加autofocus属性即可
例如上面,想让页面加载完成时自动将光标定位到表单的第一个表单域邮箱上以及提高输入效率。
复制代码
代码如下:

<li>
<label for="name">邮 箱</label>
<input type="email" id="name" name="name" autofocus>
</li>

HTML5注册表单的自动聚焦与占位文本示例代码
需要注意的是,如果页面中设置了多个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注册表单的自动聚焦与占位文本示例代码 
是否启用自动完成
在HTML5中引入了autocomplete属性。用来通知浏览器是否为当前表单域自动填充数据。某些浏览器会记住用户之前输入的数据,而在某些情况下,我们可能并不希望用户使用记录数据,特别类似于密码这一类的
关闭自动完成
复制代码
代码如下:

<input type="password" id="password" name="user_password" autocomplete="off" placeholder="输入密码">

只需要将atuocomplete的值设置成off,就可以阻止自动完成。
HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 #HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 #HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 #HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 #HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 #HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 #HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 #HTML / CSS
You might like
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python环境变量设置方法
2016/08/28 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
智能电子应届生求职信
2013/11/10 职场文书
护士实习鉴定范文
2013/12/22 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
新郎新娘答谢词
2015/01/04 职场文书
高考升学宴答谢词
2015/01/20 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
如何做好员工培训计划?
2019/07/09 职场文书