HTML标签——表单标签

一、input系列标签

1.文本框

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

type属性值：text

常用属性：
在这里插入图片描述

（拓展）value属性和name属性作用介绍

value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义。
后端接收到数据的格式是：name的属性的值 = value的属性的值
-

2.单选框

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

type属性值：radio

常用属性：
在这里插入图片描述

注意点：
• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

案例实操

 性别：<input type="radio" name="sex" /> 男
    <input type="radio" name="sex" checked /> 女

3.复选框

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

type属性值：checkbox

常用属性（同单选框）
在这里插入图片描述

案例实操：

   <input type="checkbox" checked />

4.文件选择

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

type属性值：file

常用属性：
在这里插入图片描述
案例实操

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" multiple />
  </body>
</html>

测试
在这里插入图片描述

二、select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

常见属性：
• selected：下拉菜单的默认选中

案例代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option selected>深圳</option>
    </select>
  </body>
</html>

测试效果
在这里插入图片描述
三、textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
注意点：
• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置

三、label标签

Ø 场景：常用于绑定内容与表单标签的关系
Ø 标签名：label
Ø 使用方法①：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

Ø 使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    性别：
    <input type="radio" name="sex" id="male" /> <label for="male">男</label>
    <label> <input type="radio" name="sex" />女 </label>
  </body>
</html>