input输入类型对应的type属性有什么

input元素的type属性用于指定输入框的类型，常见的type属性值及其对应的输入类型如下：

1. text：普通文本输入框，用于输入一行文本。

2. password：密码输入框，输入的内容会被隐藏为圆点或星号。

3. number：数字输入框，用于输入数值。

4. email：邮箱输入框，验证用户输入是否符合邮箱格式。

5. tel：电话号码输入框，用于输入电话号码。

6. url：URL输入框，验证用户输入是否符合URL格式。

7. checkbox：复选框，用于选择一个或多个选项。

8. radio：单选框，用于从一组选项中选择一个选项。

9. file：文件上传框，用于选择上传文件。

10. date：日期输入框，用于选择日期。

11. time：时间输入框，用于选择时间。

12. color：颜色选择框，用于选择颜色。

13. range：范围选择框，用于通过滑块选择一个数值范围。

除了上述常见的type属性值外，还有一些其他类型属性值可以用于特殊的输入需求。具体使用哪种类型取决于你想要实现的功能和数据类型。

相关问题

input的type属性

input元素的type属性用于指定输入字段的类型。常见的type属性值包括：

- text：文本输入框
- password：密码输入框，输入的内容会被隐藏
- email：电子邮件地址输入框
- number：数字输入框
- date：日期输入框
- file：文件上传输入框
- checkbox：复选框
- radio：单选框

等等。不同的type属性值会对应不同的输入界面和验证规则。

案例需求：使用两张不同状态的“眼睛”图片充当按钮功能。 图片中“眼睛”睁开时密码显示，闭合时密码隐藏。 默认情况下，输入的密码是隐藏的，对应闭合状态的“眼睛”。 案例实现思路 首先通过img和input等元素搭建密码结构，然后通过JavaScript操作元素的属性，通过更改input元素的type属性完成密码框和文本框的切换，并切换对应的“眼睛”图片。

代码实现：

HTML部分：

<div class="password-box">
  <input type="password" placeholder="输入密码" id="password-input">
  <img src="close-eye.png" alt="闭合状态眼睛" id="eye-icon">
</div>

CSS部分：

.password-box {
  position: relative;
}

#eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

JavaScript部分：

const passwordInput = document.getElementById("password-input");
const eyeIcon = document.getElementById("eye-icon");

// 点击眼睛图标切换密码显示/隐藏
eyeIcon.addEventListener("click", () => {
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    eyeIcon.src = "open-eye.png";
    eyeIcon.alt = "睁开状态眼睛";
  } else {
    passwordInput.type = "password";
    eyeIcon.src = "close-eye.png";
    eyeIcon.alt = "闭合状态眼睛";
  }
});

以上代码实现了点击眼睛图标切换密码显示/隐藏的功能，同时切换对应的眼睛图标。对应的开眼图标为open-eye.png，闭眼图标为close-eye.png。