html密码显示与隐藏

在HTML中，可以使用<input>标签创建密码输入框，并且可以通过设置type属性为"password"来使输入的密码被隐藏。当用户输入密码时，输入框中显示的是圆点或星号等符号，而不是实际的密码字符。例如：

<label for="password">密码：</label>
<input type="password" id="password" name="password">

如果想要用户可以通过点击一个按钮或复选框等方式来切换密码的显示和隐藏，可以使用JavaScript来实现。例如：

<label for="password">密码：</label>
<input type="password" id="password" name="password">
<input type="checkbox" id="show-password-toggle">
<label for="show-password-toggle">显示密码</label>

<script>
  const passwordInput = document.querySelector('#password');
  const showPasswordToggle = document.querySelector('#show-password-toggle');
  showPasswordToggle.addEventListener('change', () => {
    if (showPasswordToggle.checked) {
      passwordInput.type = 'text';
    } else {
      passwordInput.type = 'password';
    }
  });
</script>

这段代码中，我们创建了一个复选框和一个<label>元素来显示"显示密码"的文本。然后，我们使用JavaScript来监听复选框的change事件，当复选框被选中时，将密码输入框的type属性设置为"text"，这样就可以显示密码了；当复选框被取消选中时，将密码输入框的type属性设置为"password"，这样就可以隐藏密码了。