第 03 节 · 表单与输入控件

📌 版本信息：基于 HTML Living Standard（2026-08-29 核对） 📚 来源：MDN Web 表单 ｜ MDN <input> 类型

一、这一节的目标

1. 掌握表单三要素：form、input、button
2. 认全常用输入控件（文本/密码/单选/复选/下拉/日期/文件…）
3. 理解 label 的作用并永远正确地绑定它
4. 会用 HTML 自带的表单校验（不用写一行 JS）
5. 写出登录 + 注册表单——以后每个 WebGIS 项目的查询面板都是它的变体

---

二、表单是什么、为什么 WebGIS 天天用它

一句话：表单是页面收集用户输入的装置。

想想你将来要做的界面：查询"1 公里内的咖啡店"（输入半径）、筛选"震级 > 5 的地震"（下拉+数字框）、登录数据管理平台（账号密码）、上传一份 Shapefile（文件选择）——全都是表单。地图应用 = 地图 + 一堆表单面板。

<form action="/api/login" method="post">
  <!-- form：表单的容器。
       action：数据提交到哪个地址（第 13 模块 FastAPI 接的就是它）
       method：提交方式，get（拼在网址上）/ post（放在请求体里，密码必须用 post） -->

  <label for="username">用户名</label>
  <input type="text" id="username" name="username" required />

  <label for="password">密码</label>
  <input type="password" id="password" name="password" minlength="6" required />

  <button type="submit">登录</button>
</form>

逐行拆解（每个属性都有用意）

属性	作用	忘了会怎样
for / id	label 通过 for 指向 input 的 id，两者必须成对	点文字无法聚焦输入框；屏幕阅读器不知道文字属于哪个框
name	提交时这个数据的键名。没有 name 的输入框不会被提交！	用户填了，后端却收不到
type	决定控件形态和键盘类型（手机上弹出数字键盘等）	体验差
required	必填校验	空数据直达后端
minlength	最小长度	6 位密码变成 1 位也放行

⚠️ 新手第一大坑：忘写 name。id 是给页面内用的（label/JS 找它），name 是提交数据用的键。两个都要写，职责不同。

---

三、input 全家族（按 type 变形）

<!-- 文本类 -->
<input type="text" />          <!-- 单行文本：搜索框、用户名 -->
<input type="password" />      <!-- 密码：显示为圆点 -->
<input type="email" />         <!-- 邮箱：自带格式校验 -->
<input type="search" />        <!-- 搜索框：部分浏览器带清空按钮 -->
<input type="tel" /> <input type="url" />

<!-- 数字与范围：GIS 查询面板的主角 -->
<input type="number" min="0" max="100" step="1" />   <!-- 数字框：带上下箭头 -->
<input type="range" min="0" max="100" value="50" />  <!-- 滑块：透明度调节神器 -->

<!-- 日期时间 -->
<input type="date" />          <!-- 日期选择器 -->
<input type="datetime-local" />

<!-- 开关类 -->
<input type="checkbox" />      <!-- 复选框：多选（图层树勾选） -->
<input type="radio" name="basemap" />  <!-- 单选框：同 name 的为一组 -->
<input type="hidden" name="token" value="abc" />  <!-- 隐藏域：捎带数据给后端 -->

<!-- 其他 -->
<input type="file" accept=".zip,.shp" />  <!-- 文件：accept 限制类型（上传 Shapefile） -->
<input type="color" />          <!-- 颜色选择器：改要素颜色的小工具 -->

💡 radio 的分组规则：靠相同的 name 分组。<input type="radio" name="basemap">天地图 和 <input type="radio" name="basemap">高德 是一组二选一；name 不同就各选各的。

---

四、其余控件：textarea、select、button

<!-- 多行文本：描述、备注 -->
<textarea rows="4" cols="40" placeholder="请输入备注…"></textarea>
<!-- 注意：textarea 不是自闭合，初始内容写在标签之间，不是 value 属性 -->

<!-- 下拉框：图层选择、分类筛选的主角 -->
<select name="province">
  <option value="">-- 请选择省份 --</option>
  <option value="hb" selected>湖北</option>
  <option value="gd">广东</option>
</select>
<!-- value 是提交给后端的值，标签中间是用户看到的字；selected = 默认选中 -->

<!-- 按钮三兄弟：type 决定行为 -->
<button type="submit">提交</button>   <!-- 提交表单（默认值，但建议显式写） -->
<button type="reset">清空</button>    <!-- 重置为初始值 -->
<button type="button">普通按钮</button> <!-- 纯粹可点击，交给 JS 处理（地图按钮全用它） -->

⚠️ 在表单里放按钮必须想清楚 type：type="submit" 是默认值！你想要个"定位到我的位置"的按钮，忘了写 type="button"，一点它就把表单提交了、页面刷新了——这是经典事故。

---

五、HTML 自带校验（零 JS）

<form>
  <input type="text" required minlength="2" maxlength="20" />
  <input type="number" min="0" max="360" />                <!-- 经度范围 -->
  <input type="email" required />
  <input type="text" pattern="[0-9]{6}" title="请输入 6 位数字" />
  <!-- pattern：正则表达式校验；title 会在校验失败的气泡里显示 -->

  <input type="text" placeholder="例如：武汉市洪山区" />
  <!-- placeholder：灰色提示文字，不参与提交 -->

  <button type="submit">查询</button>
</form>

点提交时浏览器自动拦截不合规矩的输入并弹气泡提示。能用 HTML 解决的校验就别写 JS——但记住：前端校验只是体验优化，后端（第 13 模块）必须再校验一遍，因为任何人都能绕过页面直接发请求。

---

六、动手跟练：03 · 登录注册表单

配套文件：02-web-basics/examples/03-登录注册表单.html（带注释和 TODO）

步骤：

1. Live Server 打开，读代码，确认每个属性的作用
2. 故意空着用户名点"登录"，观察浏览器校验气泡
3. 完成 3 处 TODO：给注册表单补"确认密码"框、补一个"记住我"复选框（带正确 label）、给邮箱输入框加校验
4. 在第 04 节的 Network 面板里点一次提交（表单没有后端，会 404——正常！），观察请求里带了哪些 name=值

通关标准：

• 能说出 id 和 name 的区别
• 单选框能正确分组（性别二选一、底图三选一互不干扰）
• 校验气泡能正常弹出（required/minlength/pattern 各触发一次）

---

七、自测题

1. id 和 name 分别干什么？哪个忘了数据就提交不上去？
2. 一组单选框靠什么成为"一组"？
3. 表单里的按钮默认 type 是什么？会触发什么行为？
4. placeholder 和 label 的区别？为什么 placeholder 不能替代 label？
5. 为什么说前端校验"只是体验优化"？

参考答案

1. id 页面内唯一标识（label 指向、JS 选取）；name 是提交数据的键名。name 忘了数据提交不上去。
2. 相同的 name 属性值。
3. submit，触发表单提交（页面跳转/刷新）。想放普通按钮必须写 type="button"。
4. placeholder 是提示文字（输入即消失，不参与提交）；label 是控件的正式名称（无障碍必需、点击可聚焦）。placeholder 在用户输入后消失，屏幕阅读器也未必读它。
5. 前端校验可被绕过（直接发 HTTP 请求），安全与数据完整性必须由后端再校验。

---

八、下一步

结构材料齐了，但页面还是"素颜" → 第 04 节：CSS 引入与选择器，开始给页面上妆。