html 标签: image也能提交form！！！

最新推荐文章于 2024-04-19 09:04:52 发布

转载最新推荐文章于 2024-04-19 09:04:52 发布 · 540 阅读

web前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个有趣的现象：HTML中的image类型的input元素也可以用于提交表单，并且在不同的浏览器上（如IE8和Firefox 33.1）表现不一。文章通过实践案例展示了如何避免因image标签引起的多次提交问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 标签: image也能提交form！！！

image也能提交form

先前经常使用“<input type="submit" value="input_submit"/>” 来提交form

今天在项目中进行开发的过程中有这么一个功能：

点击“XXX”按钮，进行form表单的提交，但是这个提交按钮是一个type="image" 的input；

找了半天也没看到这个图片元素绑定的js提交表单的相关信息。

后来向度娘问了下，原来：【image也能提交form！！！】

实践（IE8、firefox 33.1）

以下是我做的几个实验（IE8、firefox 33.1下的执行结果不同）。

这里要重点注意：如果image标签用不好，会出现2次提交的问题

[html]view plaincopy 
   
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <title>【注意: image也能提交form！！！ IE8、firefox 33.1下版本调试】</title>  
 <script type="text/javascript">  
 function formSubmit(){  
     alert("It is not a Joke! It is true~~");  
     document.jokeForm.action = "notAJoke.do?method=justATest";  
     document.jokeForm.submit();  
     return true;  
 }  
 </script>  
 </head>  
 <body>  
     <form name="jokeForm" method="post" action="aJoke.do">  
         <input name="user_name" value="" /><br />  
         <input name="user_pass" value="" /><br />  
           
         <!-- 以下写法，IE8、firefox 33.1 均只提交【1】次：/aJoke.do -->  
         <!-- <input type="image" src="abc.gif"/> -->  
           
         <!-- 以下写法，<span style="background-color: rgb(255, 102, 102);">IE提交【2】次：/notAJoke.do ，firefox 33.1 提交【1】次</span> -->  
         <!-- <input type="image" src="http://avatar.youkuaiyun.com/A/D/0/3_jackpk.jpg" onclick="formSubmit()"/> -->  
           
         <!-- 以下写法，<span style="background-color: rgb(255, 153, 102);">IE提交【2】次：/notAJoke.do ，firefox 33.1 提交【1】次</span> -->  
         <!-- <input type="image" src="http://avatar.youkuaiyun.com/A/D/0/3_jackpk.jpg" onclick="formSubmit();return true;"/> -->  
           
         <!-- 以下写法，<span style="background-color: rgb(255, 255, 102);">IE8、firefox 33.1 均只提交【1】次：</span>/aJoke.do -->  
         <!-- <input type="image" src="http://avatar.youkuaiyun.com/A/D/0/3_jackpk.jpg" onclick="<span style="background-color: rgb(255, 255, 102);">return true;</span>"/> -->  
           
         <!-- 以下写法，I<span style="background-color: rgb(255, 255, 102);">E8、firefox 33.1 均【无提交】 </span>-->  
         <!-- <input type="image" src="http://avatar.youkuaiyun.com/A/D/0/3_jackpk.jpg" onclick="<span style="background-color: rgb(255, 255, 102);">return false;</span>"/> -->  
           
         <!-- 以下写法，IE8、firefox 33.1 均提交【1】次：/aJoke.do -->  
         <input type="submit" value="input_submit"/>  
     </form>  
 </body>  
 </html>  