HTML input password 密碼框

admin發表於2018-10-20
HTML密碼

將 <input> 標籤 type 屬性值設定為 "password" 即可建立一個密碼框。

密碼框是一種特殊文字框，普通文字框內容是明文，而密碼框內容則以密文方式展現。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" name="pw">
</form>
</body>
</html>

上述程式碼建立一個文字框和密碼框，在密碼框中輸入的內容以密文形式展現。

特別說明：通常情況下，利用name屬性將表單資料提交到後臺。

密碼框還有其他屬性，下面分別做一下介紹：

（1）.value：規定密碼框的值，也就是預設的密碼值。

（2）.size：規定密碼框中可見字元數目，建議用CSS的width屬性替代。

（3）.maxlength：規定密碼框可以輸入的最大字元數。

（4）.placeholder（HTML5）：提供一種提示，描述所期待的值。

（5）.required（HTML5）：規定文字域內容是必填的。

（6）.pattern（HTML5）：規定用於驗證文字域內容格式的正規表示式。

（7）.form（HTML5）：規定輸入域所屬的一個或多個表單。

（8）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（9）.autocomplete（HTML5）：規定密碼域是否具有自動完成功能。

（10）.readonly：設定密碼域為只讀。

（11）.disabled：規定單選按鈕不可用。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" maxlength="10" value="123" name="pw">
</form>
</body>
</html>

使用value屬性值規定預設密碼；maxlength屬性規定陣列字元的最大個數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" maxlength="10" placeholder="輸入密碼" name="pw">
</form>
</body>
</html>

使用placeholder設定輸入密碼的提示語言。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" maxlength="10" required name="pw">
</form>
</body>
</html>

使用required屬性設定密碼域是必填的，否則會報錯。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" pattern="^[a-z]{5,10}$" required name="pw"><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

pattern屬性值是正規表示式，用來限定輸入內容的。

我們也可以自定義驗證提示，具體參閱HTML5 pattern自定義驗證提示一文。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" autofocus required name="pw"><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

autofocus只有一個屬性值"autofocus"（可以省略），它規定文字域在頁面載入後自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" autofocus autocomplete="on" name="pw"><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

autocomplete有兩個屬性值on和off，on規定密碼域列出之前已經填寫過的內容，off的功能與之相反。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號:<input type="text" name="username"><br>
  密碼:<input type="password" readonly value="123"  name="pw"><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過readonly屬性設定密碼域為只讀狀態。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單"/>
</form>
密碼:<input type="password" form="ant"  name="pw">
</body>
</html>

form屬性引用所屬表單的id，於是，雖然密碼域在<form>之外，但依然是該表單的一部分。

相關文章