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)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容

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