正在加载...
HTML 表单
响应式适配了宽度。表单开启新章：访问者输入并提交。容器是 form。
为什么表单重要
静态页展示；表单收集。没有 form，浏览器不知道哪些控件属于同一次提交。
直接回答
1) 带 action/method 的 form。2) 带 name 的控件。3) label for = id。4) 提交按钮。先写对标记。
📊 Form parts at a glance
| Part | Job | Beginner tip |
|---|---|---|
| form | Groups controls for one submission | Keep related fields inside one form |
| action | URL or path that receives the data | Practice paths are fine while learning |
| method | How the browser sends the payload | get puts data in the URL; post uses the request body |
| input (+ others) | Collects a value from the user | Always set name for submitted keys |
| label | Names the field for people and assistive tech | for must match the control id |
| submit | Triggers sending the form | Prefer type="submit" on buttons |
最小表单骨架
从容器和两个属性开始。练习路径足够学习。
<form action="/subscribe" method="post">
<!-- fields go here -->
</form>
读骨架
- form 是提交边界
- action 接收路径
- post = 请求体
- get = URL
- 无真实服务器时 404 在学习中可接受
带标签字段 + 提交
至少一个字段和发送方式。for 匹配 id；设置 name。
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>
读订阅示例
- for 与 id 相连
- name 是载荷键
- type=email 提示浏览器
- button type=submit 提交
GET 与 POST
get 用于可收藏搜索；post 用于数据不应留在地址栏。
练习——小型订阅表单
- post 的 form
- 带标签的 email input + name
- button type=submit
- 确认渲染
- 暂时把 input 移出 form
易错点
- input 在 form 外
- 缺少 name
- 按钮无 type=submit
- label/for 不匹配
- 混淆 action 与 method
小结
- form 为一次发送包裹控件
- action + method 描述目标与方式
- label 与 name 让字段可提交
- 下一课：表单属性
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
5
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部