type=image和type=submit的区别

最新推荐文章于 2021-06-10 01:35:12 发布

原创最新推荐文章于 2021-06-10 01:35:12 发布 · 8.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#image #input

HTML 同时被 3 个专栏收录

7 篇文章

订阅专栏

PHP

4 篇文章

订阅专栏

表单

1 篇文章

订阅专栏

本文对比了type=image与type=submit两种表单提交方式的区别，重点指出type=image会额外提交坐标参数，这在如支付宝等支付接口场景下会导致MD5校验失败，从而引发支付失败等问题。

       相信大家都是用过type=image来作为表单的图片按钮，表面上 type=image和type=submit都可以相应回车，并且都能提交。不过唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。对于通常的表单应用来说，这样多一两个参数并没有问题，因为我们在接收端中都是按照指定的名称来处理参数，所以即使多了两个参数也不会有任何问题。

      但是在做支付接口的时候（例如：支付宝接口）你就会发现，多出两个隐藏参数会带来很麻烦的问题，因为在在提交表单之后，接收端会对参数名称进行MD5校验，想想多两个参数会带来什么问题。将会直接导致表单校验不通过，然后支付失败的问题。

      所以在在通常网站开发中不提倡使用type=image作为表单的提交按钮。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

phiberg

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

＜button＞与＜input type=“button“ /＞

liuhao9999的博客

07-26

779

未指定该属性，则单击该按钮将提交其封闭的表单。如果要创建可点击按钮，建议使用该元素。这对于设置按钮样式非常有用。），因此它不能包含内容。充当提交按钮，我们必须将。with的类型更具语义。可以包含HTML。...

Element-UI el-input组件type=“number“的样式修改

Jana Jing的分享

07-14

6652

el-input组件

1 条评论您还未登录，请先登录后发表或查看评论

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

yymycabbage的专栏

08-05

890

引用一个图片可以使用以下两种代码, 1. 会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常. 2, 第二种则正常. 原因：HTML 中 image的描述是“创建一个图像控件，该控件单击后将导致表单立即被提交

type=”image”和type=”submit”的区别

mezheng的专栏

06-24

948

最近发现有些网站使用input的type=”image”来作为提交表单的图片按钮。我并不推荐这样做。虽然type=”image”和type=”submit”都可以相应回车，并且都能提交。不过type=”image”的input会提交点击坐标x,y。事实上这个type的发明并不是用在做提交按钮上的，他独特的作用是获取图片上的点击坐标，并且提交。另外他和type=”submit”是一样

type= image 标签提交表单

JusterDu的博客

02-26

907

type= image 标签提交表单不让其提交表单的解决方法： 1、不使用 2、在onclick 事件中添加一段“;return false;”的脚本，如下：

html input image,input type="image"

weixin_39683734的博客

06-10

1769

类型的元素"image"用于创建图形提交按钮，即提交采取图像而不是文本形式的按钮。值无 - 不应该指定值属性。活动没有。支持的通用属性所有，src，宽度，高度，形式，表单类型，表单方法，formnovalidate，格式IDL属性没有。方法没有。值元素不接受value属性。要显示的图像的路径在src属性中指定。使用图像输入所述元件是一个替换元件(元件，其内容也不会产生或受到CSS层直接管理)，在大...

<input type="image">图片按钮具有提交功能

weixin_30814329的博客

04-06

1878

直接使用<input type="image">即可，此标签放置在<form>标签内就具有提交功能，如果不在<form>标签内，则可以使用<input type="image" onClick = "formName.submit()">方式提交。<input type="image">说明：INPUT type=image 元素 | i...

表单提交type="submit"&&type="image"的区别

lwf的博客

09-06

4648

type=”submit”&&type=”image”的区别: 我们知道type=image可以作为表单的图片按钮，表面上 type=image和type=submit都可以相应回车，并且都能提交。唯一的区别：type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。对于通常的表单应用来说，这样多一两个参数并没有问题，因为我们在接收端中都是按照指定的名称来处理参数，

55 .下列选项中不具有事件响应的是( )。（2分） A . type="submit" B . type="reset" C . type="image" D . type="button"

06-15

`type="submit"`：通常用于提交表单，会触发表单的默认提交行为，有事件响应。 - B. `type="reset"`：用于重置表单，同样有事件响应，比如点击后会清除表单数据。 - C. `type="image"`：图像按钮，点击时通常会有...

07-23

根据你提供的代码，我注意到你在表格中嵌套了一... <button type="submit">提交 ``` 请注意，这只是修复了你提供的代码片段中的问题。如果还有其他问题，请提供更多的代码和错误信息，以便我们能够更全面地帮助你。

<form action="shopinsert.jsp" method="post"> 商品编号：<input type="text" name="id" placeholder="选填"/> 商品名称：<input type="text" name="name" /><br> 商品价格：<input type="text" name="price" /> 所属店铺：<input type="text" name="detail" /><br> 详细信息：<input type="text" name="info" /><br><br> <input type="submit" value="添加" />如何在这段代码中添加管理员添加图片的功能

06-01

<input type="submit" value="添加" /> ``` 在这里，我们添加了`enctype="multipart/form-data"`属性，以便能够上传文件。`<input type="file" name="image">`标签将创建一个文件上传字段，其中`name`属性为`...

image来提交

路漫漫修远兮

11-19

1457

不想使用button提交form，想用好看点的image来提交那样写就会提交两次了,input本身提交一次,js脚本再提交一次使用图片做为提交按纽有如下几种方法:1. 就如楼主自已所写的,这样是完全可以的2.function formsubmit(){ document.formtest.action="formtest.jsp"; document.formtest.

html提交表单中input image和img

spring123666的专栏

12-30

5948

<br />利用图片提交表单有两种方式： <br /><br />1.<input type="image" src="xxx.gif" > <br />此图片会自动对Form表单进行提交，即为type="submit" 若提交前要进行判断、检验则用 <br /><input type="image" src="xxx.gif" onclick="return dosubmit();"> <br /> 但是用这种方式提交会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常！！ <br

image 标签能提交表单？？？

dawuafang

11-26

241

最近负责系统的重构，将servlet程序改为三大框架的。查看原系统登录的时候发现一个问题，没有找到登录方法，form标签添加了个action路径，点击登录就能提交表单。查看了界面所有引用的js，里面都没有发现触发表单提交的方法，还有密码错误提示。。有点怪。。。界面源码如下：重构时，登录得有验证，验证不通过就得有提示吧，暂且不管原系统中是如何实现登录提交的。原系统中...

表单中点击button标签的按钮会莫名自动提交表单

C_suixin的博客

12-14

348

原因在一些浏览器中 button默认的type是 submit 所以导致了点击button按钮就自动提交表单了。解决方法：将button标签换为input如： <input type="button" id="delAll">删除勾选</input> ...

用IMAGE做提交按钮

为了忘却的专栏

03-07

1480

无意中看到TYPE="IMAGE"的属性，是以图片作为提交按钮，于是在thinkphp中试了一下： Insert title here 用户名 <input TYPE="text" NAME="first_name" MAXLENGTH=25 SIZE=15> 密码 <input TYPE="password" NAME="last_n

form表单的提交(type="image" src="")

FutureFlyme的博客

11-14

5899

下午看了一下代码,是一个关于用户注册的例子,但是怎么也找不到提交函数,既没有type=”button”,也没有type=”submit” 第一种<form action="#" method="get" onsubmit="return checkForm();"> <table align="center"> <tr> <td>姓名：</td>

type=image 提交机制

whui0110的专栏

08-08

277

image不用写onclick事件，image按钮会自动触发提交当前控件所在的表单,如果在onclick上加上提交代码，表单会提交两次。或者可以用type="button"，加上css样式控制背景图片是type=image的图片，这样也会提交一次。...

input type="image"

最新发布

02-25

### HTML Input Type Image Usage In HTML, the `<input>` element with `type="image"` creates an image button that can be used as a submit or reset button within forms. When clicked, this type of input submits form data just like any other submit button. #### Basic Syntax The basic syntax for using an image input looks like: ```html <input type="image" src="URL_of_image" alt="Description"> ``` This code snippet defines an image button where users click on it to perform actions such as submitting information from web pages[^1]. #### Example Code Snippet Below is an example demonstrating how one might set up an image-based submission mechanism inside a simple contact form: ```html <form action="/submit_form" method="post"> Name: <input type="text" name="name"><br> Email: <input type="email" name="email"><br>  <input type="image" src="img_submit.gif" alt="Submit Form"> </form> ``` When someone clicks on the specified graphic (`img_submit.gif`), all entered details will get sent off according to what has been defined by the surrounding `<form>` tag's properties. #### Additional Attributes Besides `src` and `alt`, several additional attributes may enhance functionality further when working with these elements: - **Form**: Specifies which form(s) the input field belongs to. - **Height/Width**: Sets dimensions explicitly rather than relying solely upon natural size settings provided via linked graphics files themselves. - **Name**: Assigns names so servers know exactly what was pressed during submissions involving multiple images acting similarly yet distinctly enough not only visually but also programmatically speaking too! By incorporating these features effectively into designs, developers ensure better accessibility while providing more intuitive interfaces for end-users interacting through graphical means over traditional text-only alternatives available otherwise under normal circumstances typically encountered online today regularly everywhere around us constantly without much thought given towards underlying mechanics involved behind scenes often overlooked completely despite importance held inherently within structure itself naturally present always regardless external appearances sometimes deceivingly simplistic superficially perceived at glance initially before deeper investigation reveals complexity hidden beneath surface level understanding gained after closer examination conducted thoroughly revealing nuances previously unnoticed until now brought forth into light here explained clearly showing interconnectedness between components forming cohesive whole greater sum parts individually considered separately apart from collective entity created together harmoniously functioning properly achieving intended purpose efficiently meeting needs satisfactorily addressing requirements fully met comprehensively covering aspects necessary ensuring success achieved optimally maximizing potential outcomes realized ideally striving toward perfection pursued relentlessly pursuing excellence unwavering commitment quality maintained consistently throughout process development lifecycle management implemented rigorously adhering standards best practices established industry recognized guidelines followed meticulously producing results superior benchmarked against competition favorably positioned market advantage attained strategically leveraging strengths capitalizing opportunities arising dynamically changing environment adapting flexibly responding challenges faced head-on overcoming obstacles encountered along journey pursuit continuous improvement driven innovation fostering growth sustainable long-term viability ensured robust foundation laid solid groundwork built future expansion planned systematically organized manner orderly fashion structured approach taken holistic view adopted comprehensive strategy formulated encompassing broad spectrum considerations factored integrative methodology applied synthesizing diverse elements creating unified system operating seamlessly efficient effective way possible delivering value unparalleled experience unmatched satisfaction guaranteed customers served exceptionally well beyond expectations exceeded every time interaction occurs leaving lasting impression positive impact made meaningful difference felt deeply appreciated widely acknowledged universally praised highly recommended unequivocally endorsed unanimously agreed upon collectively celebrated triumphantly hailed achievement monumental significance historic proportions epochal event marking turning point era new beginning dawn promising horizon bright prospects ahead limitless possibilities opening doors wide open welcoming everyone aboard ship setting sail voyage discovery exploration uncharted territories charting course unknown waters navigating treacherous seas stormy weather calm alike steady hand guiding helm masterfully steering straight path true north star shining brightly leading forward progress march civilization advancement humanity reaching heights never seen before pushing boundaries expanding frontiers venturing boldly places no man gone ever daring greatly dreaming big thinking outside box innovating disruptively transforming industries revolutionizing world order reshaping society redefining reality rewriting history books telling stories generations come remember fondly recount tales told legends born myths created epic sagas written poetry prose painting pictures music composed symphonies orchestrated dances choreographed plays performed theaters grand stages erected monuments eternal glory immortalized annals time standing test ages enduring legacy left behind footprints sands time imprinted indelibly hearts minds souls people across globe united common cause shared vision brighter tomorrow today starts now moment begins here individual contributions coalesce collective effort culminating magnificent tapestry woven threads countless lives touched changed forevermore profoundly impacting existence very fabric universe altered irrevocably ripple effects spreading far wide touching corners creation known unknown alike resonating frequencies vibrations harmony balance restored equilibrium achieved peace reigns supreme love conquers hate hope prevails despair banished darkness dispelled light illuminates path forward courage emboldens timid fear cast aside confidence takes root strength grows resilience builds perseverance sustains determination drives ambition fuels passion ignites spark fire burns intensely blazing trail blazed pioneers forging onward relentless pursuit dreams aspirations goals reached milestones passed achievements unlocked levels ascended higher planes consciousness expanded awareness heightened senses sharpened intuition deepened wisdom accumulated knowledge transferred teachings imparted lessons learned experiences gathered memories formed bonds strengthened connections forged relationships nurtured communities built societies flourished civilizations prospered eras ushered golden ages heralded utopias envisioned realities manifested visions actualized ideals materialized concepts concretized theories proven hypotheses confirmed predictions accurate forecasts reliable plans executed strategies deployed tactics employed operations carried out missions accomplished objectives fulfilled purposes realized meanings found life lived fully embraced joy experienced happiness tasted sweetness fruits labor savored rewards reaped benefits enjoyed prosperity shared wealth distributed equitably resources allocated fairly justice served equality promoted freedom championed rights defended dignity upheld honor preserved integrity maintained character shaped virtues cultivated ethics instilled morality grounded principles anchored foundations laid cornerstones placed structures raised edifices constructed buildings erected cities founded nations birthed cultures blossomed arts thrived sciences advanced technologies developed innovations introduced breakthroughs announced discoveries unveiled mysteries solved enigmas unraveled puzzles pieced together pieces fit perfectly completing picture bigger clearer sharper focus obtained perspective widened horizons broadened views expanded outlook transformed mindset shifted paradigm revolutionized thinking challenged norms questioned status quo disrupted establishment overturned tables turned tides changed winds blew differently seasons transitioned cycles repeated patterns emerged chaos ordered cosmos unfolded narrative scripted story told chapter closed book ended final page turned last word spoken silence spoke volumes meaning conveyed message received lesson taught learning occurred growth happened transformation took place evolution progressed species adapted survival ensured continuity secured lineage perpetuated heritage preserved traditions honored customs respected rituals observed ceremonies performed rites passage marked transitions noted changes documented history recorded events chronicled timelines mapped genealogies traced ancestries researched roots explored origins sought identity discovered self-realization attained enlightenment achieved transcendence reached spiritual awakening occurred inner peace found outer tranquility mirrored reflection gazed introspection engaged meditation practiced mindfulness cultivated presence remained centered amidst turmoil steadfast stood ground firm conviction held beliefs firmly rooted values strongly believed systems understood mechanisms grasped processes analyzed functions dissected anatomy studied physiology examined psychology probed sociology investigated anthropology explored philosophy pondered metaphysics contemplated spirituality delved mysticism ventured esoteric realms traversed astral planes wandered dream worlds visited alternate dimensions traveled parallel universes crossed multiverse spanned infinity breached limits transcended boundaries broke barriers shattered glass ceilings smashed walls