一、密码文本框简介

密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过它们是有着本质上的区别的：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

我们可以把密码文本框看成是一种特殊的单行文本框。对于两者的区别，从图9-11就可以很清晰地看出来了。

语法：

<input type="password" />

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" />
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

密码文本框与单行文本框在外观上是一样的，但是当我们输入内容后，就会看出两者的区别，如下图所示。

二、密码文本框属性

密码文本框可以看成是一种特殊的单行文本框，它拥有和单行文本框一样的属性，如下表所示。

表1 密码文本框常用属性
属性 说明
value 设置文本框的默认值，也就是默认情况下文本
size 设置文本框的长度
maxlength 设置文本框中最多可以输入的字符数

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" size="15" maxlength="10" /><br />
        密码：<input type="password" size="15" maxlength="10" />
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

这个例子的预览效果跟前一个例子的差不多，不过事实上，文本框的长度（size）和可输入字符数（maxlength）已经改变了。当我们输入内容后，效果如下图所示。

密码文本框仅仅能使得周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术，这里了解一下就行。