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实现可拖动的魔方3d效果
May 07 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 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 cli模式学习(PHP命令行模式)
2013/06/03 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python之pymysql的使用小结
2019/07/01 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python算的上脚本语言吗
2020/06/22 Python
Python调用飞书发送消息的示例
2020/11/10 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
计算机本科生自荐信
2013/10/15 职场文书
支教自我鉴定
2014/01/18 职场文书
房地产活动策划方案
2014/05/14 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
python实现的web监控系统
2021/04/27 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android