减小字体
增大字体- ·上一篇内容：<input type="month">
- ·下一篇内容：<input type="number">
HTML中的密码输入框<input type="password">
在HTML中，将input元素的type属性设置为password时，将为用户提供一个密码输入框。密码输入框使用*或•替换用户的输入以达到安全的需要。
<input type="password">的一些实现细节在不同的浏览器中有一定的差异，如有些浏览器在用户输入时会先显示一下用户输入的字符，以便用户可识别和确认，随后转换成“*”或“•”，有些浏览器会在该输入框旁显示一个图标，用户点击图标可以在原文和替换内容之间转换。
<input type="password">的定义基本格式
其定义的基本格式如下：
<input type="password" id="pwd" name="pwd">type属性用于指定input元素输入的类型为密码，当type属性指定为password时，用户输入的内容将在输入框中以“*”或“•”的形式显示，以增加内容的安全性，防止被他人窥见。
id属性用于标识该控件，客户端脚本可以使用id属性获得该控件，以读取用户输入的值或对控件的样式或行为进行控制。
name属性可以用于客户端脚本获取该控件，这一点与id属性相同；也可以在表单提交后，由服务器端脚本通过name属性获取到用户输入的值。
上面的代码在谷歌浏览器和Edge浏览器中的显示形式相同，下图显示了未输入内容和输入内容后的形式：
但在Edge浏览器中，当用户首次键入内容时，其在密码域右侧会出现一个小图标，点击该图标，内容会在原文和替换文本之间进行切换。
value属性
value属性用于给出当前输入控件的默认值。其是一个字符串，字符串长度一般由用户实际需求确定。
如果不指定默认值，则可以省略该属性或把value属性的值设置为value=""，即一个空字符串。
value属性也用于接收用户输入的内容。客户端脚本可以对输入的值进行校验（如长度，组成等），在表单提交后，服务器端脚本也可以通过name属性获取到该值。
下例将密码域的默认值设置为：123456.
<input type="password" id="pwd" name="pwd" value="123456">maxlength属性
maxlength属性用于给出用户可以输入字符串的长度。其必须是一个不小于0的整数。
如果未设置maxlength属性或该属性设置的值无效，则该控件的输入的最大长度将没有限制。
maxlength属性的值必须不小于minlength属性的值。
下例限制密码域输入的最大字符数为10.
<input type="password" id="pwd" name="pwd" maxlength="10">minlength属性
minlength属性用于给出密码域用户可输入的最小字符数。
minlength属性的值必须是一个不小于0的正整数，而且其值应小于或等于maxlength属性的值。
如果未指定minlength属性或minlength属性的值设置无效，则该密码域将没有最少字符数限制。
下例将密码域的最少字符数限制为6。
<input type="password" id="pwd" name="pwd" minlength="6">placeholder属性
placeholder属性使用一个简短的字符串描述当前输入框应该输入的内容类型，以便给用户一个提示。
但一般可以借助其它方法来达到此目的，比如<label>元素或在输入框上面或右侧给出提示，更加友好。
<input type="password" id="pwd" name="pwd" placeholder="请输入密码">该例在谷歌浏览器中的显示效果如下：
readonly属性
readonly属性就像他的名字是“只读”的意思。也就是说用户可以看到，客户端脚本获服务器端脚本也可以获取到，但用户不可以修改该控件的值。
当然，使用客户端脚本仍然可以改变它的值，只不过用户不能直接编辑它而已。
下例指定密码域处于只读状态，不可编辑。
<input type="password" id="pwd" name="pwd" readonly>size属性
zize属性用于设置<input type="password">控件输入区的可显示的字符数。
size属性的值是一个大于0的整数。
如果未设置该属性，则其默认值为20。
该属性虽然指示控件可显示出来的字符数，并决定了控件的宽度，但因为字体不同，字符宽度不同，这会导致控件的实际宽度可能比指定的字符数宽，也可能会窄。
需要注意的是，控件允许用户输入的字符数由maxlength属性和minlength属性决定，并非size属性。size属性仅决定控件可以显示出来的字符数，多余的字符数会隐藏在控件边界外。
<p>下例未设置size属性</p>
<input type="password" id="pwd" name="pwd">
<p>下例将size属性设置为10</p>
<input type="password" id="pwd" name="pwd" size="10">
<p>下例将size属性设置为30</p>
<input type="password" id="pwd" name="pwd" size="30">该例在谷歌浏览器中的显示效果如下图所示：
autocomplete属性
autocomplete属性是设置该控件是否自动实现输入，这往往是基于用户输入的历史记录或浏览器密码管理器的相关功能。
对于密码域来说，autocomplete属性的值可以是以下几种：
on 允许浏览器或密码管理器自动填写密码域。
off 不允许浏览器或密码管理器自动填写密码域。
current-password 允许浏览器或密码管理器输入站点的当前密码。该属性值比 on 提供更多的信息，它使浏览器或密码管理器自动输入站点当前已知的密码，而非仅建议输入一个新密码。
new-password 允许浏览器或密码管理器自动为网站输入新密码，这个属性值主要用于用户“更改密码”或“新用户注册”时输入密码时。浏览器或密码管理器可以通过多种方式生成新密码，如给出新密码的建议或者提供一个创建密码的界面。
下例将autocomplete属性的值设置为off。
<input type="password" id="pwd" name="pwd" autocomplete="off">required属性
required属性指示密码域是一个必需字段，在表单提交前，用户必需提供一个符合要求的有效密码。
下例是required属性的使用方法。
<input type="password" id="pwd" name="pwd" required>当用户未输入任何内容而提交表单时，在谷歌浏览器和Edge浏览器中会给出下图所示的提示：
inputmode属性
有时密码可能仅限于数字，如常见的PIN，这时可以使用inputmode属性轻易的实现这一要求。这只需要将inputmode属性值设置为numeric即可。
但该属性在谷歌浏览器和Edge浏览器中都未见支持。
<label for="pin">PIN:</label>
<input type="password" id="pin" name="pin" inputmode="numeric">以上各例在浏览器中的效果可以点击这里查看。
相关阅读推荐：
<input type="submit"> | <input type="reset"> | <input type="button">
如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6620.html。
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
100%(2) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 