input type="image" 提交表单
提到<input type="image" />,说起来有些惭愧。之前的工作基本每周都要制作两到三个注册用户的网页。其中就用它提交表单。
那个时候我想当然的以为这是用js操作,才把表单数据提交的。直到前几天同事问到了这个问题,我还以为用js提交表单,为此还打了一个
赌,虽然赌注很小,不用想结果我输了。今天对它做个总结:
code:
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
.sbuImage{
background:url("http://www.58guakao.com/images/user/reg/reg-btn.gif") repeat scroll rgba(, , , );
width:207px;
height:34px;
}
</style>
<body>
<form method="POST" action="http://passport.cnblogs.com/login.aspx?test=testval">
<input type="text" name="uname" value="张三" /></br></br>
<input type="pwd" name="pwd" value="" /></br></br>
<input class="sbuImage" type="image" value="type是image的按钮提交表单" /></br></br>
<input class="sbuImage" type="submit" value="type是submit的按钮提交表单" />
</form>
</body>
</html>
一.input type="image" 与 type="submit"的区别(下文简写image和submit)
1.这两者都可以响应请求;
2.不同之处是当 method="GET" 时,当鼠标点击image时,除了能正常请求URL,还能把鼠标点击图片时的焦点坐标(注意:
这个焦点坐标是相对于点击的图片说的)作为参数出现在url里,以上面的例子来说,url是:
http://passport.cnblogs.com/login.aspx?uname=%D5%C5%C8%FD&pwd=123&x=168&y=21
url少了一个参数test=testval,下面会提到。
二.简单说一下Form表单里POST请求与GET请求的区别
请求区别:
1.最显然的区别是GET是从服务器获取数据,服务器需要的数据会出现在url里;
2.POST是将数据传给服务器;
参数传递不同:
1.GET请求时,action的url的参数会丢掉,就像上面的url少了test=testval,它只会把form表单里的参数传在url里;
2.POST请求时,action的url的参数不会丢掉,同时也会把form表单里的参数传到服务器;
安全性:
1.GET请求时,表单里的数据都会显示在url里,相对POST请求不安全;
2.POST请求时,表单里的数据不会那样明显显示在客户端;
数据量:
GET请求传递数据量要小于POST请求很多。具体待测。
下面这个链接要详细,可参考:
http://blog.sina.com.cn/s/blog_7ffb8dd501013kdm.html
input type="image" 提交表单的更多相关文章
- 阻止form元素内的input标签回车提交表单
<form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { ...
- type="image"提交表单
<input type="image" style="cursor:pointer; ">
- js创建form添加input项目并提交表单
var generateHideElement = function (name, value) { var tempInput = document.createElement("inpu ...
- form表单action提交表单,页面不跳转且表单数据含文件的处理方法
在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...
- php 提交表单
滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园 首页 博问 闪存 联系 订阅 管理 随笔-58 评论-2017 文章-5 trackba ...
- i利用图片按钮 和 input type="image" 为背景提交表单
<img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- 4 django系列之HTML通过form标签来同时提交表单内容与上传文件
preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...
- 总结:JSP几种提交表单方法
问题描述: 最近进了一家“老公司”工作,说他老不是说他成立的早,是因为他的编程框架太l.......low了.EJB的规范模式,使用是IBM经过Eclipse二次开发出来的RAD(Rational A ...
随机推荐
- 167. Two Sum II - Input array is sorted两数之和
1. 原始题目 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明 ...
- yum源安装Percona
yum源安装更为简单,方便.话不多说,开始吧. 1.下载yum源 yum -y install https://www.percona.com/redir/downloads/percona-rele ...
- 【bzoj1030】: [JSOI2007]文本生成器 字符串-AC自动机-DP
[bzoj1030]: [JSOI2007]文本生成器 首先把匹配任意一个的个数的问题转化为总个数-没有一个匹配的个数 先构造AC自动机,然后枚举每一位的字母以及在自动机上的位置 f[i][j]为第i ...
- 「BZOJ1010」[HNOI2008] 玩具装箱toy(斜率优化)
P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为 1⋯N1\cdots N1⋯N ...
- stl仿函数和适配器
所谓的适配器就是底层利用仿函数,然后修改仿函数的接口,达到自己的目的: 例如:template<class operation> class binder1st的适配器,其本质是一个类,它 ...
- HTTP协议和WebSocket协议(二)
WebSocket WebSocket协议还很年轻,RFC文档相比HTTP的发布时间也很短,它的诞生是为了创建一种「双向通信」的协议,来作为HTTP协议的一个替代者.那么首先看一下它和HTTP(或者H ...
- Js 处理 错误图片...(不用jquery)
document.addEventListener("error", function (e) { var elem = e.target; if (elem.tagName.to ...
- Codeforces-B-Divisors of Two Integers(思维技巧)
Recently you have received two positive integer numbers xx and yy. You forgot them, but you remember ...
- 华东交通大学2015年ACM“双基”程序设计竞赛1003
Problem C Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Sub ...
- 剧本--ansible
剧本不喜欢, 1.1 编写剧本规范:(PYyaml语法格式文件) 剧本中有层级划分 每个层级都要用两个空格进行区分 第一级标题 第二级标题 第三级标题 强调注意:一定使用ansible软件配置剧本时, ...