1. 表单基本结构
<form> 标签用于创建表单，action 指定提交地址，method 指定提交方式（GET/POST）。
演示效果：
1<form action="/submit" method="post">
2 <label>用户名：<input type="text" name="username"></label><br>
3 <label>密码：<input type="password" name="password"></label><br>
4 <input type="submit" value="提交">
5</form>
2. 输入框类型
<input> 标签的 type 属性定义输入类型：
text 文本 | password 密码 | email 邮箱 | number 数字 | tel 电话 | url 网址 | date 日期
演示效果：
1<form>
2 <label>文本：<input type="text" name="text"></label><br>
3 <label>密码：<input type="password" name="password"></label><br>
4 <label>邮箱：<input type="email" name="email"></label><br>
5 <label>数字：<input type="number" name="number"></label><br>
6 <label>电话：<input type="tel" name="tel"></label><br>
7 <label>网址：<input type="url" name="url"></label><br>
8 <label>日期：<input type="date" name="date"></label><br>
9</form>
3. 单选和复选
radio 单选按钮：同一组必须设置相同的 name 属性。
checkbox 复选框：可多选，checked 属性设置默认选中。
演示效果：
1<form>
2 <p>性别：</p>
3 <label><input type="radio" name="gender" value="male"> 男</label>
4 <label><input type="radio" name="gender" value="female"> 女</label>
5 <label><input type="radio" name="gender" value="other"> 其他</label>
6
7 <p>爱好：</p>
8 <label><input type="checkbox" name="hobby" value="reading" checked> 阅读</label>
9 <label><input type="checkbox" name="hobby" value="gaming"> 游戏</label>
10 <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
11</form>
4. 下拉选择框
<select> 定义下拉框，<option> 定义选项。
selected 默认选中，disabled 禁用选项，<optgroup> 选项分组。
演示效果：
1<form>
2 <label>城市：</label>
3 <select name="city">
4 <option value="">请选择</option>
5 <option value="beijing" selected>北京</option>
6 <option value="shanghai">上海</option>
7 <option value="guangzhou">广州</option>
8 <option value="shenzhen">深圳</option>
9 </select>
10
11 <br><br>
12
13 <label>分组下拉：</label>
14 <select name="grouped">
15 <optgroup label="华北">
16 <option value="beijing">北京</option>
17 <option value="tianjin">天津</option>
18 </optgroup>
19 <optgroup label="华东">
20 <option value="shanghai">上海</option>
21 <option value="hangzhou">杭州</option>
22 </optgroup>
23 </select>
24</form>
5. 多行文本 textarea
<textarea> 标签用于多行文本输入。
rows 设置行数，cols 设置列数，resize 控制是否可调整大小。
演示效果：
1<form>
2 <label>留言：</label><br>
3 <textarea name="message" rows="5" cols="30" placeholder="请输入留言内容..."></textarea>
4</form>
6. 输入建议 datalist
<datalist> 标签为 <input> 提供输入建议列表。
用户输入时会显示匹配的选项，但也可以输入自定义内容。
演示效果：
1<form>
2 <label>浏览器：</label>
3 <input type="text" name="browser" list="browsers">
4 <datalist id="browsers">
5 <option value="Chrome">
6 <option value="Firefox">
7 <option value="Safari">
8 <option value="Edge">
9 <option value="Opera">
10 </datalist>
11</form>
7. 表单分组 fieldset
<fieldset> 标签用于将表单元素分组，<legend> 标签定义分组标题。
演示效果：
1<form>
2 <fieldset>
3 <legend>个人信息</legend>
4 <label>姓名：<input type="text" name="name"></label><br>
5 <label>邮箱：<input type="email" name="email"></label>
6 </fieldset>
7
8 <fieldset>
9 <legend>账户设置</legend>
10 <label>用户名：<input type="text" name="username"></label><br>
11 <label>密码：<input type="password" name="password"></label>
12 </fieldset>
13</form>
8. 表单验证
HTML5 提供了内置的表单验证功能：
required 必填 | disabled 禁用 | readonly 只读 | pattern 正则验证 | min/max 范围
演示效果：
1<form>
2 <label>必填：<input type="text" name="required" required></label><br>
3 <label>禁用：<input type="text" name="disabled" disabled></label><br>
4 <label>只读：<input type="text" name="readonly" value="不可修改" readonly></label><br>
5 <label>正则（6位数字）：<input type="text" name="pattern" pattern="\d{6}"></label><br>
6 <label>范围（1-100）：<input type="number" name="range" min="1" max="100"></label><br>
7 <input type="submit" value="提交">
8</form>
验证属性说明：
| 属性 | 说明 |
|---|---|
| required | 必填字段 |
| disabled | 禁用（不可交互，不提交） |
| readonly | 只读（不可修改，会提交） |
| pattern | 正则表达式验证 |
| min/max | 数字范围 |
| minlength/maxlength | 文本长度范围 |
| placeholder | 输入提示 |