HTML 表单控件

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

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

<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">

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

<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. 密码输入框 `

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

<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）会显示清除按钮。

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

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

4. 电话号码 `

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

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

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

5. 电子邮件 `

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

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

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

6. 网址 `

要求输入有效的 URL 地址。

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

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

---

三、数值与范围类控件

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

1. 数字输入 `

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

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

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

2. 范围滑块 `

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

<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. 日期 `

选择年、月、日。

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

• 值格式：YYYY-MM-DD

2. 月份 `

选择年和月。

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

• 值格式：YYYY-MM

3. 周 `

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

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

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

4. 时间 `

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

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

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

5. 日期时间 `

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

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

• 值格式：YYYY-MM-DDTHH:MM

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

---

五、选择类控件

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

1. 下拉选择框 <select>

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

<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. 单选按钮 `

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

<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. 复选框 `

允许选择多个选项。

<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：默认勾选。
• 若需提交布尔值（如“同意协议”），可设计为：

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

---

六、文件与图像类控件

1. 文件上传 `

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

<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. 图像按钮 `

用图片作为提交按钮。

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

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

---

七、按钮类控件

1. 提交按钮

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

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

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

2. 重置按钮

将表单恢复到初始状态。

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

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

3. 普通按钮

无默认行为，由 JavaScript 驱动。

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

4. 隐藏域 `

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

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

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

---

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

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

<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>：表单控件的标签

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

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

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

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

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

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

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

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

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

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

<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）

const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {if (!form.checkValidity()) {e.preventDefault(); // 阻止提交// 自定义错误处理}
});// 自定义错误消息
input.setCustomValidity('请输入有效值！');

3. CSS 验证伪类

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