文章目录
  1. 1. 方式一
  2. 2. 方式二
  3. 3. 方式三

Web开发中Form中的提交和重置按钮是灰色的,可能会和自己想要的效果差太多,我们可以通过图片来代替Form中的按钮以达到美化的效果,下面就给出实现的代码。

方式一

<form name="form1" method="post" action="">
    Name:<input type="text" name="name">

    <a href="javascript:form1.submit();">
          <img src="xx.png" border="0"  align="absmiddle">
      </a>
    <a href="javascript:form1.reset();"><img border=0 src="xx.png"></a>
</form>

方式二

<form name="form1" method="post" action="">
    Name:<input type="text" name="name">

    <input type="image" src="xxx.gif" align=absMiddle border=0 onclick="this.form.submit()">

    <input type="image" src="xxx.gif" align=absMiddle border=0 onclick="this.form.reset()">
</form>

onClick事件还可以这样写:

onClick="form1.action='link.asp'"

普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type=”image”)的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。

<input type="image" src="xx.gif" onclick="javascript:document.forms['myformName'].reset(); return false;" />

return false; 是防止提交表单。

方式三

<form method="post" name="form2" action="">
    <p><input type="text" name="keyword" /></p>

    <img src="reset.gif" alt="Reset" onclick="javascript:document.forms['form2'].reset();" style="cursor:pointer;" />
</form>
文章目录
  1. 1. 方式一
  2. 2. 方式二
  3. 3. 方式三