带标签的密码输入和隐藏/显示切换眼睛 svg - 一个简单的教程

有关如何创建密码输入的教程，该密码输入在带有标签的 svg 单击上显示/隐藏文本。

超文本标记语言

对于 HTML，我们需要一个能够包装所有内容的容器。我们将为此元素设置“password_input_container”类。

然后我们需要输入密码类型。稍后将使用 JavaScript 将类型切换为文本并返回密码。

我们还将输入的占位符设置为空格（“”），这将允许我们在输入具有某些值时使用 CSS 进行检测，因此我们可以对其进行不同的样式，因为我们希望标签元素既是标签又是占位符。

此外，我们还需要一个密码标签。

还有按钮。单击此元素将触发名为“toggle()”的函数。我们稍后将在 javascript 部分创建它。

在按钮内部，我们将放置一个眼睛 svg。

<div class="password_input_container">
    <input placeholder=" " name="password_input"