HTML基础表单标签

三、表单标签

1.input系列标签

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input——input标签可以通过type属性值的不同，展示不同效果

type属性值：

input——text——文本框，用于输入单行文本

input——password——密码框，用于输入密码

input——radio——单选框，用于多选一

input——checkbox——多选框，用于多选多

input——file——文件选择，用于之后上传文件

input——submit——提交按钮，用于提交

input——reset——重置按钮，用于重置

input——button——普通按钮，默认无功能，之后配合js添加功能

--------------------

1.2 input系列标签—文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

placeholder——占位符：提示用户输入内容的文本

1.3 input系列标签—单选框

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

name——分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中

checked——默认选中

注意点：

1.name属性对于单选框有分组功能               

2.有相同name属性值的单选框为一组，一组中只能同时有一个被选中

1.4 input系列标签——文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

multiple——多文件选择

1.5 input系列标签——按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

input——submit——提交按钮。点击之后提交数据给后端服务器

input——reset——重置按钮。点击之后恢复表单默认值

input——button——普通按钮。默认无功能，之后配合js添加功能

注意点：

1.如果需要实现以上按钮功能，需要配合form标签使用

(<form action=""></form>——action为提交地址；改按钮的属性：value=“属性（提示文字）”）

2.form使用方法：用form标签把表单标签一起包裹起来即可

2.button按钮标签

2.1 button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值（同input的按钮系列）：

button——submit——提交按钮。点击之后提交数据给后端服务器

button——reset——重置按钮。点击之后恢复表单默认值

button——button——普通按钮。默认无功能，之后配合js添加功能

3.select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

常见属性：selected：下拉菜单的默认选中（<option selected></option>）

4.textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注意：

1.右下角可以拖拽改变大小（可以通过CSS来禁用）

2.实际开发时针对于样式效果推荐用CSS设置

5.label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法一：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法二：（更简单）

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

【点“男”或“女”字都能选中】