国产成人不卡-国产成人不卡亚洲精品91-国产成人成人一区二区-国产成人刺激视频在线观看-国产成人的电影在线观看-国产成人福利

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

有時(shí)候?yàn)榱诉_(dá)到比較好的視覺效果，有人會(huì)使用圖片代替按鈕來提交或者重置表單數(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()"來復(fù)位表單，這樣一來，任何一個(gè)元素（不僅是圖片）都可以實(shí)現(xiàn)提交表單了。

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

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

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

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

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

（1）給type為image的input添加onclick事件來實(shí)現(xiàn)重置，并通過添加returnfalse來避免默認(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();是將名稱為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;"設(shè)置圖片懸停時(shí)，顯示手型光標(biāo)。

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

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