input type="image" 提交表单

时间：2021-03-30 16:47:30

　　提到<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

相关文章