i标签密码显示切换

您可以使用 `input` 标签的 `type` 属性来切换密码的显示和隐藏。而为了实现切换密码的显示和隐藏，您可以使用 `i` 标签，并通过给 `i` 标签添加 `click` 事件来触发密码的显示和隐藏。以下是示例代码：

<div>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <i class="fa fa-eye" id="togglePassword"></i>
</div>

在上面的代码中，我们创建了一个包含密码输入框、标签和 `i` 标签的 div 元素。当用户单击 `i` 标签时，将调用 `togglePassword()` 函数，该函数将切换密码输入框的类型。

下面是 `togglePassword()` 函数的示例代码：

function togglePassword() {
  var passwordInput = document.getElementById("password");
  var toggleIcon = document.getElementById("togglePassword");
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    toggleIcon.classList.remove("fa-eye");
    toggleIcon.classList.add("fa-eye-slash");
  } else {
    passwordInput.type = "password";
    toggleIcon.classList.remove("fa-eye-slash");
    toggleIcon.classList.add("fa-eye");
  }
}

在上面的代码中，我们获取了密码输入框和 `i` 标签的元素，并检查了密码输入框的类型。如果它是“password”，我们将其类型更改为“text”，这样密码就会被显示出来，并将 `i` 标签的图标更改为“fa-eye-slash”，表示密码当前是可见的。如果它已经是“text”，我们将其类型更改为“password”，这样密码就会被隐藏，并将 `i` 标签的图标更改回“fa-eye”，表示密码当前是隐藏的。

在上面的代码中，我们使用了 FontAwesome 的图标库来显示切换按钮的图标。如果您没有使用 FontAwesome，请使用自己的图标或下载 FontAwesome 并将其添加到您的项目中。

这就是使用 `i` 标签切换密码显示和隐藏的示例代码。