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);
        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="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

posted @ 2014-02-23 00:12  paulhe  阅读(6322)  评论(2)  编辑  收藏  举报
friendster counter