`
hudeyong926
  • 浏览: 2028218 次
  • 来自: 武汉
社区版块
存档分类
最新评论

input image和img button区别

阅读更多

利用图片提交表单有两种方式:

1.

<input type="image" src="http://www.zxbc.cn/html/20081031/xxx.gif" onclick="return dosubmit();">

  用这种方式提交会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常!!
  原因::HTML 中 image的描述是“创建一个图像控件,该控件单击后将导致表单立即被提交”。
2.

<img src="http://www.zxbc.cn/html/20081031/xxx.gif" onclick="return dosubmit();"> 

  这种方式提交是正常的没有问题,
  所以,请少用第一种方式提交数据尤其是在struts的应用中
  注!无论哪种方式提交都在包含在<form></form>之间,否则,提交无效

 

3.

<button type="sumbit" value="ok">Click Me!</button>

 

4.不提交

<input type="image" src="http://www.zxbc.cn/html/20081031/xxx.gif" onclick="return false;">

 

 

分享到:
评论

相关推荐

    javascript经典特效---input按钮改变图片.rar

    通过对`&lt;input&gt;`按钮的`click`事件监听和对`&lt;img&gt;`元素的`src`属性操作,我们可以轻松地实现图片的动态变化,同时结合CSS动画,可以让用户体验更加流畅和生动。这样的技术在网页设计中非常常见,能够提高用户与网页...

    用image来提交form不想使用button提交form.docx

    &lt;input type="image" src="submit_button.png" alt="Submit" name="submit"&gt; ``` 这里的`&lt;input type="image"&gt;`有两个默认属性:`x`和`y`,它们分别表示用户点击图像时的坐标。如果不需要这些坐标,可以在`...

    js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    input type=”button” name=”” value=”载入图片” onclick=”addImg(‘tt.jpg’)” /&gt; [removed] &lt;!– function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { ...

    jQuery实现input[type=file]多图预览上传删除等功能

    当用户选择文件后,通过JavaScript遍历`input`的`files`属性获取到文件列表,然后使用`FileReader`对象异步读取文件内容,并将其以`data:image/*`的格式插入到`img-box`中。 ```javascript imgPreview: function() ...

    h5上传压缩图片Image.rar

    &lt;input type="file" id="imgInput" accept="image/*" capture&gt; ``` 为了支持拍照功能,可以添加`capture`属性,让用户可以选择相机作为源。同时,我们还需要一个按钮触发文件选择,例如: ```html &lt;button id=...

    为按钮添加图标

    这种方法利用了`&lt;input&gt;`标签的一个特殊类型——`type="image"`,可以直接将按钮设置为一个图像按钮。示例代码如下: ```html &lt;input type="image" value="ύ" src="1.jpg" onclick="loginForm.submit()" /&gt; ``` #...

    求得div 下 img的src地址的js代码.docx

    &lt;input onclick="imgList('listimg')" value="test" type="button" /&gt; ``` 在这个解决方案中,我们创建了一个名为`imgList`的函数,该函数接收一个参数`obj`,即div的ID。通过`getElementById(obj)`获取div元素,...

    用image来提交form不想使用button提交form

    通常,我们使用`&lt;button&gt;`或`&lt;input type="submit"&gt;`标签来创建一个提交按钮,但有时为了美观,开发者可能会选择使用图像(image)作为提交按钮。本文将详细讲解如何使用图像提交表单,以及解决可能出现的重复提交...

    [初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维

    - **HTML 表单元素:** 使用 `&lt;input&gt;` 和 `&lt;button&gt;` 创建用户交互界面。 - **JavaScript 数据处理:** 使用数组存储数据,监听表单提交事件来处理数据。 **实现思路:** 1. **HTML 结构:** ```html &lt;input ...

    Laravel开发-image-palette

    &lt;input type="file" name="image" accept="image/*"&gt; &lt;button type="submit"&gt;生成调色板&lt;/button&gt; @if(isset($palette)) 调色板: @foreach($palette as $color) $color }};"&gt; @endforeach @endif ``` ...

    html实现图片按钮的两种简单方法

    - `&lt;button&gt;`标签提供了更多的自定义和扩展性,可以包含HTML内容,如文本、链接等,而`&lt;input&gt;`标签则相对简单,仅支持图片。 在实际应用中,选择哪种方法取决于具体需求。如果只需简单的提交功能且不需额外的交互...

    Vue触发input选取文件点击事件操作

    == 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif') { alert('不是有效的图片文件!'); return; } this.imgInfo = Object.assign({}, this.imgInfo, { name: inputFile....

    HTML5多张图片上传删除代码.zip

    imgElement.parentNode.appendChild(deleteButton); ``` 在实际应用中,还需要考虑上传图片到服务器的部分。这通常涉及到使用Ajax(比如jQuery的`$.ajax`或Fetch API)来发送HTTP请求,同时可能需要处理文件的二...

    多图片上传和图片在页面直接显示demo

    &lt;input type="file" id="imageUpload" multiple&gt; ``` 当用户选择文件后,我们可以通过JavaScript监听`change`事件来获取选中的文件对象。这些文件对象可以通过`FileReader` API读取并转换为Base64编码,这是一种...

    H5模仿微信上传图片删除

    对于PC端和手机端的适配,主要考虑触摸事件和鼠标事件的区别,以及屏幕尺寸的差异。例如,手机端可能需要优化点击区域,PC端则可能需要调整布局以适应更大的屏幕。CSS媒体查询可以帮助我们实现响应式设计: ```css ...

    图片型按钮的写法.rar

    &lt;img src="button-image.png" alt="按钮文本"&gt; &lt;/button&gt; ``` 或者 ```html &lt;button id="imageButton" style="background-image: url(button-image.png);"&gt;&lt;/button&gt; ``` 二、CSS美化 使用CSS,我们可以对按钮进行...

    给表单按钮添加背景图片

    background-image: url('img/button_icon.png'); background-position: center; background-repeat: no-repeat; padding-left: 30px; /* 为图片留出空间 */ border: none; font-size: 16px; } &lt;button ...

    简单的多张图片上传和删除

    &lt;input type="file" id="imageUpload" multiple&gt; ``` 2. **事件监听**:我们需要监听`change`事件,当用户选择图片后执行相应的处理。这通常在JavaScript中完成。 ```javascript document.getElementById('image...

    求得div 下 img的src地址的js代码

    &lt;input onclick="imglist('listimg')" value="test" type="button"&gt; 在上面的 JavaScript 代码中,我们定义了一个函数 imglist(obj),该函数用于获取某个 Div 元素下的所有 Img 元素,并将其 Src 属性值更改为新的...

Global site tag (gtag.js) - Google Analytics