表单的介绍
表单是在页面中可以让用户填写信息，用来收集用户信息，上传服务器，达到与用户交互的行为。
在一个页面可以出现多个form表单，但不允许在一个form表单里面出现另一个form表单
在哪里用的到表单
在网页中常用到表单的地方有登录，注册，用户信息收集，验证码等
表单的组成
表单由表单标签 ，表单域，表单按钮组成
表单标签：from
表单域：from表单中用来收集用户信息的
表单按钮：用来提交<form>表单中的所有信息到服务器
表单标签
from表单，表单标签由from表单定义，只有用from标签包裹的内容才会被提交到服务器
from表单的属性
from标签有以下属性：
action：用来设置目标服务器的URL地址
method：控制form表单的提交方式，该属性可以省略，若省略，默认的提交方式是get
target:指定服务器返回结果显示的目标窗口或目标帧
title：当鼠标在表单上的任意位置停留时，显示的文本
enctype：指定浏览器使用哪种编码方法将表单数据传送给www服务器
name：设置表单的名字
<from
name =""
method = ""
action = ""
target = ""
title = ""
enctype = ""
></from>表单域
每一项用来收集用户信息的输入框或选项，常用的表单域 有 输入框，复选框，单选框，文字域，下拉列表等
input
input标签是表单中最常用的标签之一，通过改变它的type属性来完成不同的需求
type属性
| type属性值 | 内容 |
| <input type = "text"/> | 文本模式，默认20个字符 |
| <input type = "password"/> | 密码模式，输入的内容将会被字符掩饰 |
| <input type = "submit"/> | 提交按钮，把表单的内容上传到服务器 |
| <input type = "button"/> | 普通按钮用来触发 JS函数,不具有提交功能 |
| <input type = "file"/> | 上传文件按钮， |
| <input type = "radio"/> | 单选按钮 |
| <input type = "checkbox"/> | 多选按钮 |
| <input type = "hidden"/> | 隐藏输入框 |
| <input type = "image"/> | 提交按钮，图片模式 |
| <input type = "reset"/> | 重置按钮 |
| <input type = "email"/> | Email模式，限制用户只能 输入 Email类型 |
| <input type = "url"/> | url模式，限制用户只能 输入url类型 |
| <input type = "date"/> | 日期模式，限制用户只能 输入 日期类型 |
| <input type = "time"/> | 时间模式，限制用户只能 输入 时间类型 |
| <input type = "month"/> | 月模式，限制用户只能 输入 月类型 |
| <input type = "week"/> | 周模式，限制用户只能 输入 周类型 |
| <input type = "number"/> | 数字模式，限制用户只能 输入 数字类型 |
| <input type = "tel"/> | 手机号码 |
| <input type = "search"/> | 搜索框 |
| <input type = "color"/> | 生成一个颜色选项表 |
name属性
用来定义定义控件名称
<input name = "给标签设置的名字"/>value属性
设置定义控件初始值
<input value = "控件初始值"/>checked属性
设置控件初始状态是否被选中，一定要相同的name属性达到单选的效果
<input name = "xxx" checked/>文件上传
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
1.form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。
默认地，表单数据会编码为 "application/x-www-form-urlencoded"，不能用于文件上传
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file1"/>
</from>图片按钮
name:定义控件名称
src：指定图像地址
<input type="image" src="图片路径"/>文字域
textarea用来创建一个可以输入多行文本的文本框，有cols属性和 rows属性，设置文本框的行数和列数，以字符为单位。
<textarea name="" id="" cols="30" rows="10"></textarea>下拉菜单
select用于创建下拉列表或可以多选的列表框，<option></option>用来设置列表中的项目
select属性：
name:此列表框的名字
multiple：设置是否可多选，该属性不需要赋值，如果加入该属性，在进行多项选择时，需要按住Ctrl键选择。
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表
option属性：
selected ：用来指定默认的选项
value： 用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的
<select name="" id="">
<optgroup label="山西">
<option value="1">太原</option>
<option value="2">晋中</option>
<option value="3">晋城</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">保定</option>
<option value="6">沧州</option>
</optgroup>
</select>
label标签
label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”。该标签有如下属性：
1、for：指定快捷键将作用于的表单字段元素，设置值必须与某个表单字段元素的id值相吻合。
2、accesskey：指定作用于for属性所对应的表单字段元素的快捷键，如果要使用这个快捷键，必须同时按下Alt键和这个快捷键。
<label>标签一般和radio、checkbox类型一起使用。
<fieldset>元素集
fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>表单按钮
<button>触发form表单提交按钮</button>
<input type="submit"> 触发form表单提交按钮
<input type="button"> 并不会触发form表单提交
发送数据的要求
如果想要被提交到服务器，必须满足以下两个条件，缺一不可：
1. 标签必须具有name属性值，没有name属性值的标签就无法组装键值对，它的值不会被提交。
2. 必须是input、select、textarea标签，其他标签的数据不会提交到服务器。
触发表单的方法
1. 点击了表单中的提交按钮(数据会刷新)
2. 用Ajax进行提交(异步提交，局部刷新)
