1. 表单是什么
表单是搜集用户数据信息的各种表单元素的集合区域
2. 表单的作用
用于收取用户数据并向后台发送，前后交互的方式之一
3. 表单的应用
表单常应用于 登录注册，搜索，文件上传等
4. 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<!--action 参数提交的后台-->
<!--method 参数 提交数据的方法-->
<!--enctype 参数 参数必须是mulitpart/form-data的时候，数据才能够上传-->
<form action="" method="post" enctype="multipart/form-data">
<!--form表单一般是要搭配其他标签来使用的 -->
<!--input 标签-->
<!--text input标签的属性 类型是文本类型，用来给后台传数据的-->
<!--name input标签的属性 因为我们给后台上传数据的都是通过键值对的方式来上传的，用户写的数据是值，那么键就是name赋值的名字-->
<p>
<label for="usr">用户名:</label><input type="text" name="usr" id="usr" placeholder="请输入用户名">
</p>
<!--password 类型用加密的方式-->
<p><label for="psw">密 码:</label><input type="password" name="psw" id="psw" placeholder="请输入密码"></p>
<p>
<!--单选框-->
性 别:
<!--radio 单选模式 这种单选模式一定要保证这几个选项的name是要相同的-->
<!--value 对于单选和多选，都需要给定选择的值，因为上传上去的值一定是要让后台知道的-->
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="secret">保密
</p>
<p>
<!--多选框-->
爱 好：
<!--checkbox 多选模式 -->
<input type="checkbox" name="hobby" value="singing">唱歌
<input type="checkbox" name="hobby" value="dancing">跳舞
<input type="checkbox" name="hobby" value="plant">画画
</p>
<p>
<!--上传文件表单-->
上传文件：<input type="file">
<!--只要上传数据，一定要在form标签中加上这个属性enctype="multipart/form-data"-->
</p>
<p>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置标签-->
<input type="reset" value="重置">
</p>
<p>
<!--label点击别的地方也能跳到框中然后输入-->
<label for="target"></label>
用户名:<input type="text" name="usr" id="target">
</p>
<p>
<!--下拉框-->
地 址：
<!--select 下拉框标签-->
<select name="addr" id="">
<!--select是有级别之分的，比如某某省某某市的-->
<optgroup label="湖南省">
<option value="yy">岳阳</option>
<!--selected 用来设置默认的城市-->
<option value="cs" selected="selected">长沙</option>
</optgroup>
<optgroup label="湖北省">
<option value="hg">黄冈</option>
<option value="wh">武汉</option>
</optgroup>
</select>
</p>
<p>
<!--个人简介：-->
<!--<!–文本域–>-->
<!--<!–rows="20" cols="40" 用来设置框的大小的–>-->
<!--<textarear name="profile" rows="20" cols="40"></textarear>-->
</p>
<p>
<!--fieldest是用来在个人简介中加入一个框的-->
<fieldset>
<legend>个人简介：</legend>
<textarear name="profile" rows="20" cols="40"></textarear>
</fieldset>
</p>
</form>
</body>
</html>
注意：
1. name属性：表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
2. value属性:表单提交项的值
3. input标签中不同type，value值的不同
type="button"/"reset"/"submit"--定义按钮上显示文本
type="text"/"password"/"hidden"--定义输入字段初始值
type="checkbox"/"radio"/"image"--定义与输入相关