HTML5註冊表單的自動對焦與佔位文字範例程式碼_html5教學技巧

首先看下面要使用HTML自動聚焦和占位文字的範例程式碼

複製程式碼

程式碼如下:>複製程式碼

程式碼如下:


2:

新使用者註冊

1. 
   郵箱
   
   


2. 
   使用者名稱
   
   


3. 
   顯示名稱
   
   


4. 
   密碼
   
   


5. 
   確認密碼
   
   

使用自動聚焦

要使用HTML5的自動聚焦功能，只需要在表單域中新增autofocus屬性即可

例如上面，想讓頁面載入完成時自動將遊標定位到表單的第一個表單域郵箱上以及提高輸入效率。

複製程式碼

程式碼如下:

信箱

需要注意的是,如果頁面中設定了多個autofocus屬性，那麼使用者的遊標只會定位到最後一個設定了autofocus屬性的表單域上。

使用佔位文字

佔位文字的最大用處，就是向使用者說明應該如何正確的填寫表單。即進行輸入提示。要使用佔位文字的話，只需要在輸入域中加入placeholder屬性即可

下面是使用了placeholder屬性的輸入表單域

複製代碼

代碼如下:

1. 
   郵箱
   
   


2. 
   使用者名稱
   
   


3. 
   顯示名稱
   
   


4. 
   密碼
   
   


5. 
   確認密碼
   

操作効果は以下のとおりです

オートコンプリートが有効かどうか
オートコンプリート属性は HTML5 で導入されました。現在のフォームフィールドにデータを自動的に入力するかどうかをブラウザに通知するために使用されます。一部のブラウザは、ユーザーが以前に入力したデータを記憶しており、場合によっては、特にパスワードなどのデータをユーザーに記録させたくない場合があります
オートコンプリートをオフにする

コードをコピー

コードは次のとおりです:

自動完了を防ぐには、atuocomplete の値を off に設定するだけです。