请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 226|回复: 4

HTML5注册表单的自动聚焦与占位文本示例代码_html5教程技巧

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-18 23:06:57 | 显示全部楼层 |阅读模式

首先看下面要使用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>


124435B63-0.gif
需要注意的是,如果页面中设置了多个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>


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

复制代码
代码如下:


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


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

使用道具 举报

0

主题

967

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-7-29 19:18:15 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

0

主题

935

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-12-7 10:29:53 | 显示全部楼层
楼主是好人哪,感谢分享,太棒了!
回复 支持 反对

使用道具 举报

2

主题

1022

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2017-8-10 14:36:21 | 显示全部楼层
楼主是好人哪,感谢分享,太棒了!
回复 支持 反对

使用道具 举报

0

主题

941

帖子

10

积分

注册会员

Rank: 2

积分
10
发表于 2019-1-6 16:33:35 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

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

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-1-20 02:59 , Processed in 0.271277 second(s), 36 queries .

快速回复 返回顶部 返回列表