input元素type属性值

一、基础类型与核心功能

1. text - 单行文本输入

• 应用场景：用户名、搜索框、短文本输入
• 特点：输入内容以明文显示，可通过 maxlength 限制长度

2. password - 密码输入

• 行为：输入内容显示为掩码（如 ● 或 *）
• 安全相关：搭配 autocomplete="new-password" 提升密码管理安全性

3. number - 数字输入

• 特性：
  • 自动调出数字键盘（移动端）
  • 支持 min/max/step 属性限制输入范围
  • 输入非数字时会触发验证错误

二、表单交互型类型

4. radio - 单选按钮

• 使用要点：
  • 同一组单选按钮需共享相同的 name 属性
  • 通过 value 标识选中值，checked 设置默认选中

  <input type="radio" name="gender" value="male" checked> 男
  <input type="radio" name="gender" value="female"> 女
  

5. checkbox - 复选框

• 场景：多项选择（如兴趣爱好、协议勾选）
• 状态：checked 表示选中，可通过 indeterminate 设置半选状态

三、日期与文件类型

6. date/datetime-local/time - 日期时间输入

• 差异：
  • date：年月日选择器（如 2025-07-01）
  • datetime-local：带时区的日期时间（如 2025-07-01T12:00）
  • time：仅时分秒选择

7. file - 文件上传

• 关键属性：
  • accept：限制上传文件类型（如 image/* 仅图片）
  • multiple：允许多文件选择
  • 配合 JavaScript 通过 FileReader 读取文件内容

四、高级交互与语义化类型

8. range - 滑块输入

• 应用：音量调节、进度控制、数值范围选择
• 属性：min（最小值）、max（最大值）、value（当前值）

9. email/url - 语义化输入

• 验证机制：
  • email：自动校验邮箱格式（如 user@example.com）
  • url：校验 URL 格式（如 https://example.com）
• 提示：结合 pattern 属性可自定义校验规则

五、隐藏与按钮类型

10. hidden - 隐藏字段

• 用途：存储无需用户输入的参数（如表单 token）
• 注意：值会随表单提交，但不在界面显示

11. button/submit/reset - 按钮类型

• 区别：
  • button：普通按钮（需搭配 JavaScript）
  • submit：提交表单（触发 form.submit()）
  • reset：重置表单（慎用，可能清空用户输入）

六、HTML5 新增类型（提升用户体验）

类型	功能描述	典型场景
color	颜色选择器（调出系统色板）	主题色设置
tel	电话号码输入（优化移动端键盘）	联系方式输入
search	搜索框（自带清除按钮）	网站搜索栏

七、问题

1. radio 如何实现默认选中？

• 答：通过 checked 属性（如 <input type="radio" checked>），同一组 name 下仅一个有效。

2. file 类型如何获取上传文件大小？

• 答：通过 File.size 属性（单位字节），例如：

  const file = document.getElementById('fileInput').files[0];
  console.log(`文件大小：${file.size} 字节`);
  

3. range 如何实时显示当前值？

• 答：监听 input 事件，更新关联的 span 元素：

  <input type="range" id="volume" min="0" max="100" value="50">
  <span id="volumeValue">50</span>
  

  document.getElementById('volume').addEventListener('input', (e) => {
    document.getElementById('volumeValue').textContent = e.target.value;
  });