前面的页面主要让人阅读。报名页面还需要让人填写姓名、选择活动，再提交信息。这种收集输入的区域称为表单（form）。HTML 可以创建输入控件并描述提交方式，但保存报名记录还需要接收数据的服务程序。
先认识最小表单
下面的例子里有几个新元素，我们先逐个认识它们的职责，后面三节再详细操作：
<form action="/search" method="get">
<label for="keyword">想找哪本书？</label>
<input id="keyword" name="q" type="text">
<button type="submit">搜索</button>
</form>form 把一次提交涉及的控件组织起来。label 是给输入框的文字说明；它的 for 与输入框 id 一致，表示这段说明属于哪个控件。input 是输入框，type="text" 表示输入普通文字。button 是按钮，type="submit" 表示请求提交这个表单。现在先照着完整结构看，下一节会拆开 input 的属性。
数据怎样离开页面
action 指定接收地址，method 指定提交方法。示例中的 /search 是网站根目录下的处理地址，并不代表这个课程真的提供图书搜索服务。method="get" 通常把字段放入目标地址的查询部分，例如填写 Leaf 后，地址可能包含 ?q=Leaf。其中 q 来自 input 的 name，Leaf 来自用户填写的值。
name 是提交字段名，id 是文档中的元素标识。仅有 id 不会自动让字段以这个名字提交。把 name 改为 keyword，提交字段也会随之改名。
method="post" 通常把表单数据放入请求正文，更适合创建报名等改变数据的操作。POST 本身不等于加密，也不保证数据安全；正式网站需要 HTTPS，并在服务端检查数据。GET 常用于搜索这类读取操作，不应用来传送密码。
预览能做什么
本课程的 HTML 预览允许真实输入和选择，但不发送表单数据，也不会显示虚构的“报名成功”。所以按下提交按钮不代表信息被保存。Lab 中可以切换搜索与报名结构，比较 action、method、name，再输入内容。若在本机直接复制表单运行，接收地址没有服务程序时，提交可能得到找不到页面；这不是输入框写法错误。
后续 JavaScript 可以控制页面行为，服务端程序负责处理和保存请求。当前目标是理解“控件收集值—字段命名—表单指定去向”这条路线。
页面实验：表单入门
先切换对照示例，再按照观察提示修改一处 HTML，比较源码与真实页面。示例中的英文短句可以替换成自己的文字。
输入框的 id 是 keyword，提交字段名却是 q，两者职责不同。预览不发送数据。
预览保留浏览器默认的标题、段落和表单外观。示例切换会替换编辑内容；重置实验可恢复初始状态。可点击页内链接、输入文字和选择选项；此练习预览不提交数据、不运行脚本。要在本机尝试，将完整代码保存为 index.html 后用浏览器打开。
知识测验
动手编写：表单入门
新建 index.html，按照下面的要求编写完整页面；保存并用浏览器打开，边操作边检查结果。参考答案是一种实现，文字内容可以不同。
- 写一个 GET 搜索表单，action 为 /search，文本框的 name 为 topic。
- 用 label 说明输入用途，并加入 submit 按钮；说明为什么本地没有服务时不会获得搜索结果。