HTML5注册表单的自动聚焦与占位文本示例代码
时间：06-06 互联网 佚名
想必大家一对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，就可以阻止自动完成。
相关阅读：
最新资讯
特斯拉：柏林和上海工厂
特斯拉称，上海工厂的Model 3的产能已经增加至25万辆/年
特斯拉汽车第三季度营
特斯拉汽车第三季度总营收为87.71亿美元，比去年同期的6
用“二次号”被欠贷：运
用“二次号”莫名被欠贷或没法注册12306，这些用户困扰
美团七年扶贫样本：马背
骑手工作的技能门槛相对较低，灵活性强，能在较短时间里提
猿辅导22亿美元新一轮
10月21日有媒体报道称，猿辅导在线教育22亿美元新一轮融
A股首个万亿互联网巨
国信证券通过绝对估值法和相对估值法，给出的估值范围是最新文章
html5 canvas-1.canva
大家都知道，目前并不是所有的浏览器中支持html5，就算是
canvas烟花特效锦集
这篇文章主要介绍了canvas烟花特效锦集，小编觉得挺不错
使用Html5、CSS实现文
这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射
这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证
这篇文章主要介绍了canvas基础之图形验证码的示例的相