目录
1. 表单标签的基本介绍
1.1. input系列标签
- 用途（场景）：在网页中显示收集用户信息的表单效果，如：登录页、注册页
- 标签名：input
input 标签可以通过 type 属性值的不同，展示不同效果
- type 属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合 js 添加功能 |
1.1.1 input 系列标签﹣文本框
- 用途（场景）：在网页中显示输入单行文本的表单控件
- type 属性值： text
- 常用属性：
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容的文本提交 |
1.1.2 input 系列标签 - 密码框
- 用途（场景）：在网页中显示输入密码的表单控件
- type 属性值：password
- 常用属性：
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容的文本提交 |
1.1.3 input 系列标签﹣单选框
- 用途（场景）：在网页中显示多选一的单选表单控件
- type 属性值： radio
- 常用属性：
| 属性名 | 说明 |
|---|---|
| name | 分组。有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
- 注意点：
name 属性对于单选框有分组功能
有相同 name 属性值的单选框为一组，一组中只能同时有一个被选中
1.1.4 input 系列标签﹣复选框
- 用途（场景）：在网页中显示多选多的多选表单控件
- type 属性值： radio
- 常用属性：
| 属性名 | 说明 |
|---|---|
| checked | 默认选中 |
1.1.5 input 系列标签﹣文件选择
- 用途（场景）：在网页中显示文件选择的表单控件
- type 属性值： file
- 常用属性：
| 属性名 | 说明 |
|---|---|
| multiple | 多文件选择 |
1.1.6 input 系列标签﹣按钮
- 用途（场景）：在网页中显示不同功能的按钮表单控件
- type 属性值：
| 标签名 | 属性名 | 说明 |
|---|---|---|
| input | submit | 提交按钮。点击之后提交数据给后端服务器 |
| input | reset | 重置按钮。点击之后恢复表单默认值 |
| input | button | 普通按钮。默认无功能，之后配合 js 添加功能 |
- 注意点：
如果需要实现以上按钮功能，需要配合 form 标签使用
form 使用方法：用 form 标签把表单标签一起包裹起来即可
1.2. button 按钮标签
- 用途（场景）：在网页中显示用户点击的按钮
- 标签名： button
- type 属性值（同 input 的按钮系列）：
| 标签名 | type 属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮。点击之后提交数据给后端服务器 |
| button | reset | 重置按钮。点击之后恢复表单默认值 |
| button | button | 普通按钮。默认无功能，之后配合 js 添加功能 |
- 注意点：
谷歌浏览器中 button 默认是提交按钮
button 标签是双标签，更便于包裹其他内容：文字、图片等
1.3. select 下拉菜单标签
- 用途（场景）：在网页中提供多个选择项的下拉菜单表单控件
- 标签组成：
select 标签：下拉菜单的整体
option 标签：下拉菜单的每一项
- 常见属性：selected：下拉菜单的默认选中
1.4. textarea 文本域标签
- 用途（场景）：在网页中提供可输入多行文本的表单控件
- 标签名： textarea
- 常见属性：
cols ：规定了文本域内可见宽度
rows ：规定了文本域内可见行数
- 注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用 CSS 设置
1.5. label 标签
- 用途（场景）：常用于绑定内容与表单标签的关系
- 标签名：label
- 使用方法①：
1.使用 label 标签把内容（如：文本）包裹起来
2.在表单标签上添加 id 属性
3.在 label 标签的 for 属性中设置对应的 id 属性值
- 使用方法②：
1.直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来
2.需要把 label 标签的 for 属性删除即可
