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垂直手风琴菜单
Jun 28 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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中Collection 类的设计
2013/06/21 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python之拟合的实现
2019/07/19 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
一套C++笔试题面试题
2012/06/06 面试题
海洋科学专业求职信
2014/08/10 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
python实现监听键盘
2021/04/26 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技