HTML 表单控件

一、表单基础：`<form>` 元素------交互的容器

所有表单控件都必须包裹在 <form> 标签内，它是整个表单逻辑的容器，定义了数据提交的方式与目标。

html 复制代码

<form action="/api/submit" method="POST" enctype="multipart/form-data" autocomplete="off">
  <!-- 表单控件将放在这里 -->
</form>

核心属性详解

属性	说明	常见值
`action`	指定表单数据提交的服务器端 URL	`/submit`, `https://api.example.com/user`
`method`	定义 HTTP 请求方法	`GET`（数据附加在 URL 后），`POST`（数据在请求体中）
`enctype`	数据编码类型，影响 `POST` 请求的格式	`application/x-www-form-urlencoded`（默认），`multipart/form-data`（文件上传必需），`text/plain`（纯文本，极少用）
`autocomplete`	控制浏览器自动填充行为	`on`（开启），`off`（关闭），`name`, `email`, `current-password` 等特定字段提示
`novalidate`	禁用浏览器内置表单验证	`novalidate`（布尔属性）
`target`	指定提交后响应的打开方式	`_self`（当前窗口），`_blank`（新窗口），`_parent`, `_top`

重要提示 ：当表单包含文件上传控件（<input type="file">）时，必须设置 enctype="multipart/form-data"，否则文件无法正确提交。

二、文本输入类控件

这类控件用于接收用户输入的文本信息，是最常见的一类表单元素。

1. 单行文本输入框 `<input type="text">`

用于输入短文本，如用户名、标题等。

html 复制代码

<label for="username">用户名：</label>
<input 
  type="text" 
  id="username" 
  name="username" 
  value="默认值" 
  placeholder="请输入用户名" 
  maxlength="20" 
  minlength="3"
  required 
  autofocus 
  readonly>

name ：提交时的键名，必须设置，否则数据不会被提交。
id ：与 <label> 的 for 属性关联，实现点击标签聚焦。
value：初始值。
placeholder：占位提示文本，输入时消失。
maxlength / minlength：字符长度限制。
required：必填项，提交时若为空会提示。
autofocus：页面加载后自动获得焦点（一个页面建议只有一个）。
readonly：只读，用户不能修改，但值会提交。
disabled ：禁用，样式变灰，值不会提交。

注意：type="text" 是 <input> 的默认类型，可省略 type 属性。

2. 密码输入框 `

用于输入密码，内容以圆点或星号隐藏。

html 复制代码

<input 
  type="password" 
  name="password" 
  minlength="8" 
  autocomplete="current-password"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

autocomplete ：建议设置为 current-password 或 new-password，帮助浏览器正确管理密码。
pattern：可结合正则表达式实现复杂密码强度验证（如上例要求包含大小写字母和数字）。

3. 搜索框 `

专为搜索功能设计，某些浏览器（如 Safari）会显示清除按钮。

html 复制代码

<input type="search" name="q" results="5" autosave="search-history">

results：（已废弃）建议显示的搜索结果数量。
autosave：（非标准）用于保存搜索历史。

4. 电话号码 `

提示移动设备弹出数字键盘。

html 复制代码

<input 
  type="tel" 
  name="phone" 
  placeholder="138-0013-8000"
  pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">

pattern ：使用正则强制格式（如 123-4567-8901）。

5. 电子邮件 `

内置邮箱格式验证（如必须包含 @ 和 .）。

html 复制代码

<input 
  type="email" 
  name="email" 
  multiple 
  placeholder="多个邮箱用逗号分隔">

multiple：允许输入多个邮箱，提交时以逗号分隔。

6. 网址 `

要求输入有效的 URL 地址。

html 复制代码

<input type="url" name="website" placeholder="https://example.com">

浏览器会验证是否以 http:// 或 https:// 开头。

三、数值与范围类控件

适用于需要输入数字或在范围内选择值的场景。

1. 数字输入 `

只能输入数字，通常带有增减按钮。

html 复制代码

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

min / max：数值范围限制。
step ：增减步长。step="any" 允许任意小数。
移动端可能弹出数字键盘。

2. 范围滑块 `

通过滑动条选择数值，适合音量、亮度等调节。

html 复制代码

<label>音量：<output id="volumeOutput">50</output></label>
<input 
  type="range" 
  name="volume" 
  min="0" 
  max="100" 
  value="50" 
  step="5"
  oninput="volumeOutput.value = this.value">

常配合 <output> 实时显示当前值。
step：滑动的最小单位。

四、日期与时间类控件

HTML5 提供了强大的原生日历和时间选择器，极大简化了开发。

1. 日期 `

选择年、月、日。

html 复制代码

<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">

值格式：YYYY-MM-DD

2. 月份 `

选择年和月。

html 复制代码

<input type="month" name="graduation">

值格式：YYYY-MM

3. 周 `

选择年和周数（ISO 8601 标准）。

html 复制代码

<input type="week" name="work_week">

值格式：YYYY-Www（如 2025-W10）

4. 时间 `

选择时间（小时和分钟）。

html 复制代码

<input type="time" name="meeting_time" step="300"> <!-- 步长5分钟 -->

值格式：HH:MM
step：以秒为单位。

5. 日期时间 `

选择本地日期和时间（不带时区）。

html 复制代码

<input type="datetime-local" name="event_start">

值格式：YYYY-MM-DDTHH:MM

注意：<input type="datetime"> 已被废弃，应使用 datetime-local。

五、选择类控件

这类控件允许用户从预定义选项中做出选择。

1. 下拉选择框 `<select>`

提供下拉列表供用户选择。

html 复制代码

<label for="country">国家：</label>
<select name="country" id="country" required>
  <option value="" disabled selected>请选择国家</option>
  <option value="cn">中国</option>
  <option value="us">美国</option>
  <option value="jp">日本</option>
  <optgroup label="欧洲">
    <option value="de">德国</option>
    <option value="fr">法国</option>
  </optgroup>
</select>

<option> ：
- value：提交的值。
- selected：默认选中。
- disabled：禁用该选项。
- label：替代显示文本（可选）。
<optgroup>：对选项进行语义化分组，提升可读性。
size ：设置为 >1 时显示为列表框而非下拉。
multiple：允许多选（需按住 Ctrl/Command 键）。

2. 单选按钮 `

从一组互斥选项中选择一项。

html 复制代码

<fieldset>
  <legend>性别：</legend>
  <label><input type="radio" name="gender" value="male" checked> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>
  <label><input type="radio" name="gender" value="other"> 其他</label>
</fieldset>

name 必须相同才能实现"单选"逻辑。
checked：默认选中项。
推荐使用 <fieldset> 和 <legend> 进行分组，增强语义和可访问性。

3. 复选框 `

允许选择多个选项。

html 复制代码

<fieldset>
  <legend>兴趣爱好：</legend>
  <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
  <label><input type="checkbox" name="hobby" value="music" checked> 音乐</label>
  <label><input type="checkbox" name="hobby" value="sports"> 运动</label>
</fieldset>

checked：默认勾选。
若需提交布尔值（如"同意协议"），可设计为：

html 复制代码

<label>
  <input type="checkbox" name="agree" value="1" required>
  我已阅读并同意《用户协议》
</label>
<!-- 未勾选时，此字段不会被提交 -->

六、文件与图像类控件

1. 文件上传 `

允许用户选择并上传文件。

html 复制代码

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

accept ：限制文件类型（image/*, .pdf, audio/*, video/*）。
multiple：允许多文件选择。
capture ：（移动端）直接调用摄像头或麦克风（user 前置，environment 后置）。
required：可设为必传。

关键：包含此控件的表单必须设置 enctype="multipart/form-data"。

2. 图像按钮 `

用图片作为提交按钮。

html 复制代码

<input 
  type="image" 
  src="submit-btn.png" 
  alt="提交表单" 
  width="100" 
  height="50">

点击坐标会作为 x 和 y 值提交（如 submit.x=10&submit.y=20）。

七、按钮类控件

1. 提交按钮

将表单数据发送到服务器。

html 复制代码

<input type="submit" value="提交">
<button type="submit">提交</button>

<button> 更灵活，可包含 HTML 内容（如图标）。

2. 重置按钮

将表单恢复到初始状态。

html 复制代码

<input type="reset" value="重置">
<button type="reset">重置</button>

建议：用户体验较差，现代设计中较少使用。

3. 普通按钮

无默认行为，由 JavaScript 驱动。

html 复制代码

<button type="button" onclick="saveDraft()">保存草稿</button>

4. 隐藏域 `

存储不希望用户看到的数据。

html 复制代码

<input type="hidden" name="csrf_token" value="abc123xyz">
<input type="hidden" name="user_id" value="12345">

常用于 CSRF 防护、会话跟踪等。

八、多行文本 `<textarea>`：长文本输入

用于输入多行文本，如评论、描述、代码等。

html 复制代码

<textarea 
  name="message" 
  rows="5" 
  cols="50" 
  placeholder="请输入您的留言..."
  maxlength="1000"
  wrap="soft"
  required></textarea>

rows / cols：可视行数和列数（推荐用 CSS 控制尺寸）。
wrap ：soft（软换行，不插入 \n），hard（硬换行，插入 \n，需设置 enctype）。
内容写在标签之间：<textarea>默认内容</textarea>。

九、辅助与增强控件

1. `<label>`：表单控件的标签

为控件提供可点击的标签，提升可访问性。

html 复制代码

<!-- 显式关联（推荐） -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

<!-- 隐式关联 -->
<label>
  姓名：<input type="text" name="name">
</label>

2. `<fieldset>` 与 `<legend>`：逻辑分组

对相关控件进行视觉和语义上的分组。

html 复制代码

<fieldset>
  <legend>账户信息</legend>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
</fieldset>

3. `<datalist>`：自动完成列表

为 <input> 提供预定义选项，用户可选择或自定义。

html 复制代码

<label>城市：
  <input list="cities" name="city">
</label>
<datalist id="cities">
  <option value="北京">
  <option value="上海">
  <option value="广州">
</datalist>

4. `<output>`：动态输出结果

显示计算结果或脚本输出。

html 复制代码

<input type="range" oninput="result.value = this.value">
<output name="result" for="rangeInput">50</output>

for 属性关联影响它的控件。

十、表单验证

1. 内置验证属性

HTML5 提供声明式验证：

required：必填
min / max：数值/日期范围
minlength / maxlength：字符串长度
pattern：正则匹配
type：email, url 自动格式校验

2. 验证 API（JavaScript）

javascript 复制代码

const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
  if (!form.checkValidity()) {
    e.preventDefault(); // 阻止提交
    // 自定义错误处理
  }
});

// 自定义错误消息
input.setCustomValidity('请输入有效值！');

3. CSS 验证伪类

css 复制代码

input:valid   { border: 2px solid green; }
input:invalid { border: 2px solid red; }
input:focus:invalid { outline: 2px solid pink; }

一、表单基础：<form> 元素------交互的容器

核心属性详解

二、文本输入类控件

1. 单行文本输入框 <input type="text">

2. 密码输入框 `

3. 搜索框 `

4. 电话号码 `

5. 电子邮件 `

6. 网址 `

三、数值与范围类控件

1. 数字输入 `

2. 范围滑块 `

四、日期与时间类控件

1. 日期 `

2. 月份 `

3. 周 `

4. 时间 `

5. 日期时间 `

五、选择类控件

1. 下拉选择框 <select>

2. 单选按钮 `

3. 复选框 `

六、文件与图像类控件

1. 文件上传 `

2. 图像按钮 `

七、按钮类控件

1. 提交按钮

2. 重置按钮

3. 普通按钮

4. 隐藏域 `

八、多行文本 <textarea>：长文本输入

九、辅助与增强控件

1. <label>：表单控件的标签

2. <fieldset> 与 <legend>：逻辑分组

3. <datalist>：自动完成列表

4. <output>：动态输出结果

十、表单验证

1. 内置验证属性

2. 验证 API（JavaScript）

3. CSS 验证伪类

一、表单基础：`<form>` 元素------交互的容器

1. 单行文本输入框 `<input type="text">`

1. 下拉选择框 `<select>`

八、多行文本 `<textarea>`：长文本输入

1. `<label>`：表单控件的标签

2. `<fieldset>` 与 `<legend>`：逻辑分组

3. `<datalist>`：自动完成列表

4. `<output>`：动态输出结果