一、知识回顾（读完直接做下面的实践题）#

1. 表单在网页中主要负责数据采集功能（注册、登录等）；表单标签是 <form>，表单项包括不同类型的 input 元素、下拉列表、文本域
2. 表单项三种标签：<input>（通过 type 属性控制输入形式）、<select>（下拉列表，里面的 <option> 定义列表项）、<textarea>（文本域，多行输入，用 cols/rows 控制大小）
3. action：规定当提交表单时向何处发送表单数据（URL）；method：规定用于发送表单数据的方式（GET、POST，不写默认 GET）
4. GET：表单数据拼接在 url 后面（如 /save?name=java），大小有限制、含隐私数据不安全；POST：表单数据在请求体中携带，大小没有限制、安全
5. 注意：表单项必须有 name 属性才可以提交——没有 name 的输入框，用户填了也采集不到
6. <input> 的 type 取值：text（默认，单行输入）、password（密码）、radio（单选）、checkbox（复选）、file（文件上传）、date/time/datetime-local（日期/时间/日期时间）、hidden（隐藏域）、submit/reset/button（提交/重置/可点击按钮）
7. value 是表单项提交的值：页面上写”男”，提交出去的是 gender=1；一组单选按钮必须共用同一个 name 才会互斥（只能选一个）
8. <textarea> 用 cols（列/宽）和 rows（行/高） 控制输入框大小；<select> 的 <option value=""> 常用来做”请选择”占位项
9. 表格标签结构：<table>（表格整体）里放 <thead>（表头，可选）和 <tbody>（主体，可选）；它们里面是 <tr>（行）；行里放 <td>（普通单元格）或 <th>（表头单元格）
10. 表格样式要点：border-collapse: collapse 让相邻单元格边框合并、th,td 设 border 与 padding（案例里表格宽度 width: 100%）

二、裸写题#

• 2-1 做一个”按姓名搜索”的表单 页面上要有一条搜索栏，要求：

  1. 里面有一个输入框用来填姓名，还有一个下拉列表可以选择性别（男/女，第一项是”请选择”）
  2. 还要一个查询按钮和清空按钮
  3. 整个表单提交到 /search，并且用 POST 方式提交（填进去的内容不能出现在 url 上）
  4. 两个表单项都要能被提交出去 （练习文件 test_10_搜索表单.html 里有写作区，页面骨架已备好。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：三步——① 用表单标签把这一组控件圈起来并指定”提交到哪、怎么提交”；② 写单行输入框和下拉列表；③ 写按钮 二级 · 方法：<form action="/search" method="post">；输入框 <input type="text" name="name">；下拉 <select name="gender"><option value="">…</option><option value="1">男</option>…</select>；按钮 <button type="submit">查询</button> / <button type="reset">清空</button> 三级 · 骨架：<form action="____" method="____"> … <input type="____" name="____"> … <select name="____"><option value="">…</option></select> … <button type="____">查询</button>

  参考答案（做完再点开）

  1
  <form action="/search" method="post">
  2
    <label for="name">姓名：</label>
  3
    <input type="text" id="name" name="name" placeholder="请输入姓名">
  4
  
  5
    <label for="gender">性别：</label>
  6
    <select id="gender" name="gender">
  7
      <option value=""></option>
  8
      <option value="1">男</option>
  9
      <option value="2">女</option>
  10
    </select>
  11
  
  12
    <button type="submit">查询</button>
  13
    <button type="reset">清空</button>
  14
  </form>

  对照课程 14. Tlias案例-搜索表单区域.html。三个检查点：method="post"（不能用默认的 get，否则姓名会出现在 url 上）；两个控件都写了 name；按钮写了 type="submit" 才能触发表单提交（reset 负责恢复初始值）。

• 2-2 做”员工登记”里的三组控件 要求做一块登记信息，包含：

  1. 性别：两个单选项（男 / 女），只能选一个；选男提交 gender=1、选女提交 gender=2
  2. 爱好：三个复选项（java / game / sing），可以多选，提交的名字统一叫 hobby
  3. 生日：一个日期选择控件，提交的名字叫 birthday （练习文件 test_10_登记表单项.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：单选用一种输入类型、复选用另一种；“只能选一个”这件事是由同一个 name 保证的，不是靠属性开关 二级 · 方法：type="radio"（一组共用同一个 name="gender"，每项用 value 区分）；type="checkbox"（多项共用 name="hobby"）；日期用 type="date" 三级 · 骨架：<input type="____" name="gender" value="1"> 男 / <input type="____" name="hobby" value="java"> java / <input type="____" name="birthday">

  参考答案（做完再点开）

  1
  <form action="/save" method="post">
  2
    性别: <input type="radio" name="gender" value="1"> 男
  3
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
  4
  
  5
    爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
  6
          <label><input type="checkbox" name="hobby" value="game"> game </label>
  7
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
  8
  
  9
    生日: <input type="date" name="birthday">
  10
  </form>

  对照课程 13. 表单项标签.html。要点：单选框两个 name 必须一样（gender）才会互斥，靠 value 区分提交值（1 / 2）；复选框三项 name 也一样（hobby），可以同时勾多个，提交出去是 hobby=java&hobby=game 这种多值形式；每个 <label> 把输入框和文字包起来，点文字也能选中。

• 2-3 做一个”职位 + 学历”的下拉列表 要求：

  1. 一个职位下拉列表，提交名字叫 position，选项有：班主任、讲师、学工主管、教研主管、咨询师，第一项是空的”请选择”
  2. 一个描述文本域，提交名字叫 description，宽 30 列、高 10 行 （练习文件 test_10_下拉与文本域.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：下拉用一个外层标签把若干”选项”装起来；多行输入用另外那个标签，尺寸靠两个属性控制 二级 · 方法：<select name="position"> 里放多个 <option value="1">班主任</option>；文本域 <textarea name="description" cols="30" rows="10"></textarea> 三级 · 骨架：<select name="____"><option value="">----------- 请选择 -----------</option>…</select> / <textarea name="____" cols="____" rows="____"></textarea>

  参考答案（做完再点开）

  1
  职位: <select name="position">
  2
          <option value="">----------- 请选择 -----------</option>
  3
          <option value="1">班主任</option>
  4
          <option value="2">讲师</option>
  5
          <option value="3">学工主管</option>
  6
          <option value="4">教研主管</option>
  7
          <option value="5">咨询师</option>
  8
        </select> <br><br>
  9
  
  10
  描述: <textarea name="description" cols="30" rows="10"></textarea>

  对照课程 13. 表单项标签.html（学历下拉）和 14. Tlias案例-搜索表单区域.html（职位下拉）。<option> 的 value 才是提交的值；不写 value 时会默认提交标签里的文字，但实际项目里都是显式写 value（一般是数据库里的编号）。

• 2-4 提交时”悄悄带上”数据，再给一个”重置”按钮 要求：

  1. 表单里有一个文件上传控件（提交名字 image）
  2. 有一个隐藏的表单项，把 id=1 一起提交（用户看不到它）
  3. 有一个重置按钮，点了能把表单内容恢复到初始状态 （练习文件 test_10_文件与隐藏域.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：文件上传、看不见的项、重置按钮——都是同一个标签换一种 type 二级 · 方法：<input type="file" name="image">；隐藏域 <input type="hidden" name="id" value="1">；重置按钮 <input type="reset" value="重置"> 三级 · 骨架：<input type="____" name="image"> / <input type="____" name="id" value="____"> / <input type="____" value="重置">

  参考答案（做完再点开）

  1
  <form action="/save" method="post">
  2
    图像: <input type="file" name="image">  <br><br>
  3
  
  4
    <!-- 隐藏域：页面看不见，但值会跟着表单提交 -->
  5
    <input type="hidden" name="id" value="1">
  6
  
  7
    <input type="reset" value="重置">
  8
    <input type="submit" value="提交">
  9
  </form>

  对照课程 13. 表单项标签.html。隐藏域虽然看不见，但照样要有 name 和 value（name 是它的名字、value 是它提交的值）；type="reset" 只清空这个表单内部的内容，不会刷新页面。

三、综合题#

• 3-1 完成 Tlias 的”搜索表单区域 + 表格数据展示区域” 练习文件里已经给出了 <body> 和一份待填的样式占位。按步骤做：

  1. 表单：用表单标签把搜索区圈起来，提交到 /search、用 POST 方式
  2. 姓名：加一个单行输入框（名字 name），配一个”姓名：“的说明文字
  3. 性别与职位：两个下拉列表（名字分别 gender、position），性别选项为 空/男/女，职位选项为 空/班主任/讲师/学工主管/教研主管/咨询师
  4. 按钮：加”查询”和”清空”两个按钮
  5. 表格：表格整体 + 表头行（姓名、性别、职位、入职日期）用表头单元格
  6. 表格数据：主体部分加两行数据（令狐冲/男/讲师/2021-06-15、任盈盈/女/咨询师/2021-07-20）
  7. 自查：数一数表单里一共有几个 name？表格里表头用了 <th>、数据用了 <td> 吗？
  提示（先自己想，实在想不出再点开）

  一级 · 思路：第 14 步是”表单 + 几个表单项”；第 56 步是”表格整体 → 头部 → 主体”，一层套一层 二级 · 方法：<form action="/search" method="post">；<input type="text" name="name">；两个 <select> 里放 <option>；<button type="submit">查询</button> / <button type="reset">清空</button>；表格 <table><thead><tr><th>… + <tbody><tr><td>… 三级 · 骨架：<form action="____" method="____"> … <table><thead><tr><th>____</th></tr></thead><tbody><tr><td>____</td></tr></tbody></table>

  参考答案（做完再点开）

  1
  <!-- 搜索表单区域 -->
  2
  <form action="/search" method="post">
  3
    <label for="name">姓名：</label>
  4
    <input type="text" id="name" name="name" placeholder="请输入姓名">
  5
  
  6
    <label for="gender">性别：</label>
  7
    <select id="gender" name="gender">
  8
      <option value=""></option>
  9
      <option value="1">男</option>
  10
      <option value="2">女</option>
  11
    </select>
  12
  
  13
    <label for="position">职位：</label>
  14
    <select id="position" name="position">
  15
      <option value=""></option>
  16
      <option value="1">班主任</option>
  17
      <option value="2">讲师</option>
  18
      <option value="3">学工主管</option>
  19
      <option value="4">教研主管</option>
  20
      <option value="5">咨询师</option>
  21
    </select>
  22
  
  23
    <button type="submit">查询</button>
  24
    <button type="reset">清空</button>
  25
  </form>
  26
  
  27
  <!-- 表格展示区 -->
  28
  <table>
  29
    <!-- 表头 -->
  30
    <thead>
  31
      <tr>
  32
        <th>姓名</th>
  33
        <th>性别</th>
  34
        <th>职位</th>
  35
        <th>入职日期</th>
  36
      </tr>
  37
    </thead>
  38
  
  39
    <!-- 表格主体内容 -->
  40
    <tbody>
  41
      <tr>
  42
        <td>令狐冲</td>
  43
        <td>男</td>
  44
        <td>讲师</td>
  45
        <td>2021-06-15</td>
  46
      </tr>
  47
      <tr>
  48
        <td>任盈盈</td>
  49
        <td>女</td>
  50
        <td>咨询师</td>
  51
        <td>2021-07-20</td>
  52
      </tr>
  53
    </tbody>
  54
  </table>

  显示更多显示更少

  第 7 步的答案：表单里有 3 个 name（name、gender、position）——按钮不需要 name（它们不是”数据”，是操作）；表格里表头四个单元格用的是 <th>、数据行用的是 <td>。对照课程 14. Tlias案例-搜索表单区域.html 与 15. Tlias案例-表格数据展示区域.html，课程版本还多加了头像列、操作列和表格样式，结构是一样的。