HTML input type password 表單密碼欄位 - HTML 網頁設計筆記

HTML input type password 表單密碼欄位的功能是用來讓網友填寫密碼用的欄位，password 欄位也是 input type text 文字欄位的一種，是 HTML Form 表單的標準元素之一，例如網站提供會員登入的網頁，通常除了填寫會員帳號之外，還會要求會員填寫密碼，帳號密碼都正確之後，才可以登入網站，其中的密碼欄位就是用 input type password 寫出來的欄位。

HTML input type password 表單密碼欄語法

網頁密碼欄位的語法重點在「input type="password"」，這也是與一般文字輸入欄位「input type text」最大的差別，當網頁設計師宣告一個欄位是用來輸入密碼用的，所以在填寫內容的時候，輸入的文字都會被改為「*」或「 ●」這些符號，目的是要隱藏輸入的內容，以免被其他人看到密碼，這也是密碼欄位真正的價值所在。

密碼欄位的 name、value 是用來替欄位命名以及預設欄位值用的，其中 name 是必要項目，請給這個密碼欄位一個名稱，當網友填寫完成並送出表單後，後端的 PHP 才有辦法知道網友填的是什麼內容，至於 value 就可以空著，除非有預設內容，不然通常都是空著讓網友自己填寫密碼，最後面的 style 只是 CSS 美化欄位用的，還不是本篇文章的重點，也不影響欄位運作的功能。

溫馨提醒一下各位讀者，密碼欄位只能用來防君子，側錄軟體、木馬病毒或是瀏覽器記憶都可能造成密碼被有心人士取得，網路安全要做到滴水不漏並不容易，甚至可說是不可能，重要資料或清涼照，還是別隨便放在網路上比較保險。

HTML input type password 表單密碼欄範例

範例輸出結果長成這樣

帳號：
密碼：

範例是一個簡單的網頁表單架構，不過並不是完整的表單，因為還少了一個送出表單的按鈕，如果你想了解網頁表單的基本架構，請參考這篇《HTML Form 表單設計》的內容介紹會比較清楚，表單中有兩個欄位，第一個欄位 input type text 是一般的單行文字輸入欄位，第二個欄位就是我們的重點，input type password 表單密碼欄位，各位讀者可以在範例輸出結果隨便填寫幾個文字，應該可以看到填入的內容都被「*」或「 ●」這些符號所取代，會是哪種符號則由瀏覽器決定，填寫的內容其實都還在，只是看不到而已，當網友填完並送出表單後，後端的 PHP 程式可以判斷所填寫的內容，別擔心。

更多網頁表單設計