HTML5注册表单的自动聚焦与占位文本示例代码
发布时间:2013-07-19 15:24:25 作者:佚名 我要评论
想必大家一对HTML5的自动聚焦与占位文本有所了解了吧,要使用HTML5的自动聚焦功能,只需要在表单域中添加autofocus属性即可,首先看下面要使用HTML自动聚焦和占位文本的示例代码,感兴趣的朋友 可以了解下哈
首先看下面要使用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>
需要注意的是,如果页面中设置了多个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中引入了autocomplete属性。用来通知浏览器是否为当前表单域自动填充数据。某些浏览器会记住用户之前输入的数据,而在某些情况下,我们可能并不希望用户使用记录数据,特别类似于密码这一类的
关闭自动完成
复制代码
代码如下:<input type="password" id="password" name="user_password" autocomplete="off" placeholder="输入密码">
只需要将atuocomplete的值设置成off,就可以阻止自动完成。
相关文章
- 下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-26
- 下面小编就为大家带来一篇HTML基础必看---表单,图片热点,网页划区和拼接详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-10
- 这篇文章主要以多种实例的方式帮助大家了解分析HTML表单form的使用方法,讲解了form表单如何与用户进行交互,感兴趣的小伙伴们可以参考一下2016-06-16
- 使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在小编整理特此分享脚本之家2016-04-05
- 这篇文章主要介绍了HTML5中表单的常用属性及新属性的整理,主要以新属性的总结为主,需要的朋友可以参考下2016-02-19
HTML中禁用表单控件的两种方法readonly与disabled
有时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的,下面与大家分享下禁用表中控件的两种方法2014-08-24- 这篇文章主要介绍了使用css美化html表单控件详细示例(表单美化),需要的朋友可以参考下2014-05-06
- 这篇文章主要介绍了HTML的表单form以及form内部标签的使用,需要的朋友可以参考下2014-05-02
html表单属性readonly和disabled的使用方法
html容易被忽略的一些表单属性,如readonly、disabled,两者在获得value值方面有所不同,感兴趣的朋友可以了解下本文2014-02-12html form表单提交action和url跳转到actiond的区别介绍
form表单的action 与url跳转是不一样的:form表单可以给后台传递数据,url跳转到action只能通过url的参数来传递数据,不懂的朋友可以参考下2013-11-04
最新评论