2026-09-03 日报

今日主题

freeCodeCamp · Learn HTML · Ch3 HTML Forms and Tables

BriefIntroduction

第三模块：HTML Forms and Tables。表单负责收集输入，表格负责展示二维数据；另外带 HTML Validator / DevTools 调试习惯。

一、模块路线

类型	内容
Lecture	Forms / Tables / HTML Tools（Validator、DOM Inspector）
Workshop	Hotel Feedback Form / Final Exams Table
Lab	Survey Form / Book Catalog Table
收尾	Review + Quiz

二、核心概念（笔记）

1. 表单骨架

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">提交</button>
</form>

label 用 for 对齐控件 id（或把控件包在 label 里）
name：提交时的字段名；id：页面内钩子
button：submit / reset / button（默认在 form 里常是 submit，写清楚更稳）

2. 常见 input 类型

text、email、password、number、tel、url、date、radio、checkbox、file、hidden…

分组：fieldset + legend；单选同组共用一个 name。

3. 客户端校验（HTML 自带）

required、minlength / maxlength、min / max、pattern
type=email|url|number 自带格式约束
状态：:valid / :invalid / :required / :disabled / :focus 等（样式下章 CSS 再用）

注意：前端校验可被绕过，服务端仍要校验。

4. 表格：用来展示数据，不是用来排版布局

<table>
  <caption>期末成绩</caption>
  <thead>
    <tr><th scope="col">科目</th><th scope="col">分数</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">数学</th><td>95</td></tr>
  </tbody>
</table>

th + scope：标明行/列表头
thead / tbody / tfoot：分组，利于样式与无障碍
colspan / rowspan：合并单元格（能少用就少用）

5. 调试工具

HTML Validator：查未闭合标签、错误嵌套、过时属性
DevTools Elements：看 DOM、改属性、对照渲染结果

三、练习清单

Hotel Feedback Form
Survey Form（认证项目，也可记到下一篇）
Final Exams Table / Book Catalog Table
HTML Tables and Forms Quiz

四、今日随记

（边学边补）

Welcome to Yuyang's Blog