網頁中最典型的應用密碼框的場景就是網站的登錄注冊頁面

在 HTML 中，把 <input> 標簽的 type 屬性設置為 password 可以表示密碼框。具體語法格式如下：

<input type="password" />

接下來我們看一個具體的例子：
純文本復制

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">密碼:<input type="password" name="psd"> </form>

運行效果如圖所示：

從運行結果來看，密碼框在外觀上和單行文本框相同，但是兩者之間是有區別的：

• 單行文本框輸入的字符可見；
• 密碼框輸入的字符不可見，會被?代替。

注意：密碼框設置輸入字符被?代替的原因，只是防止用戶周圍的人看到密碼，后臺是可以拿到輸入的內容的。

密碼框同單行文本框一樣，也有 maxlength、 value 以及 size 等屬性。接下來我們看一下：

1) maxlength屬性

maxlength 屬性表示密碼框最多可以輸入的字符數量。如果我們需要設置用戶輸入的密碼不得超過 6 位，可以這樣寫：

<form action="" method="post" name="myForm">密碼:<input type="password" name="psd" maxlength="6"> </form>

進行設置后，當用戶輸入的密碼大于 6 位，不再允許輸入。

2) value屬性

value 屬性用來表示密碼框的默認值，一般密碼都是由用戶自行輸入的，但是有的情況我們需要給用戶一個默認密碼，就可以這樣寫：

<form action="" method="post" name="myForm">密碼:<input type="password" name="psd" value="123456"> </form>

運行效果如圖所示：

通過運行結果可以發現，默認的密碼"123456"被?代替。

3) size屬性

同單行文本框中的 size 屬性相同，也表示文本框可見的字符數。

注意：一般我們只需設置 maxlength 來限制用戶輸入的密碼不大于多少位，不使用 size 屬性。

總結

以上是生活随笔為你收集整理的16、HTML密码框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。