表单标签 --- 行内标签
描述：一个完整的表单标签通常由表单域、表单控件（表单元素）和提示信息三部分构成
作用：数据交互（C/S）
（1）表单域 --- <form>
<form>标签用于定义表单域，以实现用户信息的收集和传递，将范围内的表单元素提交给服务器
<form action="https://www.baidu.com" method="get"><!--get类型只能上传字符串-->（2）表单元素
表单元素分为三类：input输入表单元素、select下拉表单元素、textarea文本域元素
【1】input输入表单元素
- 重要属性作用
<1> 文本框：（text）
用户名称：<input type="text" name="username"><2> 密码框：（password）
<label for="mypass">用户密码：</label>
<input type="password" name="mypass" id="mypass"><3> 单选按钮：（radio）
用户性别：
<input type="radio" value="男" name="gender">男
<input type="radio" value="女" name="gender">女
<!-- radio：单选按钮 -->
<!-- name：判断其是否为一组 --><4> 复选框：（checkbox）
用户爱好：
<input type="checkbox" name="hobby" id="" value="LOL">LOL<!--checkbox：多选框-->
<input type="checkbox" name="hobby" id="" value="rap">rap
<input type="checkbox" name="hobby" id="" value="jump">jump
<input type="checkbox" name="hobby" id="" value="basketball">basketball<5> 提交按钮：（submit）
<input type="submit" value="注册"><6> 重置按钮：（reset）
<input type="reset" value="重置"><7> 邮箱：（email）
用户邮箱：
<input type="email" id="email" name="email"><8> 文件域：（file）
用户头像：
<input type="file" name="avatar" id="avatar">- 常用属性
| 属性值 | 描述 |
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的输入按钮 |
| password | 定义密码字段。该字段中的字符显示被星号代替 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮。提交按钮将表单数据发送到服务器 |
| text | 定义单行输入字段，在其中输入文本，默认宽度为20个字符 |
- 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<h1>用户注册</h1>
<form action="https://www.baidu.com" method="get"><!--get类型只能上传字符串-->
<!--
action属性：提交的url
method属性：表示http提交的方式，默认为get
enctype属性：上传文件，或者涉及I/O流，就需修改enctype属性
name属性：非常重要，name属性时表单中最重要的属性。服务器进行接收数据时，会通过name进行判断其是否为一组。
-->
<p>
用户名称：<input type="text" name="username">
</p>
<p>
<label for="mypass">用户密码：</label>
<input type="password" name="mypass" id="mypass">
<!--
label：标记文本内容和表单标签的关系，本身无作用
type：属性。其内password默认看不见输入
value：所有表单的值都是value，需键入的值可不写，进行选项的值用户无法填写，需手动定义。
-->
</p>
<p>
用户性别：
<input type="radio" value="男" name="gender">男
<input type="radio" value="女" name="gender">女
<!-- radio：单选按钮 -->
</p>
<p>
用户爱好：
<input type="checkbox" name="hobby" id="" value="LOL">LOL<!--checkbox：多选框-->
<input type="checkbox" name="hobby" id="" value="rap">rap
<input type="checkbox" name="hobby" id="" value="jump">jump
<input type="checkbox" name="hobby" id="" value="basketball">basketball
</p>
<p>
用户邮箱：
<input type="email" id="email" name="email">
</p>
<p>
用户博客：
<input type="url" id="url" name="url">
</p>
<p>
<input type="submit" value="注册"><!--submit：提交。reset：重置-->
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
【2】select下拉表单元素
页面中有多个选项需用户选择，并且为了保证格式规范和节约空间，用此标签控件定义下拉列表
- <select>中至少包含一对<option>
- 在<option>中定义selected时，当前项即为默认选中
用户地址：
<select name="address" id="address">
<option>陕西</option><!-- H5标准下，value值默认为中间写入的值 -->
<option value="广东" selected>广东</option><!-- selected：默认选中 -->
<option value="福建">福建</option>
<option value="广西">广西</option>
</select>
【3】textarea文本域元素
用户输入内容较多，用表单元素标签代替文本框标签。表单元素标签<textarea>是用于定义多行文本输入控件
用户建议或意见：
<textarea name="" id="" cols="30" rows="10"></textarea><!-- 中间不能回车，中间默认为输入 -->
<!-- 文本域 -->
（3）代码演示
<!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>表单标签</title>
</head>
<body>
<h1>用户注册</h1>
<form action="https://www.baidu.com" method="post" enctype="multipart/form-data"><!--上传文件需将类型改为post-->
<p>
用户名称：<input type="text" name="username" required>
<!-- required:保证其不为空，默认值 -->
用户名称：<input type="text" name="username" value="sss" readonly>
<!-- readonly:只读，无法修改value值 -->
用户名称：<input type="text" name="username" value="ss1" disabled>
<!-- disabled：不可用，与readonly功能类似 -->
用户名称：<input autofocus autocomplete="on" type="text" name="username" value="" placeholder="请输入用户名称">
<!-- placeholder：提示语 -->
<!-- autofocus：光标聚焦，将光标确定在此位置。autocomplete：自动代码补齐功能，默认开启 -->
</p>
<p>
<label for="mypass">用户密码：</label>
<input type="password" name="mypass" id="mypass">
</p>
<p>
用户性别：
<input type="radio" value="男" name="gender">男
<input type="radio" value="女" name="gender" checked>女
<!-- radio：单选按钮 -->
<!-- checked：默认选中 -->
</p>
<p>
用户爱好：
<input type="checkbox" name="hobby" id="" value="LOL" checked>LOL<!--checkbox：多选框-->
<input type="checkbox" name="hobby" id="" value="rap">rap
<input type="checkbox" name="hobby" id="" value="jump" checked>jump
<input type="checkbox" name="hobby" id="" value="basketball">basketball
</p>
<p>
用户邮箱：
<input type="email" id="email" name="email">
</p>
<p>
用户博客：
<input type="url" id="url" name="url">
</p>
<p>
用户头像：
<input type="file" name="avatar" id="avatar">
<!-- get上传只能将文件的路径以及名字上传，不能上传图像，因为服务器无本地数据。 -->
<!-- 文件上传需上传I/O流 -->
</p>
<p>
出生日期:
<input type="datetime-local" name="" id=""> <!-- 年月日。有具体时分标注 --> <br>
<input type="date" name="" id=""> <!-- 仅年月日标注 --> <br>
<input type="time" name="" id=""> <!-- 仅时分标注 -->
</p>
<p>
<input type="color" name="" id=""> <!-- 选色器 -->
用户年龄：
<input type="number" name="" id=""><!-- 强制输入数字，语义化标签 -->
</p>
<p>
<!-- 提交表单 -->
<input type="submit" value="注册"><!--submit：提交。reset：重置-->
<button>提交</button><!--该按钮作用与submit相同，早期使用-->
<input type="image" src="" name="" id=""><!--该按钮是图片按钮。src为图片链接或路径-->
<input type="button" value="按钮" name="" id=""><!--该按钮不会提交数据-->
</p>
<input type="range" max="10" value="1"><!-- 范围，拖动框。value：可显示坐标 -->
<!-- 主要用在移动端 -->
<input type="hidden"><!-- 隐藏域，提交普通用户看不见的数据 -->
<input type="week"> <!-- 筛选周，与datetime相同 -->
<input type="search" name="" id=""><!-- 语义化标签 -->
<p>
用户地址：
<select name="address" id="address">
<option>陕西</option><!-- H5标准下，value值默认为中间写入的值 -->
<option value="广东" selected>广东</option><!-- selected：默认选中 -->
<option value="福建">福建</option>
<option value="广西">广西</option>
</select>
</p>
<p>
用户建议或意见：
<textarea name="" id="" cols="30" rows="10"></textarea><!-- 中间不能回车，中间默认为输入 -->
<!-- 文本域 -->
</p>
</form>
</body>
</html>