如何完成HTML5注册表单的自动聚焦与占位文本

这篇文章给大家介绍如何完成HTML5注册表单的自动聚焦与占位文本，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

我们拥有10多年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供成都网站建设、网站设计、微信开发、重庆小程序开发公司、手机网站制作、H5响应式网站、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

首先看下面要使用HTML自动聚焦和占位文本的示例代码

代码如下:

 2:  
 
 
 
 
 
 
 
新用户注册
 
 
 
邮 箱 
 
 
 
 用户名 
 
 
 
 显示名称 
 
 
 
密码 
 
 
 
确认密码 
 
 
 
 
 
 

使用自动聚焦
要使用HTML5的自动聚焦功能，只需要在表单域中添加autofocus属性即可
例如上面，想让页面加载完成时自动将光标定位到表单的第一个表单域邮箱上以及提高输入效率。

代码如下:

 
邮 箱 
 

需要注意的是,如果页面中设置了多个autofocus属性，那么用户的光标只会定位到最后一个设置了autofocus属性的表单域上。
使用占位文本
占位文本的最大用处，就是向用户说明应该如何正确的填写表单。即进行输入提示。要使用占位文本的话，只需要在输入域中添加placeholder属性即可
下面是使用了placeholder属性的输入表单域

代码如下:

 
 
邮 箱 
 
 
 
 用户名 
 
 
 
 显示名称 
 
 
 
密码 
 
 
 
确认密码 
 
 

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

代码如下:

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

关于如何完成HTML5注册表单的自动聚焦与占位文本就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。