HTML如何设置表单密码输入？input type="password"怎么用？-html教程-PHP中文网

HTML如何设置表单密码输入？input type="password"怎么用？

月夜之吻

发布： 2025-08-13 21:18:02

原创

458人浏览过

答案：通过HTML、CSS和JavaScript实现带“眼睛”图标的密码框，结合maxlength和正则验证控制长度与复杂度，前端加密需配合HTTPS，autocomplete失效可通过隐藏字段或延迟加载解决。

$html如何设置表单密码输入？input type=\$

HTML表单密码输入框通过

input type="password"

登录后复制

实现。它隐藏用户输入的字符，增强安全性，但需要后端配合进行更高级的安全验证。

解决方案：

使用

<input type="password">

登录后复制

创建密码输入框，并结合其他HTML元素和属性，以及必要的JavaScript和后端验证，构建一个安全且用户友好的表单。

用户输入密码后，显示“眼睛”图标，点击后可显示密码明文，方便用户检查输入是否正确？

立即学习“前端免费学习笔记（深入）”；

首先，使用CSS和JavaScript创建一个显示/隐藏密码的眼睛图标。HTML结构如下：

<div class="password-container">
  <input type="password" id="password" name="password">
  <span class="toggle-password" onclick="togglePasswordVisibility()">
    <i class="fa fa-eye"></i>
  </span>
</div>

登录后复制

然后，编写JavaScript函数

togglePasswordVisibility()

登录后复制

来切换密码的可见性：

function togglePasswordVisibility() {
  var passwordInput = document.getElementById("password");
  var icon = document.querySelector(".toggle-password i");

  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
  } else {
    passwordInput.type = "password";
    icon.classList.remove("fa-eye-slash");
    icon.classList.add("fa-eye");
  }
}

登录后复制

最后，添加一些CSS样式美化眼睛图标：

.password-container {
  position: relative;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

登录后复制

为什么密码框的

autocomplete

登录后复制

属性有时会失效？

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

autocomplete

登录后复制

属性用于控制浏览器是否自动填充表单。有时，浏览器会忽略

autocomplete="off"

登录后复制

，尤其是在密码字段上。这是出于安全考虑，浏览器可能会强制提供密码管理功能。可以尝试以下方法：

使用随机的name属性： 更改密码字段的
```
name
```
登录后复制
属性为每次加载页面时都不同的随机字符串，可以阻止浏览器识别该字段为密码字段，从而禁用自动填充。但这会影响后端处理。
使用隐藏的假的密码字段： 在真实的密码字段之前添加一个隐藏的输入框，并设置
```
autocomplete="off"
```
登录后复制
。浏览器可能会错误地将自动填充应用到隐藏字段上。

<input type="text" name="fake_password" style="display:none">
<input type="password" id="password" name="password" autocomplete="new-password">

登录后复制

延迟显示密码字段： 使用JavaScript在页面加载后延迟一段时间再显示密码字段，有时可以绕过浏览器的自动填充机制。

密码框的输入内容如何进行前端加密，防止在传输过程中被截获？

虽然前端加密可以增加安全性，但它并不能完全防止数据被截获，因为加密密钥也可能在前端暴露。更安全的做法是使用HTTPS协议进行传输，并依赖后端进行加密和验证。如果确实需要在前端加密，可以使用JavaScript库，例如

crypto-js

登录后复制

。

引入crypto-js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

登录后复制

使用AES加密：

function encryptPassword(password) {
  var key = CryptoJS.enc.Utf8.parse("YOUR_SECRET_KEY"); // 16/24/32 bytes
  var iv = CryptoJS.enc.Utf8.parse("YOUR_SECRET_IV"); // 16 bytes
  var encrypted = CryptoJS.AES.encrypt(
    CryptoJS.enc.Utf8.parse(password),
    key,
    {
      keySize: 128 / 8,
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    }
  );
  return encrypted.toString();
}

var password = document.getElementById("password").value;
var encryptedPassword = encryptPassword(password);
// 将encryptedPassword发送到后端

登录后复制

请务必替换

YOUR_SECRET_KEY

登录后复制

和

YOUR_SECRET_IV

登录后复制

为随机生成的密钥和初始化向量。

如何限制密码输入框的字符长度和复杂度？

可以使用HTML的

maxlength

登录后复制

属性限制字符长度。复杂度验证则需要使用JavaScript进行实时验证。

限制字符长度：

<input type="password" id="password" name="password" maxlength="20">

登录后复制

使用JavaScript进行复杂度验证：

var passwordInput = document.getElementById("password");
passwordInput.addEventListener("input", function() {
  var password = passwordInput.value;
  var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/;
  if (!regex.test(password)) {
    // 显示错误信息，例如：
    // 密码必须包含至少8个字符，包括大小写字母、数字和特殊字符
    passwordInput.setCustomValidity("密码强度不够");
  } else {
    passwordInput.setCustomValidity(""); // 清除错误信息
  }
});

登录后复制

这段代码检查密码是否包含至少8个字符，包括大小写字母、数字和特殊字符。如果不符合要求，则显示错误信息。