&lt;input type="image" ...&gt;和<img>的区别

本文探讨了在HTML表单中使用不同类型的图片标签的影响。详细解释了使用<input type=image>作为提交按钮时的注意事项,特别是如何避免表单重复提交的问题。同时对比了<img>标签在显示中文命名图片时的表现。

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

<input type="image" src="" onclick="...">

1、当该标签在<form></form>中时,在浏览器中点击显示的图片后,效果等同于submit,即表单提交,故onclick事件不用submit,否则会发生表单提交的现象,经常会造成表单元素被重复提交,数据库被写入异常!!

2、但用该标签显示的图片,图片名称中可包含中文字符。

<img src="" onclick="...">
使用该标签时,以包含中文字符命名的图片不能正常显示。但可在图片上设置点击图片后的效果,如页面跳转或打开页面,window.open("....jsp");也可编写javascript脚本,设置点击后的动作效果。

&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset= =iso-8859-1"&gt; &lt;title&gt;Trioptics Certificate&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="certificate.css"&gt;&lt;/link&gt; &lt;base href="file:///C:/Program%20Files%20(x86)/TRIOPTICS%20GmbH/MTF-LAB%2= 05/Certificates/"&gt;&lt;/base&gt;&lt;/head&gt; &lt;body id="IBodyCert" class="CBodyCert"&gt; &lt;!-- open certificate table --&gt; &lt;table align="left" id="ITableCert" class="CTableCert"&gt; &lt;!-- Header --&gt; &lt;tbody&gt;&lt;tr id="ITRCompany" class="CTRHeader"&gt; &lt;td id="ITDCompany" class="CTDHeader"&gt; &lt;div id="IDivCompany" class="CDivHeader"&gt;ImageMaster - Certificate&lt;/div&gt; &lt;/td&gt; &lt;td id="ITDLogo" class="CTDHeader"&gt; &lt;img src="./img/Trioptics-Logo-250x65.png" id="ITDLogo" class="CTDHea= der"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="ITDSlogan" class="CTRHeader"&gt; &lt;td colspan="2" id="ITDSlogan" class="CTDHeader"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;pre&gt;Company : ****** Operator : ****** Time/Date : 13:30:33 June 12, 2025 Sample ID : ****** Measure Program : MTF vs. Field Temperature : 20°C Measured with : &lt;a href="http://www.trioptics.com/"&gt;TRIOPTICS&lt;/a&gt; - MT= F-LAB - Vers. 5.16.1 Instrument S/N : 09-113-0519 Comments : SN215U0540 &lt;/pre&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;hr&gt; &lt;b&gt;Measurement Parameter: MTF vs. Image Height&lt;/b&gt; &lt;pre&gt;Setup Type : Object Infinite / Image Finite EFL (Collimator): 50 mm Wavelength : 940 nm (NIR) EFL (Sample) : 1.5550 mm F-Number : 2.0000 Object Angle : -0.0198 ° Focus Position : 85.8471 Sample Azimuth : 0.0 ° &lt;/pre&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;hr&gt; &lt;b&gt;Measurement Graph: MTF vs. Image Height&lt;/b&gt; &lt;br&gt;&lt;br&gt; &lt;right&gt; &lt;img src="Chart12.png"&gt; &lt;/right&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;hr&gt; &lt;b&gt;Measurement Table: MTF vs. Image Height&lt;/b&gt; &lt;br&gt;&lt;br&gt; &lt;!-- open measurement table --&gt; &lt;table cellspacing="0" align="left" id="ITableDataItems" class="CTa= bleDataItems"&gt; &lt;!-- begin table caption --&gt; &lt;tbody&gt;&lt;tr id="ITRDataCaption" class="CTRDataCaption"&gt; &lt;td id="ITDCaptionBlank" class="CTDCaptionBlank"&gt;&lt;/td&gt; &lt;td align="center" colspan="5" id="ITDDataCaption" class="CTDDataCa= ption"&gt;Image Height (mm)&lt;/td&gt; &lt;/tr&gt; &lt;tr id="ITRDataCaption" class="CTRDataCaption"&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;MTF&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;0.42800&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;0.29960&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;-0.00114&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;-0.29960&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;-0.42800&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;Legend&lt;/td&gt; &lt;/tr&gt; &lt;!-- end table caption --&gt; &lt;!-- begin measurement data --&gt; &lt;tr id="ITRDataItem" class="CTRDataItem"&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;Tan 100(lp/mm)&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.599&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.677&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.668&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.703&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.645&lt;/td&gt; &lt;td colspan="1" id="ITDLegend" class="CTDLegend"&gt;&lt;font color="ff000= 0"&gt;— — —&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="ITRDataItem" class="CTRDataItem"&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;Sag 100(lp/mm)&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.558&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.659&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.673&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.688&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.642&lt;/td&gt; &lt;td colspan="1" id="ITDLegend" class="CTDLegend"&gt;&lt;font color="ff000= 0"&gt;————&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- end measurement data --&gt; &lt;!-- close measurement table --&gt; &lt;/tbody&gt;&lt;/table&gt;&lt;br clear="all"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;hr&gt; &lt;b&gt;Measurement Parameter: MTF vs. Object Angle&lt;/b&gt; &lt;pre&gt;Setup Type : Object Infinite / Image Finite EFL (Collimator): 50 mm Wavelength : 940 nm (NIR) EFL (Sample) : 1.5550 mm F-Number : 2.0000 Object Angle : -0.0198 ° Focus Position : 85.8471 Sample Azimuth : 0.0 ° &lt;/pre&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;hr&gt; &lt;b&gt;Measurement Graph: MTF vs. Object Angle&lt;/b&gt; &lt;br&gt;&lt;br&gt; &lt;right&gt; &lt;img src="Chart11.png"&gt; &lt;/right&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;hr&gt; &lt;b&gt;Measurement Table: MTF vs. Object Angle&lt;/b&gt; &lt;br&gt;&lt;br&gt; &lt;!-- open measurement table --&gt; &lt;table cellspacing="0" align="left" id="ITableDataItems" class="CTa= bleDataItems"&gt; &lt;!-- begin table caption --&gt; &lt;tbody&gt;&lt;tr id="ITRDataCaption" class="CTRDataCaption"&gt; &lt;td id="ITDCaptionBlank" class="CTDCaptionBlank"&gt;&lt;/td&gt; &lt;td align="center" colspan="5" id="ITDDataCaption" class="CTDDataCa= ption"&gt;Object Angle (?&lt;/td&gt; &lt;/tr&gt; &lt;tr id="ITRDataCaption" class="CTRDataCaption"&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;MTF&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;-15.33590&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;-10.72937&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;0.00072&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;10.77662&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;15.40352&lt;/td&gt; &lt;td id="ITDDataCaption" class="CTDDataCaption"&gt;Legend&lt;/td&gt; &lt;/tr&gt; &lt;!-- end table caption --&gt; &lt;!-- begin measurement data --&gt; &lt;tr id="ITRDataItem" class="CTRDataItem"&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;Tan 100(lp/mm)&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.599&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.677&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.668&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.703&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.645&lt;/td&gt; &lt;td colspan="1" id="ITDLegend" class="CTDLegend"&gt;&lt;font color="ff000= 0"&gt;— — —&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="ITRDataItem" class="CTRDataItem"&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;Sag 100(lp/mm)&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.558&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.659&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.673&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.688&lt;/td&gt; &lt;td id="ITDEven" class="CTDDataItem"&gt;0.642&lt;/td&gt; &lt;td colspan="1" id="ITDLegend" class="CTDLegend"&gt;&lt;font color="ff000= 0"&gt;————&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- end measurement data --&gt; &lt;!-- close measurement table --&gt; &lt;/tbody&gt;&lt;/table&gt;&lt;br clear="all"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;!-- close certificate table --&gt; &lt;/tbody&gt;&lt;/table&gt; &lt;/body&gt;&lt;/html&gt; 为啥这个内容调用QDomDocument的setContent会失败
06-28
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dinxin横刀一笑

意思不意思那是你的意思

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值