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

最新推荐文章于 2022-10-18 21:02:05 发布
最新推荐文章于 2022-10-18 21:02:05 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： ＪavaＳcript

原文：http://wxinpeng.iteye.com/blog/209017

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

1.

Html代码   收藏代码
  1. <input type="image" src="xxx.gif" onclick="return dosubmit();">  

 

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

 

 

 

 

2.

Html代码   收藏代码
  1. <img src="xxx.gif" onclick="return dosubmit();">  

 

   第二种则正常！！

 

 

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

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


zh89233
关注
专栏目录
HTML 标签属性——＜a＞、＜img＞、＜form＞、＜input＞、＜table＞ 标签属性详解
Allen-
11-02 628
HTML元素除了可以使用全局属性外，还有许多特定于某些元素的属性。这些特定属性能够极大地增强元素的功能性和用户体验。
WebView支持<input type="file">调起本地文件,获取图片
shanshan_1117的博客
01-02 2522
最近一个活动要求上传图片功能,WebView获取本地图片文件,但是在iOS上<input type="file"> 可以调起他们的本地文件,在android上点击没有反应,后来看了一些资料,发现这个方法在android 上没有作用,需要我们自己做处理,以下附上代码: activity文件:public class MainActivity extends AppCompatActivity {
<input type="image" ...>和<img>的区别
u011365716的博客
06-16 2382
&lt;input type="image" src="" onclick="..."&gt; 1、当该标签在&lt;form&gt;&lt;/form&gt;中时，在浏览器中点击显示的图片后，效果等同于submit，即表单提交，故onclick事件不用submit,否则会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常！！ 2、但用该标签显示的图片，图片名称中可包含中文..
<input type="img"> 与 <img> 标签的区别
chenghouba2966的博客
07-18 347
最近一直在根据一些项目，学习如何编写 web 程序。 其中，看到一段代码的时候，很是疑惑。 <form action="${pageContext.request.contextPath}/templateAction_add.action" method="post" e...
input type="image" 和 img 用法区别
李建迎的专栏
10-30 8525
和 用法区别利用图片提交表单有两种方式：1. type="image" src="xxx.gif" onclick="return dosubmit();">  用这种方式提交会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常！！原因：：HTML 中 image的描述是“创建一个图像控件，该控件单击后将导致表单立即被提交”。2. src="xxx
img和image的区别
weixin_70426591的博客
10-18 6105
img和image的区别
goodslist主页<template > <div class="product-wrap" @click="handleClick"> <div class="product" v-for="product in products" :key="product.id"> <img :src="product.image" alt="" > <div> <span>{{ product.name }}</span> <h4>￥{{ product.price }}</h4> </div> </div> </div> </template>，<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>￥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template> goodsdetail01页，<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>￥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template>GoodsDetail02页，实现主页点击列表图片跳转到其余两页，不能用路由实现
05-15
this.$root.$on('change-component', (component) => { this.currentComponent = component; }); }, }; </script> ``` 在主页的模板中，使用动态组件来渲染当前的组件。 ``` <template> <div> <div class=...
<form id="myForm"> <label>网   关：<input type="text" placeholder="请输入VID" name="netWorkId" required autocomplete="off" value="25 BF FA 88"></label> <label>网关IP：<input type="text" placeholder="请输入网关IP" name="netWorkIp" required autocomplete="off" value="192.168.1.188"></label> <label>端   口：<input type="text" placeholder="请输入网关端口" name="com" required autocomplete="off" value="1234"></label> <label>节点IP：<input type="text" placeholder="请输入节点IP" name="nodeId" required autocomplete="off" value="00 0B 09 08" autofocus></label> <div class="btn_off"><img src="image/button_off.png" id="btnImg"> <span id="fontText"></span> </div> <div class="state"> <img src="image/light_off.png" id="imgId" value="light"> </div> </form> 我想把这个表单的内容通过// 获取表单数据 var form = document.getElementById("myForm"); var formData = new FormData(form);提交到Servlet中，该如何写
06-09
<input type="submit" value="提交"> ``` 2. 接着，在您的 JavaScript 文件中编写代码，以便在用户点击提交按钮时将表单数据提交到 Servlet。 示例代码： ``` var form = document.getElementById("myForm"); ...
<input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td>我单元格内添加图片后，选中单元格时点击删除按钮可以删除已经添加的图片
最新发布
07-22
在这个示例中，我们使用 `querySelector` 方法来找到单元格中的图片元素（假设你使用 `<img>` 标签来显示图片）。然后，我们使用 `remove` 方法将其从DOM树中移除。 你可以根据你的实际需求对这个示例代码进行修改...
html image与html img的区别
Raymond.LEE
02-17 3821
html:img的区别　　具有自动提交功能 　　如果该标签在form里，它就可以自动提交表单，呵呵这样就解决了在提交按钮上加图片的问题。　　屏蔽此功能可以这样写：onclick:"return false"　　如果只是一般的显示图片可以使用： 　　文章虽短，但介绍了一些实际可用的知识给大家，希望朋友们一如既往的支持中国建站圈，谢谢！ 
HTML 5 <input> type 属性
方全的专栏
12-08 4028
http://www.w3school.com.cn/html5/att_input_type.asp 实例 带有不同输入类型的表单： First name: type="text" name="fname" /> Last name: type="text" name="lname" /> type="submit" value="Submit" />
<input type="image">图片按钮具有提交功能
weixin_30814329的博客
04-06 1799
直接使用<input type="image">即可，此标签放置在<form>标签内就具有提交功能，如果不在<form>标签内，则可以使用<input type="image" onClick = "formName.submit()">方式提交。<input type="image">说明：INPUT type=image 元素 | i...
input标签 各属性解释
热门推荐
chao430的博客
03-22 4万+
input标签最全面的type属性   (2016-08-21 23:56:07) 转载▼ 标签：  type   属性   input   分类： HTML标签 由于时间关系，在上一节中只是简单的列举了input标签中的type属性，在本节中就详细地来运用input标签中的type属性。 因为以
input type=image
xidajiancun
07-20 562
&lt;form action="xx.htm"&gt; &lt;input type = "text" name="" value="aaa"/&gt; &lt;input type="image" src="xxx.jpg" onclick="submitFrm();"&gt; &lt;/form&
<input type="image"> 和 <img> 用法区别
weixin_33896069的博客
01-05 397
w3c定义如下： Image &lt;input type="image" /&gt; 定义图像形式的提交按钮。 必须把 src 属性 和 alt 属性 与 &lt;input type="image"&gt; 结合使用。 &lt;input type="image" src="submit.gif" alt="Submit" /&gt; 一般
background-image和img的区别
weixin_42123213的博客
01-20 3138
background-image 和 <img/>的区别 1. 是否占位 background-image是背景图片，是css的一个样式，不占位； <img />是一个块状元素，它是一个图片，是html的一个标签，占位； 2. 是否可操作 （1）background-image是只能看的，只能设置如下属性： background-position: 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin定义的位置图层； background-attac
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值