HTML5之Form 表单理论

一、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

1. 表单的作用是搜集用户的输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。

<form name="myForm" action=""  method="get"> </form>

name：表单提交时的名称
action：提交到的地址
method：提交方式，get和post（默认是get）

2. input标签根据type属性不同，分以下常用标签：

button——定义可点击的按钮
checkbox——定义复选框
radio——定义单选按钮
text——定义单行输入框，可在其中输入文本
file——定义输入字段和“浏览”按钮，供文件上传
hidden——定义隐藏的输入字段
image——定义图像形式的提交按钮
password——定义密码字段，该字段中的字符被掩码
reset——定义重置按钮，用于清除表单中的所有数据
submit——定义提交按钮，把表单数据发给服务器

二、post 和 get 方式的区别？

1. 表象不同，get把提交的数据url可以看到，post看不到
2. 原理不同，get 是拼接 url， post 是放入http 请求体中
3. 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
4. get提交的数据在浏览器历史记录中，安全性不好
5. 场景不同，get 重在 "要", post 重在"给"
6. 在搜索引擎中检索信息时，应使用get方法，而在注册、登录、提交用户信息等场景中，应使用post方法

三、在input里，name 有什么作用？

1. 规定input元素的名称，用于对提交到服务器后的表单数据进行标识
2. 在客户端提供给 JavaScript，使其可以引用表单数据
3. 用于单选／多选分组，相同name为一组

四、radio 如何 分组?

radio 使用name属性来分组的，所有name属性相同的radio 使用时其中只有一个会被选中。如：

<label>性别：</label>
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女
<label>取向：</label>
<input type="radio" name="orientation" value="man">男
<input type="radio" name="orientation" value="woman" checked>女

五、placeholder 属性有什么作用?

placeholder 属性提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失，且不会被提交

六、type=hidden隐藏域有什么作用? 举例说明

• 作用：对用户不看见，但是可以提交，这个特点应用很多
• 常见的防范CSRF：服务端防范的办法为在用户成功登录过后向客户端返回一个随机的token，由客户端放在表单的隐藏域中，在提交表单是一并提交到服务器，由服务器验证通过后在执行相关的逻辑操作。

type=hidden应用总结

1. 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
2. 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
3. 时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4. 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
5. javascript不支持全局变量（我们常说的全局变量其实是最外层作用域中的变量），但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
6. 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

七、 HTML 表单的用法

请参考HTML之Form表单应用

八、实现如下表单,附上预览地址。其中性别和取向是单选，爱好是多选

image.png
预览地址