HTML表单标签的认识
input系列标签、button按钮标签、select下拉菜单标签、textarea文本域标签、label标签
表单标签
目标：能够使用 表单相关标签和属性，实现网页中表单类网页结构搭建
学习路径：
1.input系列标签
2.button按钮标签
3.select下拉菜单标签
4.textarea文本域标签
5.label标签
1.input系列标签
input系列标签的基本介绍
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
input标签可以通过type属性值的不同，展示不同效果
type属性值
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
input系列标签-文本框
场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性
| 属性名 | 说明 |
| placeholder | 占位符。提示用户输入内容的文本 |
文本框：<input type="text" placeholder="请输入账号">
密码框：<input type="password" placeholder="请输入密码">
input系列标签-单选框
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性
| 属性名 | 说明 |
| name | 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
选择性别（单选框）：<input type="radio" name="xb" checked>保密 <input type="radio" name="xb">男 <input type="radio" name="xb">女
多选框：<input type="checkbox" checked>我同意注册条款
input系列标签-文件选择
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性
| 属性名 | 说明 |
| multiple | 多文件选择 |
文件选择：<input type="file" multiple>
input系列标签-按钮
场景：在网页中显示不同功能的按钮表单控件
type属性值
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意点：
如果需要实现以上按钮功能需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
<input type="submit" > <input type="submit" value="免费注册"> <input type="reset"> <input type="button" value="普通按钮">
2.button按钮标签
场景：在网页中显示用户点击的按钮
标签名：button
type属性（同input的按钮系列）
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意点：
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等
<button>一个按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> <button type="button">普通按钮，无功能</button>
3.select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
<select> <option >北京</option> <option >上海</option> <option >广州</option> <option selected>天水</option> </select>
4.textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
右下角可以推拽改变大小
实际开发时针对样式效果推荐用css设置
<textarea cols="30" rows="10"></textarea>
5. label标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法①：
1.使用label标签把呢容（如：文本）包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法②
1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
性别：<input type="radio" name="xb" id="nan"><label for="nan">男</label> <label><input type="radio" name="xb">女</label>
