HTML5之Form 表单理论
2017-08-28 本文已影响0人
zh_yang
一、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- 表单的作用是搜集用户的输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。
<form name="myForm" action="" method="get"> </form>
name：表单提交时的名称
action：提交到的地址
method：提交方式，get和post（默认是get）
- input标签根据type属性不同，分以下常用标签：
button——定义可点击的按钮
checkbox——定义复选框
radio——定义单选按钮
text——定义单行输入框，可在其中输入文本
file——定义输入字段和“浏览”按钮，供文件上传
hidden——定义隐藏的输入字段
image——定义图像形式的提交按钮
password——定义密码字段，该字段中的字符被掩码
reset——定义重置按钮，用于清除表单中的所有数据
submit——定义提交按钮，把表单数据发给服务器
二、post 和 get 方式的区别？
- 表象不同，get把提交的数据url可以看到，post看不到
- 原理不同，get 是拼接 url， post 是放入http 请求体中
- 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
- get提交的数据在浏览器历史记录中，安全性不好
- 场景不同，get 重在 "要", post 重在"给"
- 在搜索引擎中检索信息时，应使用get方法，而在注册、登录、提交用户信息等场景中，应使用post方法
三、在input里，name 有什么作用？
- 规定input元素的名称，用于对提交到服务器后的表单数据进行标识
- 在客户端提供给 JavaScript，使其可以引用表单数据
- 用于单选／多选分组，相同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应用总结
- 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
- 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
- 时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
- 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
- javascript不支持全局变量（我们常说的全局变量其实是最外层作用域中的变量），但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
- 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。
七、 HTML 表单的用法
八、实现如下表单,附上预览地址。其中性别和取向是单选，爱好是多选
image.png
预览地址
