HTML input password 密码框

小灰灰 2020-05-16 18:30 836阅读 0赞

# HTML input password 密码框

将 `<input>` 标签 type 属性值设置为 "password" 即可创建一个密码框。

密码框是一种特殊文本框，普通文本框内容是明文，而密码框内容则以密文方式展现。

代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<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：规定单选按钮不可用。

**代码实例：**

使用value属性值规定默认密码；maxlength属性规定数组字符的最大个数。

使用placeholder设定输入密码的提示语言。

使用required属性设置密码域是必填的，否则会报错。

pattern属性值是正则表达式，用来限定输入内容的。

autofocus只有一个属性值"autofocus"（可以省略），它规定文本域在页面加载后自动获取焦点。

autocomplete有两个属性值on和off，on规定密码域列出之前已经填写过的内容，off的功能与之相反。

通过readonly属性设置密码域为只读状态。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<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>`之外，但依然是该表单的一部分。