網(wǎng)站建設(shè)中怎樣用HTML圖片作提交按鈕的方法

有時候為了達到比較好的視覺效果，有人會使用圖片代替按鈕來提交或者重置表單數(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ù)位表單，這樣一來，任何一個元素（不僅是圖片）都可以實現(xiàn)提交表單了。

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

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

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

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

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

（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;"設(shè)置圖片懸停時，顯示手型光標。

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

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

成都做網(wǎng)站、成都網(wǎng)站設(shè)計服務(wù)團隊是一支充滿著熱情的團隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標準與要求，同時竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個網(wǎng)站當做一個產(chǎn)品來開發(fā)，精雕細琢，追求一名工匠心中的細致，我們更用心！

當前題目：網(wǎng)站建設(shè)中怎樣用HTML圖片作提交按鈕的方法
轉(zhuǎn)載注明：http://muchs.cn/article38/esgdsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站維護、品牌網(wǎng)站建設(shè)、微信小程序、網(wǎng)站營銷、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)