html代替submit按钮的图片代码

代替submit按钮的图片代码格式是

<input type="image" name="..." src="..." onClick="document.formName.submit()">

代替reset按钮的代码图片格式是

<a href="javascript:document.formName.reset();"><img border=0 src="..."></a>

_____________________________________________________________________________

1.

<input type=image src="web-pic/submit.jpg" onClick = " return form1_onsubmit()" />
   
    <input type="image"src="web-pic/reset.jpg"onclick="javascript:document.forms[‘form‘].reset(); return false;"/>

有时候为了达到比较好的视觉效果,有人会使用图片代替按钮来提交或者重置表单数据。

<FORM name=RedForm action=# >

一:

<INPUT name=textfield2>

<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg onclick="this.form.submit()">

<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg3 onclick="this.form.reset()">

</FORM>

二:

代替submit按钮的图片代码格式是

<input type="image" name="..." src="..." onClick="document.formName.submit()">

代替reset按钮的代码图片格式是

<a href="javascript:document.formName.reset();"><img border=0 src="..."></a>

三:
<form>

<INPUT name=textfield2>

<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=RedImg onClick="frm1.action=‘link.asp‘">

通过onClick="document.form.submit()"来提交表单;用onClick="document.form.reset()"来复位表单,这样一来,任何一个元素(不仅是图片)都可以实现提交表单了。

在这样子的情况下,还可以自定义图片的长度和宽度等

使用图片做按钮的几种方法和优劣

合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。
如果想用图片代替重置按钮,可以用下面的方法:

(1)给 type 为 image 的 input 添加 onclick 事件来实现重置,并通过添加 return false 来避免默认的提交操作:

<form method="post" name="testForm_2" action="">
<p><input type="text" name="keyword" /></p>
<input type="image" src="send.gif" />
<input type="image" src="reset.gif" onclick="javascript:document.forms[‘testForm_2‘].reset(); return false;" />
</form>

document.forms[‘testForm_2‘].reset(); 是将名称为 testForm_2 的表单重置。
return false; 是防止提交表单。

(2)直接用图片模拟的重置按钮

<form method="post" name="testForm_3" action="">
<p><input type="text" name="keyword" /></p>
<input type="image" src="send.gif" />
<img src="reset.gif" alt="Reset" onclick="javascript:document.forms[‘testForm_3‘].reset();" style="cursor:pointer;" />
</form>

document.forms[‘testForm_2‘].reset(); 是将名称为 testForm_2 的表单重置。

style="cursor:pointer;" 设置图片悬停时,显示手型光标。

两种方法大同小异,在 javascript 被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。

当然,我们也可以直接把样式交给 CSS 去处理,用背景图的方式来实现,但是这样需要将 value 的值留空,如果 CSS 被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

时间: 2024-10-23 09:53:56

html代替submit按钮的图片代码的相关文章

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

html bottom html submit按钮表单控件与CSS美化(http://www.divcss5.com/html/h619.shtml)

html bottom按钮html submit按钮控件html表单按钮控件-html bottom与html submit按钮表单控件与CSS美化,介绍form input bottom按钮和html input submit按钮基本结构与用法,html按钮控件bottom和submit区别,同时DIVCSS5对html按钮美化布局. 一般提交按钮使用了html submit和html bottom两种按钮控件实现同时可将按钮设置CSS样式美化为时间设计图片按钮,首先DIVCSS5介绍html

JS实现点击按钮复制指定代码大全

<br><br>一.点击复制文本框内容的代码:<br><br> <script type="text/javascript"> function jsCopy(){ var e=document.getElementById("content");//对象是content e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制

4.VC按钮显示图片

1.方法1: 加载BITMAP显示,缺点是:图片固定大小,不会自动拉伸 //资源文件里导入一张BITMAP,如 IDC_BITMAP1 //设置Button的Bitmap 属性为 TRUE //.cpp CBitmap PpBitmap = new CBitmap(); //创建图片对象 pBitmap->LoadBitmapA(IDB_BITMAP1); //从资源中加载图片 HBITMAP hBitmap = (HBITMAP)pBitmap->Detach(); m_btn1.SetBi

【js笔记】神奇的js将a标签转换为超强的submit按钮

标题可能说的有点浮夸了0.o 在以前做页面的时候,是将form表单中的提交按钮写成 <input type="submit" /> 但是,总是觉得没有a标签设置样式好用,所以写了这样一个js函数来实现将a标签转换为submit按钮. 先上码: js代码: // 将a标签可用于表单(form)的提交js函数 //适用于一个form中有多个submit情况 function tosubmit(action_str){ var myform=document.getElement

spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE b

jquery带按钮的图片切换效果

<!doctype html> <html> <head> <meta charset="gb2312"> <title>jquery带按钮的图片切换效果</title> <script type="text/javascript" src="jquery-1.8.0.js"></script> <style type="text/cs

网页背景图片代码

1.(最普遍类) <style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style> 说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的! 2.(综合类) 3.<P class="style6"> </P></SP

用label标签解决IE下input按钮点击或者submit按钮的黑边框

如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样: .代码 <inputtype="submit"class="button"value="登录"/> 你会发现submit初始状态就是这种焦点获取的黑框样式:精心开发5年的UI前端框架! 怎么办?如果设置border:none,也就是说不要border,那么这种黑框就没 有了,所以有种解决办法是直接把框写死到背景上,然后去除bord