表单在网页中主要负责数据采集功能，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里，用<form>标签包裹所有的输入框。
form标签
- action属性：当前表单的提交地址
- method属性：发送数据的http方法，有get和post两种
- target属性：在何处打开 action URL
- _blank 在新窗口/选项卡中打开
- _self 在同一框架中打开（默认）
- _parent 在父框架中打开；
- _top 在整个窗口中打开；
- framename 在指定的 iframe 中打开。
- enctype属性：规定在发送到服务器之前应该如何对表单数据进行
编码
- application/x-www-form-urlencoded：表单数据被编码为名称/值对。这是默认的编码方式（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。使用get方式提交时，把表单数据以键值对append到url后，用 '?' 分割url和参数。使用post方式提交时，把表单数据以键值对放在请求体中传输。
- multipart/form-data：表单数据被编码为一条消息，页上的每个<input>对应消息中的一个部分，用boundary=---------------------------36243265420146"分割各个部分（boundary值由浏览器生成）。它不会对字符进行编码，一般用于传输二进制文件（图片、视频等）
- text/plain：表单数据中的空格转换为 "+" 加号，但不对特殊字符编码。
两种method的区别
- 数据传送时：Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是数据存放在http协议的消息体中以实体方式传输。
- 传送的数据量：受url长度的限制，get方式传输的数据量是有限的，而post方式是没有限制的。
- 安全性： get方式直接把数据显示在url中，浏览器有缓存，可记录用户信息，因此安全性低；而post方式没有这样的问题。
- 用户刷新时：post方式会弹出提示框，问用户是否重新提交，而get方式不会有提示。
常用控件
- 标签
<label for="user">姓名：</label>
for属性的值是其他输入控件的id，设置for属性可以在点击label时，使光标定位于该输入控件。
- 单行文本框
<input type="text" name="名称" placeholder="默认值" />
Paste_Image.png
- 密码框
<input type="password" name="名称" />
Paste_Image.png
- 多选框
<input id="data" value="data" type="checkbox" name="hobby"></input><label for="data">data</label>
<input id="travel" value="travel" type="checkbox" name="hobby"></input><label for="travel">旅游</label>
<input id="animals" value="animals" type="checkbox" name="hobby"></input><label for="animals">宠物</label>
Paste_Image.png
- 单选框
<input value="male" id="sex-man" type="radio" name="sex" checked></input><label for="sex-man">男</label>
<input value="female" id="sex-woman" type="radio" name="sex"></input><label for="sex-woman">女</label>
Paste_Image.png
- 下拉菜单
<select name="myCar">
<option name="benz" value="benz">奔驰</option>
<option name="BMW" value="BMW" selected>宝马</option>
<option name="Audi" value="Audi">奥迪</option>
</select>
Paste_Image.png
- 多行文本
<textarea name="名称" placeholder="默认值" rows="行数"></textarea>
Paste_Image.png
- 按钮
<input type="button" name="名称" value="按钮" />
<input type="submit" name="名称">
<input type="reset" name="名称">
Paste_Image.png
- 文件选择
<input type="file" name="名称" />
Paste_Image.png
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
- Radio和Checkbox通过name进行分组，name相同时，表示在同一组
