一、什么是HTML表单？
在网页开发中，我们经常需要收集用户的信息，例如：
-
用户登录
-
用户注册
-
搜索内容
-
提交评论
-
上传文件
-
填写个人资料
这些功能都需要使用 HTML表单（Form）。
HTML表单的作用：
用来收集用户输入的数据，并将数据提交给服务器处理。
例如：
登录页面：
用户名：[ ]
密码： [ ]
登录这就是一个典型的表单。
二、表单域 <form>
1. form标签作用
HTML使用：
<form>
</form>创建一个表单区域。
例如：
<form>
用户名：
<input>
</form>form就是表单的容器。
里面可以放：
-
输入框 input
-
单选框 radio
-
复选框 checkbox
-
下拉菜单 select
-
文本域 textarea
-
提交按钮 button
三、form标签常用属性
1. action属性
作用：
指定表单数据提交到哪里。
例如：
<form action="login.php">
</form>表示：
用户提交数据后：
表单数据
↓
login.php处理实际开发：
<form action="/user/login">
</form>表示提交给：
/user/login接口2. method属性
作用：
规定数据提交方式。
常用两个：
-
GET
-
POST
例如：
<form method="get">
</form>或者：
<form method="post">
</form>GET提交方式
特点：
数据会显示在URL地址栏。
例如：
用户输入：
name=张三提交后：
www.xxx.com?name=张三优点：
-
简单
-
速度快
缺点：
-
不安全
-
数据长度有限
适合：
- 搜索
例如：
百度搜索：
https://www.baidu.com/s?wd=htmlPOST提交方式
特点：
数据隐藏提交。
例如：
登录：
用户名
密码一般使用POST。
优点：
-
安全性更高
-
数据量更大
适合：
-
登录
-
注册
-
上传文件
四、input输入框
1. input简介
input是最常用的表单元素。
语法：
<input>input是一个单标签：
<input />五、input的type属性
type决定输入框类型。
格式：
<input type="类型">1. text文本框
普通文本输入。
代码：
用户名：
<input type="text">效果：
用户名：[ ]应用：
-
用户名
-
昵称
-
搜索框
2. password密码框
密码输入。
代码：
密码：
<input type="password">效果：
密码：[ ****** ]输入内容会隐藏。
3. radio单选按钮
表示：
多个选项只能选择一个
例如：
性别：
<input type="radio">
男
<input type="radio">
女效果：
○ 男
○ 女但是这样有问题：
两个按钮可以同时选择。
需要使用：
name属性分组
<input type="radio" name="sex">
男
<input type="radio" name="sex">
女效果：
○ 男
○ 女只能选一个。
4. checkbox复选框
表示：
可以选择多个
例如：
兴趣：
<input type="checkbox">
篮球
<input type="checkbox">
足球
<input type="checkbox">
游戏效果：
☐ 篮球
☐ 足球
☐ 游戏5. file文件上传
用于上传文件。
代码：
<input type="file">效果：
[选择文件]应用：
-
上传头像
-
上传图片
-
上传资料
6. submit提交按钮
提交表单。
代码：
<input type="submit">效果：
[提交]可以修改文字：
<input
type="submit"
value="登录">效果：
[登录]7. reset重置按钮
清空表单内容。
代码：
<input type="reset">效果：
[重置]8. button普通按钮
普通按钮：
<input type="button" value="点击">效果：
[点击]通常配合JavaScript使用。
六、input常用属性
1. name属性
作用：
给数据设置名字。
例如：
<input type="text" name="username">提交数据：
username=张三服务器通过name获取数据。
2. value属性
设置默认值。
例如：
<input
type="text"
value="请输入用户名">显示：
[请输入用户名]3. placeholder属性
提示文字。
例如：
<input
placeholder="请输入用户名">效果：
[请输入用户名]特点：
输入内容后提示消失。
4. checked属性
默认选中。
例如：
<input
type="radio"
checked>
男打开页面：
男默认选中。
七、label标签
1. label作用
提高表单体验。
例如：
点击文字：
男也可以选中按钮。
代码：
<input
type="radio"
id="man">
<label for="man">
男
</label>执行：
点击：
男等于点击：
○八、textarea文本域
1. 作用
用于输入大量文字。
例如：
-
评论
-
留言
-
个人简介
代码：
<textarea>
</textarea>效果：
----------------
|
|
|
----------------2. 设置大小
<textarea
rows="5"
cols="30">
</textarea>rows：
高度
cols：
宽度
九、select下拉列表
1. 作用
创建下拉菜单。
例如：
选择城市：
<select>
<option>
北京
</option>
<option>
上海
</option>
<option>
广州
</option>
</select>效果：
[北京 ▼]2. 默认选择
使用：
selected例如：
<option selected>
北京
</option>打开页面默认显示北京。
十、完整表单案例
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<form>
用户名：
<input
type="text"
name="username">
<br><br>
密码：
<input
type="password"
name="password">
<br><br>
性别：
<input
type="radio"
name="sex">
男
<input
type="radio"
name="sex">
女
<br><br>
兴趣：
<input type="checkbox">
篮球
<input type="checkbox">
音乐
<input type="checkbox">
游戏
<br><br>
城市：
<select>
<option>
北京
</option>
<option>
上海
</option>
<option>
广州
</option>
</select>
<br><br>
个人介绍：
<br>
<textarea>
</textarea>
<br><br>
<input
type="submit"
value="注册">
<input
type="reset"
value="重置">
</form>
</body>
</html>十一、表单标签总结
| 标签 | 作用 |
|---|---|
| form | 定义表单区域 |
| input | 输入控件 |
| textarea | 多行文本输入 |
| select | 下拉列表 |
| option | 下拉选项 |
| label | 关联文字和控件 |
| button | 按钮 |
十二、前端开发中的表单规范
1. 表单一定要有form包裹
推荐：
<form>
<input>
</form>2. radio一定设置name
错误：
<input type="radio">
<input type="radio">正确：
<input type="radio" name="sex">
<input type="radio" name="sex">3. 输入框建议使用placeholder
提高用户体验：
<input placeholder="请输入手机号">十三、总结
HTML表单是网页和用户交互的重要方式。
核心记忆：
表单区域：
<form>
输入框：
<input>
文本域：
<textarea>
下拉：
<select>
选项：
<option>
按钮：
submit
reset
button