HTML 学习：input 单选、复选与文件域详解

1. 引言

在 HTML 表单开发中，<input> 元素是最常用的交互组件之一。除了常见的文本框和密码框，单选按钮（radio） 、复选框（checkbox） 和 文件域（file） 也是表单中不可或缺的组成部分。本文将从基础语法、常用属性到实际案例，带你系统掌握这三种 input 类型的使用方法。

2. 单选按钮（radio）

单选按钮用于在多个选项中只能选择其中一个，适合性别、支付方式、套餐选择等场景。

2.1 基本语法

html 复制代码

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

2.2 关键属性

type="radio"：声明这是一个单选按钮。
name：同一组单选按钮必须使用相同的 name，浏览器才能实现互斥（只能选一个）。
value：提交表单时传给服务器的值，必须设置，否则提交的是 "on"。
checked：默认选中项。

2.3 完整示例

html 复制代码

<form action="/submit" method="post">
  <p>请选择您的性别：</p>
  <label><input type="radio" name="gender" value="male" checked> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>
  <br><br>
  <button type="submit">提交</button>
</form>

💡 提示：使用 <label> 包裹 input 和文字，点击文字也能选中选项，提升用户体验。

3. 复选框（checkbox）

复选框允许用户在多个选项中选择任意多个，适合兴趣爱好、技能标签、服务条款同意等场景。

3.1 基本语法

html 复制代码

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="sports"> 运动

3.2 关键属性

type="checkbox"：声明这是一个复选框。
name：同一组复选项建议使用相同的 name，便于后端以数组形式接收。
value：提交时传给服务器的值。
checked：默认勾选状态。

3.3 完整示例

html 复制代码

<form action="/submit" method="post">
  <p>请选择您的兴趣爱好（可多选）：</p>
  <label><input type="checkbox" name="hobby" value="reading" checked> 阅读</label>
  <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
  <label><input type="checkbox" name="hobby" value="sports"> 运动</label>
  <br><br>
  <button type="submit">提交</button>
</form>

3.4 单选与复选的区别

对比项	单选（radio）	复选（checkbox）
选择数量	只能选一个	可选多个
互斥性	同 name 互斥	互不干扰
默认状态	无	无
典型场景	性别、支付方式	爱好、多选标签

4. 文件域（file）

文件域用于让用户选择本地文件并上传，常用于头像上传、附件提交、简历投递等场景。

4.1 基本语法

html 复制代码

<input type="file" name="avatar">

4.2 常用属性

type="file"：声明这是文件选择框。
name：提交时传给服务器的字段名。
accept：限制可选的文件类型，如 accept="image/*" 只允许图片。
multiple：允许一次选择多个文件。
required：必填项。

4.3 完整示例

html 复制代码

<form action="/upload" method="post" enctype="multipart/form-data">
  <p>上传头像（仅支持图片）：</p>
  <input type="file" name="avatar" accept="image/*">
  <br><br>
  <p>上传附件（可多选）：</p>
  <input type="file" name="files" multiple>
  <br><br>
  <button type="submit">上传</button>
</form>

⚠️ 注意：表单需要上传文件时，<form> 必须设置 enctype="multipart/form-data"，否则文件内容无法正确传输到服务器。

4.4 accept 常见取值

取值	含义
`image/*`	所有图片格式
`audio/*`	所有音频格式
`video/*`	所有视频格式
`.pdf,.doc,.docx`	指定扩展名
`application/pdf`	指定 MIME 类型

5. 综合实战：注册表单

下面是一个综合运用单选、复选和文件域的表单示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
</head>
<body>
  <h2>用户注册</h2>
  <form action="/register" method="post" enctype="multipart/form-data">
    <!-- 单选：性别 -->
    <p>性别：</p>
    <label><input type="radio" name="gender" value="male" checked> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>

    <!-- 复选：兴趣爱好 -->
    <p>兴趣爱好（可多选）：</p>
    <label><input type="checkbox" name="hobby" value="coding"> 编程</label>
    <label><input type="checkbox" name="hobby" value="gaming"> 游戏</label>
    <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>

    <!-- 文件域：头像上传 -->
    <p>上传头像：</p>
    <input type="file" name="avatar" accept="image/*">

    <br><br>
    <button type="submit">注册</button>
  </form>
</body>
</html>

6. 常见问题与注意事项

单选按钮忘记设置 name：会导致所有单选按钮互不关联，可以同时选中多个，务必检查。
value 未设置：提交时默认值为 "on"，后端难以识别具体选项，建议始终显式设置。
文件上传忘记 enctype ：表单未设置 enctype="multipart/form-data" 时，文件内容无法上传。
label 关联 ：使用 <label> 包裹或通过 for 属性关联，可提升点击区域和可访问性。

7. 总结

单选按钮（radio）：同组互斥，只能选一个，适合性别、支付方式等场景。
复选框（checkbox）：可多选，适合兴趣爱好、多选标签等场景。
文件域（file） ：选择本地文件上传，配合 accept 限制类型、multiple 支持多选，表单需设置 enctype="multipart/form-data"。

掌握这三种 input 类型，你就能构建出功能完整的 HTML 表单。建议动手写一个注册页面，把单选、复选和文件域结合起来练习，加深理解。