设计一个登录框,登录框的密码栏,点击框内的眼睛打开图标明文输入,点击眼睛关闭图标密码输入代码
时间: 2024-11-09 20:28:32 浏览: 5
Bootstrap显示隐藏密码输入代码
设计一个登录框通常会包括以下几个关键元素:
1. **用户名输入框**:用于用户输入账号名称,一般会有相应的文本框组件。
2. **密码输入框**:这是敏感信息输入区域,初始状态应该是不可见的。可以包含一个`<input type="password">`标签,隐藏密码字符。
3. **眼睛图标**:通常作为密码可见/不可见切换的控制,点击时切换密码显示状态。这可以是一个`<i>`标签,里面放置一个“eye”或“eye-off”图标,如`<i class="fas fa-eye"></i>` 或 `<i class="fas fa-eye-slash"></i>`,绑定点击事件来改变密码框的type属性(从"password"变为"text"反之)。
```html
<div class="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" placeholder="请输入用户名...">
<div class="password-field">
<input type="password" id="password" placeholder="请输入密码...">
<button class="eye-icon" onclick="togglePasswordVisibility()">
<i class="fas fa-eye @(passwordVisible ? 'slash' : '')"></i>
</button>
</div>
<button>登录</button>
</div>
<script>
function togglePasswordVisibility() {
const passwordInput = document.getElementById('password');
passwordInput.type = passwordInput.type === 'text' ? 'password' : 'text';
passwordVisible = !passwordVisible;
}
</script>
```
阅读全文