表单
表单（<form>）是网页收集用户输入的方式：注册、登录、搜索、留言，全靠它。表单把用户填的数据提交给服务器处理，前端负责组织输入控件，后端负责接收处理。
form 的基本结构
<form action="login.php" method="post">
<input type="text" name="username">
<button type="submit">登录</button>
</form>action 是数据提交到的地址，method 是提交方式（get 参数显示在 URL，适合搜索；post 放在请求体，适合提交数据）。每个输入控件都要有 name，服务器靠它识别字段。
input 的常见类型
| type | 作用 | 示例 |
|---|---|---|
| text | 单行文本 | 用户名、搜索词 |
| password | 密码（打点显示） | 登录密码 |
| 邮箱，自动校验格式 | 注册邮箱 | |
| number | 数字，可设 min/max | 年龄、数量 |
| checkbox | 复选框，可多选 | 同意条款 |
| radio | 单选框，同 name 互斥 | 性别、评分 |
| file | 文件上传 | 头像上传 |
| date / time | 日期 / 时间选择器 | 生日、预约时间 |
| range | 滑块 | 音量、价格区间 |
| hidden | 隐藏字段，随表单提交 | CSRF token、来源标记 |
下拉框与多行文本
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
</select>
<textarea name="message" rows="5" cols="40">默认内容</textarea><select> 是下拉框，option 是选项，selected 是默认选中；<textarea> 是多行文本，rows/cols 控制显示大小。
label 与可访问性
每个输入控件都应该配 <label>。用 for 属性关联控件的 id，点击文字就能聚焦输入框，屏幕阅读器也能正确朗读：
<label for="username">用户名</label>
<input type="text" id="username" name="username">HTML5 表单验证
不用写 JS 就能做基础校验：required 必填、pattern 正则、minlength/maxlength 长度、min/max 数值范围。填写不合规时浏览器直接阻止提交并提示。注意：前端校验只是用户体验，数据安全校验必须在后端再做一遍，前端校验随时可以被绕过。
按钮
<button> 有三种类型：submit（提交表单，默认）、reset（重置）、button（普通按钮，配合 JS）。表单里放按钮时记得显式写 type，否则默认 submit，点了就提交。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单示例</title>
</head>
<body>
<h2>注册表单</h2>
<form action="register.php" method="post">
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username" required minlength="3" maxlength="20">
</p>
<p>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="age">年龄</label>
<input type="number" id="age" name="age" min="1" max="120">
</p>
<p>
<label>性别</label>
<input type="radio" name="gender" value="male" id="m"><label for="m">男</label>
<input type="radio" name="gender" value="female" id="f"><label for="f">女</label>
</p>
<p>
<label for="city">所在城市</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
</select>
</p>
<p>
<label for="intro">个人简介</label><br>
<textarea id="intro" name="intro" rows="3" cols="40"></textarea>
</p>
<p>
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">我已阅读并同意用户协议</label>
</p>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>📚 HTML 标签速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
<h1>-<h6> | 标题，h1 最高，每页只用一个 h1 |
<p> | 段落，自动加前后间距 |
<a href=""> | 链接，href 是目标地址 |
<img src="" alt=""> | 图片，src 地址，alt 替代文字 |
<ul> / <li> | 无序列表 |
<ol> / <li> | 有序列表，数字编号 |
<dl> / <dt> / <dd> | 自定义列表：术语 + 说明 |
<table> / <tr> / <td> / <th> | 表格：行 / 单元格 / 表头 |
<form action="" method=""> | 表单，action 提交地址，method 提交方式 |
<input type=""> | 输入控件，type 有 text/password/email/number 等 |
<textarea> | 多行文本输入 |
<select> / <option> | 下拉框及选项 |
<button type="submit"> | 按钮，submit 提交表单 |
<strong> / <em> | 加粗（重要）/ 斜体（强调） |
<div> / <span> | 区块容器 / 行内容器 |
<header> <nav> <main> | 语义化：页眉 / 导航 / 主体 |
<section> <article> <aside> | 语义化：分节 / 独立内容 / 侧栏 |
<footer> | 页脚：版权、备案 |
<video> / <audio> | HTML5 视频 / 音频，加 controls 显示控制条 |
<iframe src=""> | 嵌入其他网页 |
<!-- 注释 --> | HTML 注释，不显示在页面 |
<br> / <hr> | 换行 / 水平分割线 |
<pre> | 保留空格和换行，原样显示 |
<blockquote> / <q> | 块级引用 / 行内引用 |
<figure> / <figcaption> | 图文组合及说明 |