正心全栈编程

更多表单控件 ​

上一节完成了文本字段。本节继续解决“怎样从固定选项中选择”和“怎样提交备注、文件等补充资料”，最后组合成一张报名信息表。

添加选择类控件 ​

单选按钮 ​

单选按钮用于“多个选项中只能选一个”：

html
<fieldset>
  <legend>学习方式</legend>

  <label>
    <input name="study_mode" type="radio" value="online" checked>
    线上学习
  </label>

  <label>
    <input name="study_mode" type="radio" value="offline">
    线下学习
  </label>
</fieldset>
学习方式
同一组单选按钮必须使用相同的 `name`。提交的是选中项的 `value`，不是页面上的说明文字。

checked 表示初始选中，不是“永远不能取消”。

value 应使用稳定、便于程序判断的值，例如 online、offline 或 python-basic。页面显示文字可以修改，但后续 JavaScript 的筛选、查找、Map 索引和 Set 去重应优先使用 value。

复选框 ​

复选框适合零个、一个或多个选项：

html
<fieldset>
  <legend>感兴趣的方向</legend>

  <label>
    <input name="interests" type="checkbox" value="python">
    Python 基础
  </label>

  <label>
    <input name="interests" type="checkbox" value="web">
    Web 全栈
  </label>

  <label>
    <input name="interests" type="checkbox" value="data">
    数据分析
  </label>
</fieldset>
感兴趣的方向
选中多个项目时，同一个 `name` 会对应多个值。后端如何接收多值字段，会在后续 FastAPI 专门课程中讲解。

单独的确认项也使用复选框：

html
<label>
  <input name="agreement" type="checkbox" value="accepted" required>
  我已阅读报名说明
</label>

预览效果如下：

下拉选择 ​

html
<label for="course">报名课程</label>
<select id="course" name="course" required>
  <option value="">请选择课程</option>
  <option value="python-basic">Python 基础</option>
  <option value="fastapi-web">FastAPI Web 全栈</option>
</select>

第一项使用空 value，配合 required 可以要求用户主动选择。

选项较多时可分组：

html
<select name="course">
  <optgroup label="基础课程">
    <option value="python-basic">Python 基础</option>
    <option value="frontend-basic">前端基础</option>
  </optgroup>
  <optgroup label="项目课程">
    <option value="fastapi-web">FastAPI Web 全栈</option>
  </optgroup>
</select>
## 接收补充资料

多行文本 ​

html
<label for="remark">备注</label>
<textarea
  id="remark"
  name="remark"
  rows="5"
  maxlength="200"
  placeholder="请填写需要特别说明的信息"
></textarea>

预览效果如下：

textarea 的初始内容写在开始和结束标签之间：

html
<textarea name="remark">希望参加周末班</textarea>

不要写 value="..."。为了避免意外空格，初始内容通常紧贴标签书写。

文件选择 ​

html
<label for="avatar">头像</label>
<input
  id="avatar"
  name="avatar"
  type="file"
  accept="image/png,image/jpeg"
>

预览效果如下：

accept 为选择器提供文件类型提示，但后端仍需验证真实文件类型和大小。

上传文件的表单需要声明编码方式：

html
<form action="/students" method="post" enctype="multipart/form-data">
  <!-- 文件控件与其他控件 -->
</form>

组织字段与操作 ​

使用 fieldset 与 legend 分组 ​

一组相关控件使用 fieldset 包裹，并用 legend 说明分组含义：

html
<fieldset>
  <legend>紧急联系人</legend>

  <label for="contact-name">姓名</label>
  <input id="contact-name" name="contact_name" type="text">

  <label for="contact-mobile">手机号</label>
  <input id="contact-mobile" name="contact_mobile" type="tel">
</fieldset>

预览效果如下：

紧急联系人

它不只是画一个边框，还让表单结构和无障碍信息更完整。

明确按钮类型 ​

html
<button type="submit">保存</button>
<button type="reset">恢复初始值</button>
<button type="button">预览</button>

下方只展示按钮外观，提交按钮不会发送请求：

类型作用
submit提交表单
reset恢复页面加载时的初始值
button默认不执行操作，留给 JavaScript 使用

在表单中不要省略 type。reset 不是清空全部内容，而是恢复到初始状态。

也可以使用 input 按钮：

html
<input type="submit" value="保存">

课程优先使用 button，因为它可以容纳更灵活的文字或图标内容。

完成补充报名信息 ​

html
<form action="/students" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>课程选择</legend>

    <label for="course">报名课程</label>
    <select id="course" name="course" required>
      <option value="">请选择课程</option>
      <option value="python-basic">Python 基础</option>
      <option value="fastapi-web">FastAPI Web 全栈</option>
    </select>

    <fieldset>
      <legend>学习方式</legend>
      <label>
        <input name="study_mode" type="radio" value="online" checked>
        线上学习
      </label>
      <label>
        <input name="study_mode" type="radio" value="offline">
        线下学习
      </label>
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>补充资料</legend>

    <label for="avatar">头像</label>
    <input id="avatar" name="avatar" type="file" accept="image/*">

    <label for="remark">备注</label>
    <textarea id="remark" name="remark" rows="4" maxlength="200"></textarea>
  </fieldset>

  <label>
    <input name="agreement" type="checkbox" value="accepted" required>
    我已核对以上信息
  </label>

  <p>
    <button type="submit">提交报名</button>
    <button type="reset">重新填写</button>
  </p>
</form>

下方仅预览外观，提交按钮不会发送请求；“重新填写”可以恢复预览中的初始值：

课程选择
学习方式
补充资料

小结 ​

  1. 相同 name 的单选按钮构成一个选项组。
  2. 复选框可以提交零个或多个同名值。
  3. select、textarea 和文件控件用于更丰富的数据录入。
  4. fieldset 与 legend 负责表达控件分组。
  5. 表单按钮应明确声明 type。