Form表单

form表单作用

向浏览器提交一些需要传递的数据。

常用input标签

  1. 提交类
    <button>、<input type="submit">,注意<input type="button">不会提交表单。

  2. 输入类

<input type="text">//默认单行输入
<textarea></textarea>//文本输入框,可多行输入,设置宽高```

3. 选择类:必须设置`value`

单选,`name`值必须一致,不一致无法单选

<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女


多选,`name`值必须一致。

<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习


下拉菜单,`selected `默认选择。

<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>


4. 其他

label,标签,提示作用

<label for="password">密码</label>//配合text使用,点击lalel时,光标自动选中与"for"属性一致的输入框
<input id="password" type="password" name="password" placeholder="输入密码">


reset,重置所有输入框

<input type="reset" value="Reset" /> 重置输入


file,文件上传

<input type="file" name="myfile" accept="image/png">
//只接受png格式图片上传


hidden,用户无法看见的输入框

<input type="hidden" name="csrf" value="12345623fafdffdd">
//1.暂存一些东西 2.安全方面,用于校验


## POST与GET
GET一般用于获取、查询资源信息,而POST一般用于更新资源信息。

根据HTTP规范,GET用于信息获取,而且应该是安全的和幂等的 。

这里的安全的意味着该操作用于获取信息而非修改信息。换句话说,GET请求一般不应产生副作用。就是说,它仅仅是获取资源信息,就像数据库查询一样,不会修改,增加数据,不会影响资源的状态。幂等的意味着对同一URL的多个请求应该返回同样的结果。

根据HTTP规范,POST表示可能修改变服务器上的资源的请求 。

1.提交方式区别  
- GET提交,请求的数据会附在URL之后(就是把数据放置在请求行(request line)中),以?分割URL和传输数据,多个参数用&连接;例如:login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。Url的编码格式采用的是ASCII码,而不是Unicode,这也就是说你不能在Url中包含任何非ASCII字符,所有非ASCII字符均需要编码再传输。

- POST提交:把提交的数据放置在是HTTP包的包体中。

**因此,GET提交的数据会在地址栏中显示出来,而POST提交,地址栏不会改变。**

2.传输数据大小
首先声明:HTTP协议没有对传输的数据大小进行限制,HTTP协议规范也没有对URL长度进行限制。
- GET:特定浏览器和服务器对URL长度有限制,例如IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于[操作系统](http://lib.csdn.net/base/operatingsystem)的支持。

**因此对于GET提交时,传输数据就会受到URL长度的限制。**

- POST:由于不是通过URL传值,理论上数据不受限。但实际各个WEB服务器会规定对post提交数据大小进行限制,Apache、IIS6都有各自的配置。

3.安全性
- POST的安全性要比GET的安全性高。注意:这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改,而这 里安全的含义是真正的Security的含义,比如:通过GET提交数据,用户名和密码将明文出现在URL上,因为登录页面有可能被浏览器缓存。

- 其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了,除此之外,使用GET提交数据还可能会造成Cross-site request forgery攻击。

## input name的作用
传输数据时,name的值即为键值对中的“键”值,若没有键值,服务器根本不知道你发过去的是什么。

## placeholder 
占位符,其提示作用,不会作为数据被发送到服务器。

## type=hidden
表单隐藏域是指在表单form内声明一个type类型为hidden的input标签,用来传递数据和做一些其它的功能。它的优点是提供了一种往form中存取数据的方法。 
### 作用
- 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

- 有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了。而且不会有浏览器不支持,用户禁用cookie的烦恼。
- 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上 `onclick="document.form.command.value='xx'"`然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。

参考资料:
1.[GET与POST的区别](http://blog.csdn.net/gideal_wang/article/details/4316691)
2.[表单隐藏域的应用](http://for-dream.iteye.com/blog/1570279)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 4,410评论 0 1
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 标签用于为用户创建HTML表单,并向服务器...
    zx9426阅读 3,677评论 0 1
  • 1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用? form表单的作用是: 表单的作用是...
    熊蛋子17阅读 3,555评论 1 5
  • 1、form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 标签用于创建HTML表单,表单用于向服...
    HE_Zoro阅读 4,183评论 0 0
  • 这两天翻起双十一清单,突然发现收藏已久的口红居然降价了,幅度何止优惠,堪称钜惠。还在无聊的课上昏昏欲睡的我突然间清...
    独步深蓝阅读 3,184评论 0 0