Form表单基础
1. form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- 表单的作用是收集用户的输入信息，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互;
- input标签使用type属性规定input元素的类型，常见有以下类型：
| type | 描述 |
|---|---|
| text | 默认。定义单行输入字段，用户可在其中输入文本 |
| password | 定义密码字段。字段中的字符会被遮蔽 |
| checkbox | 定义复选框 |
| radio | 定义单选按钮 |
| file | 定义输入字段和 "浏览..." 按钮，供文件上传 |
| submit | 定义提交按钮。提交表单向服务器发送数据。 |
| reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值 |
| button | 义可点击的按钮（大多与 JavaScript 使用来启动脚本） |
| hidden | 定义隐藏输入字段 |
其它类型的input标签可以参考w3school
2. post 和 get 方式的区别？
- 对数据长度的限制不同
- GET 方法向 URL 添加数据，URL 的最大长度是 2048 个字符；
- POST 方法传输的数据理论上没有长度限制；
- 对数据类型的限制不同
- GET 方法的URL中只允许出现ASCII字符，对非ASCII字符会先编码成ASCII字符再发送请求；
- POST 方法的数据在body中，对数据类型没有限制，允许二进制数据传输；
- POST比GET更安全
- GET 方法的查询字符串直接暴露在URL中，在浏览器地址栏和浏览器历史中都可以看到，不利于敏感数据的安全传输；
- POST 方法的请求数据都包含在body中，不会直接暴露出来，相对于GET，安全性更好；
- 语义不同
- GET的语义是请求获取指定的资源；
- POST的语义是根据请求对指定的资源做出处理，具体的处理方式视资源类型而不同。
3. 在input里，name 有什么作用？
name 属性规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据；只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
4. radio 如何分组?
具有相同 name 属性的 radio 为同一组，例如：
<form>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
</form>
5. placeholder 属性有什么作用?
提供描述输入字段的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失
note：刚刚试了一下，IE中会在字段获得焦点时消失，但是在chrome里面输入字符后才会消失
6. type=hidden隐藏域有什么作用? 举例说明
-
帮助表单收集和发送信息，便于后端处理数据。用户点击提交数据的时候，隐藏域的信息也被一起发送到了后端;
-
后端接收前端传来的数据，需要确认前端的身份，那么就可以加一个隐藏域，后端通过校验隐藏域信息来确认前端身份;
-
有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的；
-
有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来;
-
JavaScript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了;
-
还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。
7. HTML 表单的基本用法
HTML表单用
<form>标签创建，用于向服务器传输用户输入的数据,表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等，表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单元素input的常用类型已经在上文介绍过，下面再介绍form标签不同属性的作用
-
action: 该属性规定当提交表单时，向何处发送表单数据
可能的值：- 绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
- 相对 URL - 指向站点内的文件（比如 src="example.htm"）
- method: 该属性规定如何发送表单数据,最常用的取值是”GET“和”POST“；
- target: 该属性规定在何处打开 action URL，取值有_blank（在新窗口中打开）、_self（在相同的框架中打开，默认值）、_parent（在父框架中打开）、_top（在整个窗口中打开）和framename（在指定的框架中打开）；
- name: 该属性规定表单的名称，并且提供了一种在脚本中引用表单的方法；
- enctype: 该属性规定在发送到服务器之前应该如何对表单数据进行编码，默认值为 "application/x-www-form-urlencoded"，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）；“multipart/form-data”：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
下面附上表单代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>task5-form</title>
</head>
<body>
<div class="userinfo">
<form action="/userinfo" name="userinfo" method="POST">
<div class="username">
<label for="username">姓名：</label>
<input type="text" id="username" name="username" placeholder="用户名">
</div>
<div class="password">
<label for="password">密码：</label>
<input type="password" id="password" name="password" value="123456">
</div>
<div class="sex">
<label>性别：</label>
<input type="radio" name="sex" value="0" checked>男
<input type="radio" name="sex" value="1">女
</div>
<div class="orientation">
<label>取向：</label>
<input type="radio" name="orientation" value="0">男
<input type="radio" name="orientation" value="1" checked>女
</div>
<div class="hobby">
<label>爱好：</label>
<input type="checkbox" name="hobby" value="0">dota
<input type="checkbox" name="hobby" value="1" checked>旅游
<input type="checkbox" name="hobby" value="2" checked>宠物
</div>
<div class="comment">
<label for="comment">评论：</label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="ddd"></textarea>
</div>
<div class="mycar">
<label for="mycar">我的car：</label>
<select name="mycar" id="mycar">
<option value="0">萨博</option>
<option value="1">法拉利</option>
<option value="2">保时捷</option>
</select>
<input type="submit" value="提交">
</div>
</form>
</div>
</body>
</html>
效果图如下：
效果图.png
