網(wǎng)站建設中怎樣用HTML圖片作提交按鈕的方法發(fā)布者：本站     時間：2020-05-16 08:05:20

有時候為了達到比較好的視覺效果，有人會使用圖片代替按鈕來提交或者重置表單數(shù)據(jù)。

<FORMname=RedFormaction=#>

一:

<INPUTname=textfield2>

<INPUTtype=imageheight=19width=53src="xxx.gif"align=absMiddleborder=0name=RedImgonclick="this.form.submit()">

<INPUTtype=imageheight=19width=53src="xxx.gif"align=absMiddleborder=0name=RedImg3onclick="this.form.reset()">

</FORM>

二:

代替submit按鈕的圖片代碼格式是

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

代替reset按鈕的代碼圖片格式是

<ahref="javascript:document.formName.reset();"><imgborder=0src="..."></a>

三:

<form>

<INPUTname=textfield2>

<INPUTtype=imageheight=19width=53src="xxx.gif"align=absMiddleborder=0name=RedImgonClick="frm1.action='link.asp'">

通過onClick="document.form.submit()"來提交表單；用onClick="document.form.reset()"來復位表單，這樣一來，任何一個元素（不僅是圖片）都可以實現(xiàn)提交表單了。

在這樣子的情況下，還可以自定義圖片的長度和寬度等

使用圖片做按鈕的幾種方法和優(yōu)劣

合理的運用圖片，能夠使站點更加豐富多彩，相信有許多喜歡用圖片的設計師都遇到過一個問題：用圖片實現(xiàn)表單(form)的重置(reset)按鈕時，這個按鈕并不能重置表單，相反卻執(zhí)行了提交表單的操作，本文說明了這個問題的原因，并給出了相應的解決方案。

出現(xiàn)上述問題的原因主要是：普通的按鈕是通過類型來區(qū)分的，submit為提交按鈕，reset為重置按鈕，而類型為圖片(type="image")的按鈕，其默認操作是提交表單。因此，如果想用圖片實現(xiàn)重置按鈕，就需要一些額外的設置了。

如果想用圖片代替重置按鈕，可以用下面的方法：

（1）給type為image的input添加onclick事件來實現(xiàn)重置，并通過添加returnfalse來避免默認的提交操作：

<formmethod="post"name="testForm_2"action="">

<p><inputtype="text"name="keyword"/></p>

<inputtype="image"src="send.gif"/>

<inputtype="image"src="reset.gif"onclick="javascript:document.forms['testForm_2'].reset();returnfalse;"/>

</form>

document.forms['testForm_2'].reset();是將名稱為testForm_2的表單重置。

returnfalse;是防止提交表單。

（2）直接用圖片模擬的重置按鈕

<formmethod="post"name="testForm_3"action="">

<p><inputtype="text"name="keyword"/></p>

<inputtype="image"src="send.gif"/>

<imgsrc="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被禁止的情況下，第二種方法按鈕不會執(zhí)行任何操作，而第一種方法卻會執(zhí)行提交操作。

當然，我們也可以直接把樣式交給CSS去處理，用背景圖的方式來實現(xiàn)，但是這樣需要將value的值留空，如果CSS被禁止，那么將會顯示一個沒有文字的按鈕，每個方法都有自己的問題，可以根據(jù)自己的需要來選擇解決方案。