`
wxinpeng
  • 浏览: 589337 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

<input type="image"> 和 <img> 用法区别

阅读更多

  写一个表单提交用到图片:两种代码。

1.

<input type="image" src="xxx.gif" onclick="return dosubmit();">

 

    会发生表单提交的现象,经常会造成表单元素被重复提交,数据库被写入异常!!

 

 

 

 

2.

<img src="xxx.gif" onclick="return dosubmit();">

 

   第二种则正常!!

 

 

原因::HTML 中 image的描述是“创建一个图像控件,该控件单击后将导致表单立即被提交。”。

 请 尽量 少用<input type="image">以免造成不必要的异常!!!

分享到:
评论
6 楼 dqd979231776 2015-06-16  
+1我用遇到了这个问题,解决了好长时间
5 楼 huanglei_jay 2014-04-15  
consatan 写道
楚若之夜 写道
<input type="image" src="xxx.gif"  >  本身就是个提交按钮,和submit功能一样,所以再加上你的onclick当然要提交两次了

+1以前也遇到过这问题
但是还以为是后台写错了,在后台调试了半天,确定问题不可能在后台后一看前台...立马晕了...

4 楼 wxinpeng 2011-08-12  
consatan 写道
楚若之夜 写道
<input type="image" src="xxx.gif"  >  本身就是个提交按钮,和submit功能一样,所以再加上你的onclick当然要提交两次了

+1以前也遇到过这问题
但是还以为是后台写错了,在后台调试了半天,确定问题不可能在后台后一看前台...立马晕了...

做开发中,我们习以为常的代号,会有很多陷阱的。谨慎。。
3 楼 consatan 2011-08-12  
楚若之夜 写道
<input type="image" src="xxx.gif"  >  本身就是个提交按钮,和submit功能一样,所以再加上你的onclick当然要提交两次了

+1以前也遇到过这问题
但是还以为是后台写错了,在后台调试了半天,确定问题不可能在后台后一看前台...立马晕了...
2 楼 poincare 2011-06-08  
学习了
1 楼 楚若之夜 2010-09-19  
<input type="image" src="xxx.gif"  >  本身就是个提交按钮,和submit功能一样,所以再加上你的onclick当然要提交两次了

相关推荐

    js获取 input file 图片立即显示

    综上所述,"js获取input file 图片立即显示"的核心在于利用JavaScript的`FileReader` API,配合HTML的`&lt;input type="file"&gt;`和`&lt;img&gt;`标签,实现用户选择图片后的即时预览。这一过程涉及到前端交互、文件处理以及...

    input type=file 及时预览图片

    首先,我们需要理解 `&lt;input type="file"&gt;` 的基本用法。在HTML代码中,创建一个这样的输入框非常简单: ```html &lt;input type="file" id="imageUpload" accept="image/*"&gt; ``` 这里,`accept="image/*"` 参数限制...

    html小练习.docx

    &lt;img src="image.jpg" alt="图片示例"&gt; ``` 页 3:课表设计 在本页中,我们将学习如何设计一个简单的课表。我们可以使用 table 元素,tr 元素和 td 元素来创建表格。th 元素用于设置表头,td 元素用于设置表格...

    HTML标签分类及其属性.pdf

    由于扫描文本可能存在错误,例如,“&lt;formid=form1&gt;&lt;/legend&gt;&lt;inputtype=checkbox&gt;HTML&lt;br&gt;&lt;inputtype=checkbox&gt;CSS&lt;br&gt;&lt;inputtype=checkbox&gt;DHTML&lt;br&gt;&lt;inputtype=checkbox&gt;SCRIPT&lt;br&gt;&lt;/form&gt;&lt;/fieldset&gt;”这段文字...

    html速查~~~~~~

    HTML5引入了许多新元素和API,如`&lt;canvas&gt;`(画布)、`&lt;svg&gt;`(矢量图)、`&lt;video&gt;`和`&lt;audio&gt;`(多媒体)、`&lt;input type="date"&gt;`(日期选择)等,增强了网页的交互性和表现力。 九、响应式设计 HTML5的`&lt;meta ...

    网站特效代码:设置首页:增加流量等

    &lt;input type="text" name="q" size="31" maxlength="255" value=""&gt;&lt;/input&gt; &lt;input type="submit" name="sa" value="搜索"&gt;&lt;/input&gt; &lt;input type="hidden" name="client" value="pub-1158979064464452"&gt;&lt;/input&gt;...

    html&css;&JavaScript;基础笔记

    &lt;img src="image.jpg" alt="Sample Image"&gt; ``` ##### 表格 - **`&lt;table&gt;`**:定义表格元素。例如: ```html &lt;table&gt; &lt;tr&gt; &lt;th&gt;Header 1&lt;/th&gt; &lt;th&gt;Header 2&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Data 1&lt;/td&gt; &lt;td&gt;Data ...

    jQuery完全实例.rar

    &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

    html/xhtml

    &lt;img src="image.jpg" alt="示例图片"&gt; &lt;audio src="music.mp3" controls&gt;&lt;/audio&gt; &lt;video src="video.mp4" controls&gt;&lt;/video&gt; ``` ### 第六节:超级链接 `&lt;a&gt;`标签创建超链接,`href`属性指定目标URL,`target`...

    韩顺平html,div+css视频听讲笔记

    有序列表则通过 `&lt;ol&gt;` 标签实现,同样使用 `&lt;li&gt;` 定义子项,并且可以通过 `type` 和 `start` 属性自定义列表编号的样式和起始数字。例如: ```html &lt;ol type="a" start="d"&gt; &lt;li&gt;传奇&lt;/li&gt; &lt;li&gt;反恐精英&lt;/li&gt; ...

    第3章HTML服务器控件扫描.pdf

    6. `HtmlInputButton`: 控制 `&lt;input type="button"&gt;`, `&lt;input type="submit"&gt;` 和 `&lt;input type="reset"&gt;`。 7. `HtmlInputCheckBox`: 处理复选框 `&lt;input type="checkbox"&gt;`。 8. `HtmlInputFile`: 用于文件上传 ...

    (完整版)html测试题.pdf

    17. 表单中的按钮类型:`&lt;input type=submit&gt;`表示提交按钮,`&lt;input type=reset&gt;`表示重置按钮,`&lt;input type=image&gt;`表示可点击的图片按钮。 18. 字符串操作:例如`str.IndexOf()`方法用于查找字符串中指定字符或...

    input file图片上传即时预览

    创建一个`&lt;input type="file"&gt;`元素和一个用于预览的`&lt;img&gt;`元素。`&lt;input&gt;`元素添加一个`change`事件监听器,当用户选择文件时触发该事件。 ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;图片上传即时预览&lt;/...

    jquery封装的input file控件

    在本案例中,开发者可能使用jQuery对原生的`&lt;input type="file"&gt;`进行封装,以实现自定义样式、多选文件、预览文件等功能,从而提升用户体验。 首先,我们需要理解HTML的`&lt;input type="file"&gt;`的基本用法。这个元素...

    HTML网页制作教程与优点分析.docx

    &lt;img src="image.jpg" alt="图片描述"&gt; ``` #### 二、HTML网页制作流程 1. **创建HTML文件** - 使用Notepad++、Visual Studio Code等文本编辑器新建文件,并将其保存为`.html`格式。 2. **设计网页布局** - `...

    HTML5+jQuery+Canvas调用手机拍照功能上传图片

    &lt;input type="file" accept="image/*;capture=camera"&gt; ``` 当用户点击这个输入框,手机会弹出相机应用,让用户拍照。拍完照后,图片会作为文件对象返回到JavaScript中。 接下来,jQuery作为一个流行的JavaScript...

    HTML基础教程

    &lt;img src="image.jpg" alt="Image description"&gt; ``` #### 四、用HTML创建表格 1. **表格标签**: - `&lt;table&gt;`: 表格本身。 - `&lt;tr&gt;`: 表格行。 - `&lt;td&gt;`: 表格单元格。 - `&lt;th&gt;`: 表格头部单元格。 2. **...

    html学习记录总结

    - 行内块元素:介于块级元素和行内元素之间,如`&lt;img&gt;`, `&lt;input&gt;`, `&lt;td&gt;`等。 - **垂直对齐**:使用`vertical-align`属性实现行内块元素与文本的对齐。 - **背景属性**:定义背景色、背景图片、背景平铺方式、...

    HTML5入门(css3+js api+html新标签)

    - **Number**: `&lt;input type="number" name="points" min="1" max="10" /&gt;` - **Range**: `&lt;input type="range" /&gt;` - **Datepickers**: `&lt;input type="date" /&gt;` - **Search**: `&lt;input type="search" /&gt;` - **...

Global site tag (gtag.js) - Google Analytics