🧾 第 3 课 · 表格与表单

第三课：把一条 URL 拆开看，再做四个搜索框

这是第 3 课的作业。上半节课讲 URL 的结构，下半节课讲表单—— 当时最直接的想法就是「那我做几个搜索框吧」，于是把 B 站、Bing、CSDN、百度各接了一个。现在回头看，这一页里藏着一个必须订正的知识错误（见下），另外表单的无障碍细节也补齐了。

一、URL 解剖图

先随便找一条 URL 来拆：

https://space.bilibili.com:443/164899878/dynamic?spm_id_from=444.41.my-info.face.click#锚点

原始 URL：https://space.bilibili.com/164899878/dynamic?spm_id_from=444.41.my-info.face.click

协议https:// 超文本传输协议（加密版）。它规定了浏览器和服务器怎么对话，末尾必须以 :// 收尾。
域名space.bilibili.com 主机名，会被 DNS 翻译成 IP 地址。它相当于「哪一台服务器」。
端口:443 紧跟在域名后面、用冒号隔开的一串数字，形如 example.com:8080。它相当于「服务器上的哪一扇门」；不写就用默认值（https 是 443，http 是 80）。本例的 URL 里没有冒号数字，所以用的是默认端口。
路径/164899878/dynamic 从第一个斜杠开始，用 / 分层的资源位置。 /164899878 和 /dynamic 各是一段路径段，前者是这位 up 主的 UID，后者表示「动态」页面。
查询串?spm_id_from=444.41.my-info.face.click 以 ? 开头，内容是若干组 key=value，多组之间用 & 连接。这里 key 是 spm_id_from，一般用来做来源统计。
锚点#hash 以 # 开头，用来定位页面内的某个位置。 它只留在浏览器里，不会被发给服务器。本例没有锚点。

⚠️ 概念订正（重要）：原作业把 URL 里的 164899878 写成了「端口」，这是错的。164899878 出现在第一个斜杠之后，位置在路径里，所以它是一段路径段（B 站的用户 UID）。

怎么一眼分清？端口只有一个特征：紧贴在域名后面、由冒号引出，例如 https://example.com:8080/index.html 里的 8080。一旦出现了斜杠 /，后面的东西就都属于路径了。把「斜杠后的数字」当成端口，是很容易记错的坑——记错了，写接口地址时就会莫名其妙 404。

二、四个搜索窗口

下面四张卡片是这个作业的主体：每张都是一个真实可用的 <form>，提交方式统一用 method="get"，因为搜索的关键词本来就该出现在地址栏里。每个输入框都配了 <label>（用 for 和 id 绑定）和 placeholder，点标签上的字也能聚焦输入框。

说明一下这里的 action：它们指向各家搜索引擎真实的搜索页，因为「接一个真的能用的搜索框」正是这一课的练习目标——只有点下「查找」的时候才会跳出去，页面本身不依赖任何人，平时打开、离线浏览都不会产生任何外部请求。

再加一个星座选择器

百度 · 星座占卜

这个表单没有文本输入框，改用 <select> 下拉框来收集关键词， name 沿用百度要的 wd。

选择你的星座

🔧 这里顺手修了两个坑：
1）第一项补上了 value=""。原来它没写 value，浏览器就会把显示文字「请选择你的星座」当成提交值发给百度——结果是拿一句中文提示去搜，搜出来一堆莫名其妙的页面。写成空字符串，它就只是「还没选」的占位项。
2）顺手加了 required，没选星座时浏览器会直接拦住提交并提示，而不是发一个空关键词出去。
3）另外订正一个错别字：「摩蝎座」→「摩羯座」（jié，不是 xiē）。

小结

这一页其实就把「URL 是什么」和「表单怎么把数据放进 URL」串起来了：表单提交后，浏览器会把 name=value 拼成查询串接到 action 后面—— 这正是第一张解剖图里那个 ?key=value 的来历。