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 0 0 rgba(0, 0, 0, 0);
        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="123" /></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

原文地址:https://www.cnblogs.com/paulhe/p/3559548.html