Input

约 527 个字 37 行代码预计阅读时间 2 分钟

<input> 标签是 HTML 表单中最核心的元素之一，用于创建多种类型的输入控件（如文本框、密码框、单选按钮、文件上传等）。以下是详细的讲解：

1. 基本语法¶

<input type="类型" name="字段名" id="唯一标识" ...其他属性>

- 核心属性： - type：定义输入类型（默认为 text）。 - name：提交表单时的字段名称（后端通过此名称获取数据）。 - id：唯一标识符（用于关联 <label> 或 JavaScript 操作）。

2. 常见的 `type` 类型¶

<input type="text">       <!-- 文本输入框 -->
<input type="password">   <!-- 密码输入框 -->
<input type="checkbox">   <!-- 复选框 -->
<input type="radio">      <!-- 单选按钮 -->
<input type="submit">     <!-- 提交按钮 -->
<input type="date">       <!-- 日期选择器（HTML5） -->

type 决定了输入控件的交互行为（如 type="email" 会自动验证邮箱格式）。

(1) 文本输入¶

普通文本：

<input type="text" name="username" placeholder="请输入用户名">

placeholder：输入框的提示文本（非实际值）。

密码框：

<input type="password" name="password" required>

required：标记为必填字段（HTML5 表单验证）。

多行文本：

<textarea name="bio" rows="4" cols="50"></textarea>

注意：多行文本需用 <textarea> 标签，而非 <input>。

(2) 数字与范围¶

数字输入：

<input type="number" name="age" min="1" max="120" step="1">

min/max：允许的最小/最大值。
step：数值增减的步长。

滑动条：

<input type="range" name="volume" min="0" max="100" value="50">

(3) 选择类控件¶

单选按钮（Radio）：

<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>

同一组单选按钮需共享相同的 name 属性。

复选框（Checkbox）：

<input type="checkbox" name="hobby" value="reading" id="read">
<label for="read">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">运动</label>

(4) 日期与时间¶

日期选择：
```
<input type="date" name="birthday">
```
支持 min 和 max 限制日期范围。

时间选择：

<input type="time" name="meeting_time">

(5) 文件上传¶

<input type="file" name="avatar" accept="image/*">

- accept：限制上传文件类型（如 image/*, .pdf）。

(6) 其他类型¶

邮箱验证：

<input type="email" name="email" pattern=".+@example\.com">

浏览器会自动验证格式（如包含 @）。

颜色选择器：

<input type="color" name="theme_color">

隐藏字段：

<input type="hidden" name="user_id" value="123">

3. 常用属性¶

属性	作用
`value`	设置输入框的默认值
`disabled`	禁用输入框（不可编辑且数据不提交）
`readonly`	只读（可显示值但不可编辑，数据会提交）
`autocomplete`	控制浏览器自动填充（如 `autocomplete="off"`）
`pattern`	通过正则表达式验证输入格式（如 `pattern="[A-Za-z]{3}"`）
`autofocus`	页面加载时自动聚焦到该输入框

4. 表单验证（HTML5）¶

必填字段：

<input type="text" name="username" required>

自定义验证：

<input type="text" name="zipcode" pattern="\d{6}" title="请输入6位邮政编码">

5. 事件与 JavaScript 交互¶

<input type="text" id="search" onkeyup="searchFunction()">

- 常用事件： - onchange：值变化时触发。 - oninput：输入时实时触发。 - onfocus/onblur：聚焦或失焦时触发。

6. 最佳实践¶

始终关联 <label>：
使用 for 属性关联输入框的 id，提升可访问性。

<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

移动端适配：
使用 inputmode 优化移动键盘类型：
```
<input type="text" inputmode="numeric" name="phone">
```

样式控制：
通过 CSS 统一输入框外观：

input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}