這篇文章給大家介紹如何完成HTML5注冊(cè)表單的自動(dòng)聚焦與占位文本，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

我們擁有10多年網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信開發(fā)、重慶小程序開發(fā)公司、手機(jī)網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、等業(yè)務(wù)。無(wú)論您有什么樣的網(wǎng)站設(shè)計(jì)或者設(shè)計(jì)方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計(jì)服務(wù)并滿足您的需求。

首先看下面要使用HTML自動(dòng)聚焦和占位文本的示例代碼

代碼如下:

 2:  
 
 
 
 
 
 
 
新用戶注冊(cè)
 
 
 
郵 箱 
 
 
 
 用戶名 
 
 
 
 顯示名稱 
 
 
 
密碼 
 
 
 
確認(rèn)密碼 
 
 
 
 
 
 

使用自動(dòng)聚焦
要使用HTML5的自動(dòng)聚焦功能，只需要在表單域中添加autofocus屬性即可
例如上面，想讓頁(yè)面加載完成時(shí)自動(dòng)將光標(biāo)定位到表單的第一個(gè)表單域郵箱上以及提高輸入效率。

代碼如下:

 
郵 箱 
 

需要注意的是,如果頁(yè)面中設(shè)置了多個(gè)autofocus屬性，那么用戶的光標(biāo)只會(huì)定位到最后一個(gè)設(shè)置了autofocus屬性的表單域上。
使用占位文本
占位文本的最大用處，就是向用戶說(shuō)明應(yīng)該如何正確的填寫表單。即進(jìn)行輸入提示。要使用占位文本的話，只需要在輸入域中添加placeholder屬性即可
下面是使用了placeholder屬性的輸入表單域

代碼如下:

 
 
郵 箱 
 
 
 
 用戶名 
 
 
 
 顯示名稱 
 
 
 
密碼 
 
 
 
確認(rèn)密碼 
 
 

運(yùn)行效果如下
 
是否啟用自動(dòng)完成
在HTML5中引入了autocomplete屬性。用來(lái)通知瀏覽器是否為當(dāng)前表單域自動(dòng)填充數(shù)據(jù)。某些瀏覽器會(huì)記住用戶之前輸入的數(shù)據(jù)，而在某些情況下，我們可能并不希望用戶使用記錄數(shù)據(jù)，特別類似于密碼這一類的
關(guān)閉自動(dòng)完成

代碼如下:

只需要將atuocomplete的值設(shè)置成off，就可以阻止自動(dòng)完成。

關(guān)于如何完成HTML5注冊(cè)表單的自動(dòng)聚焦與占位文本就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。