表单标签 --- 行内标签
描述：一个完整的表单标签通常由表单域、表单控件（表单元素）和提示信息三部分构成
作用：数据交互（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个字符 |
【2】select下拉表单元素
页面中有多个选项需用户选择，并且为了保证格式规范和节约空间，用此标签控件定义下拉列表
用户地址：
<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>
<!-- 中间不能回车，中间默认为输入 -->
<!-- 文本域 -->练习：一个用户注册界面
效果图：
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" href="作业.css">
</head>
<body >
<div class="zc">
<div class="yhzc">
用户注册
</div>
<div style="width: 300px;margin: auto">
<div class="small">
用户名:
</div>
<div class="kuang">
<input type="text"style="width: 220px">
</div>
<div class="small">
密码:
</div>
<div class="kuang">
<input type="password" style="width: 220px">
</div>
<div class="small">
性别:
</div>
<div class="duoxuan">
<input type="radio" checked> 男 <input type="radio"> 女
</div>
<div class="small">
爱好:
</div>
<div class="duoxuan">
<input type="checkbox">写作 <input type="checkbox">听音乐 <input type="checkbox">体育
</div>
<div class="small">
省份:
</div>
<div class="xiala">
<select style="width: 100px">
<option>陕西省</option>
<option>北京市</option>
</select>
</div>
<div class="small">
自我介绍:
</div>
<div class="xiala">
<select multiple style="width: 250px">
<option> </option>
</select>
</div>
<div style="height: 70px;line-height: 70px">
<div style="width: 150px;float: left">
<input type="submit" name="提交"style="width: 70px">
</div>
<div style="width: 150px;float: left">
<input type="reset" name="重置" style="width: 70px">
</div>
</div>
</div>
</div>
</body>
</html>css代码
*{
background-color: rgb(196, 196, 202);
}
.zc{
width: 400px;
height: 460px;
border: 1px solid black;
margin: auto;
margin-top: 70px;
text-align: center;
}
.yhzc{
font-size: 32px;
line-height: 50px;
font-weight: bold;
background-color: grey;
}
.kuang{
width: 220px;
float: left;
height: 50px;
line-height: 50px;
}
.small{
width: 80px;
height: 50px;
line-height:50px;
float: left;
text-align: left;
}
.duoxuan{
width: 220px;
float: left;
height: 50px;
line-height: 50px;
text-align: left;
}
.xiala{
width: 220px;
float: left;
height: 50px;
line-height: 50px;
margin: auto;
}
