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

有時(shí)候?yàn)榱诉_(dá)到比較好的視覺(jué)效果，有人會(huì)使用圖片代替按鈕來(lái)提交或者重置表單數(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'">

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

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

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

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

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

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

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

<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();是將名稱(chēng)為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();是將名稱(chēng)為testForm_2的表單重置。

style="cursor:pointer;"設(shè)置圖片懸停時(shí)，顯示手型光標(biāo)。

兩種方法大同小異，在javascript被禁止的情況下，第二種方法按鈕不會(huì)執(zhí)行任何操作，而第一種方法卻會(huì)執(zhí)行提交操作。

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