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实现自定义滚动条代码分享
Aug 18 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
HTML中的表单元素介绍
Feb 28 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实现链结人气统计
2006/10/09 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
Element Input组件分析小结
2018/10/11 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python流程控制常用工具详解
2020/02/24 Python
Python reversed函数及使用方法解析
2020/03/17 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
Django框架请求生命周期实现原理
2020/11/13 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
一些Solaris面试题
2013/03/22 面试题
英文自荐信
2013/12/19 职场文书
保证书范文大全
2014/04/28 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android