第 5 课：form与按钮类型

• 日期：2026-09-04
• 课程序号：第 5 课
• 知识点：GET 表单、name 与 submit/reset/button

用途

把输入字段组成可提交的练习表单。

核心概念

name 是提交键，id 用于标签关联；submit 提交、reset 恢复默认值、button 本身不提交。GET 会把数据放进 URL，只用无敏感性的练习文本。

最小代码或操作示例

<!doctype html>
<html lang="zh-CN"><meta charset="utf-8"><title>表单练习</title>
<form method="get">
  <label for="topic">学习主题</label>
  <input id="topic" name="topic" value="HTML" required>
  <button type="submit">查看提交参数</button>
  <button type="reset">恢复默认</button>
</form></html>

3～5 分钟练习

用本地静态服务器打开页面，把内容改为 CSS 后提交，查看地址；再次修改并点恢复默认。

参考答案

地址查询中包含 topic=CSS；reset 恢复 HTML。没有后端保存逻辑，提交不代表课程已保存。

与上一课的联系

上一课给输入框加标签，本课解释输入值如何形成表单参数。