一、什么是表单？¶
HTML 表单用于收集用户输入的数据，并提交给服务器处理。
表单常见用途：
- 登录
- 注册
- 搜索
- 问卷调查
- 文件上传
二、表单的基本结构：form 标签¶
表单的核心标签是：
<form>
表单控件
</form>
基本语法
<form action="submit.php" method="post">
<input type="text">
</form>
form 常用属性
| 属性 | 作用 |
|---|---|
| action | 提交数据的地址（服务器接口） |
| method | 提交方式：GET 或 POST |
| name | 表单名称 |
| target | 提交后打开方式 |
GET 和 POST 区别
| 方法 | 特点 |
|---|---|
| GET | 数据显示在 URL 中，适合搜索 |
| POST | 数据隐藏提交，适合密码、注册 |
三、input 输入框标签（最重要）¶
input 是表单中最常用的控件。
1、文本输入框 text
<input type="text" placeholder="请输入用户名">
特点：
- 输入普通文字
2、密码输入框 password
<input type="password" placeholder="请输入密码">
特点：
- 输入内容会自动隐藏
3、单选按钮 radio
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
说明：
- name 必须相同，才能实现二选一
4、复选框 checkbox
<input type="checkbox"> 足球
<input type="checkbox"> 篮球
<input type="checkbox"> 羽毛球
特点：
- 可以多选
5、提交按钮 submit
<input type="submit" value="提交表单">
点击后会提交表单数据。
6、普通按钮 button
<input type="button" value="普通按钮">
不会自动提交，常配合 JavaScript 使用。
7、重置按钮 reset
<input type="reset" value="重置">
作用：
- 清空表单输入内容
四、label 标签（提高用户体验）¶
label 可以绑定输入框，点击文字也能选中输入框。
<label for="username">用户名：</label>
<input type="text" id="username">
五、textarea 多行文本输入¶
适用于：
- 留言
- 评论
- 自我介绍
<textarea rows="4" cols="30">
请输入内容...
</textarea>
六、select 下拉列表¶
适用于：
- 选择城市
- 选择学历
- 选择分类
示例
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
七、HTML5 新增表单类型¶
HTML5 提供了更多方便的输入类型：
1、邮箱输入 email
<input type="email" placeholder="请输入邮箱">
自动验证格式。
2、数字输入 number
<input type="number" min="1" max="100">
限制范围输入。
3、日期选择 date
<input type="date">
浏览器会弹出日期选择器。
4、电话输入 tel
<input type="tel" placeholder="请输入手机号">
移动端会弹出数字键盘。
5、文件上传 file
<input type="file">
用于上传图片或文档。
八、表单分组：fieldset 和 legend¶
用于把表单内容分组显示。
<fieldset>
<legend>用户注册</legend>
用户名：<input type="text"><br>
密码：<input type="password">
</fieldset>
九、示例说明¶
1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为7.HTML表单标签.html
<!DOCTYPE html>
<html>
<!-- 表单 -->
<!-- from xxx -->
<form action="/submit" method="POST" autocomplete="on">
用户名: <input type="text" id="username" name="username" value="zq" />
密码: <input type="password" id="password" name="password"/>
<input type="submit" value="提交内容"/>
性别：
<label><input type="radio" name="sex" value="1"/>男</label>
<label><input type="radio" name="sex" value="0"/>女</label>
爱好：
<label><input type="checkbox" name="hobby" value="basketball"/>篮球</label>
<label><input type="checkbox" name="hobby" value="football"/>足球</label>
评论区：
<textarea name="comment" rows="4" cols="50" placeholder="请输入评论..."></textarea>
</form>
</html>
2、双击【7.HTML表单标签.html】
十、表单标签总结¶
| 标签 | 功能 |
|---|---|
| form | 表单容器 |
| input | 输入控件（文本、密码、按钮等） |
| label | 输入框说明文字 |
| textarea | 多行文本 |
| select + option | 下拉菜单 |
| fieldset + legend | 表单分组 |
| submit/reset/button | 表单按钮 |