一、html submit與bottom按鈕基本語法結(jié)構(gòu)

1、html submit按鈕

在input標簽里設(shè)置type="submit"即可設(shè)置此表單控件為按鈕。

submit按鈕代碼：

復(fù)制代碼代碼如下:

submit按鈕效果截圖

html submit按鈕效果截圖

2、html bottom按鈕

在input標簽里設(shè)置type="bottom"也是即可設(shè)置此表單控件為按鈕。

bottom按鈕代碼：

復(fù)制代碼代碼如下:

bottom按鈕截圖：

html botton按鈕效果截圖

二、html submit與bottom按鈕區(qū)別

type=button 就單純是按鈕功能

type=submit 是發(fā)送表單

但是對于從事WEB UI的人應(yīng)該要注意到，使用submit來提高頁面易用性：

使用submit后，頁面支持鍵盤enter鍵操作，而很多WEB軟件設(shè)計師，可能沒有注意到submit統(tǒng)一.

用button后往往頁面不支持enter鍵了。所以需要支持enter鍵，必須要設(shè)置個submit，默認enter鍵對頁面第一個submit進行操作。

復(fù)制代碼代碼如下:

執(zhí)行完onClick，轉(zhuǎn)到action。可以自動提交不需要onClick。所以說onclick這里可以不要。

復(fù)制代碼代碼如下:

執(zhí)行完onClick，跳轉(zhuǎn)文件在 js文件里控制。提交需要onClick。

比如：

1，οnclick="form1.action='a.jsp';form1.submit();" 這樣就實現(xiàn)了submit的功能了。

2，button代碼

復(fù)制代碼代碼如下:

http://www.css.com">

按鈕截圖

3，按鈕HTML 代碼

復(fù)制代碼代碼如下:

onClick="javascript:windows.location.href="你的url"">

三、html submit與bottom按鈕美化css p布局

首先我們準備好按鈕美化的按鈕圖片，并對input submit或bottom按鈕控件內(nèi)添加class樣式即可，設(shè)置其按鈕背景為美化圖片，設(shè)置好邊框為零，寬度和高度。

1、對html bottom按鈕美化

1)、圖片素材

可將圖片另存為使用

美化圖片按鈕素材

2)、對應(yīng)完整HTML源代碼：

復(fù)制代碼代碼如下:

button按鈕美化在線演示-www.css.com

http://www.css.com/"target="_blank">

οnmοuseοut="this.style.backgroundPosition='lefttop'"/>

3)、bottom效果截圖

bottom美化效果截圖

2、對html submit按鈕美化

1)、圖片素材

可將圖片另存為使用

按鈕圖片素材 鼠標右鍵另存為使用

2)、對應(yīng)完整HTML源代碼：

復(fù)制代碼代碼如下:

submit按鈕美化 在線演示-www.css.com

http://www.css.com/" target="_blank">

οnmοuseοut="this.style.backgroundPosition='left top'" value="提交" />

3)、submit按鈕效果截圖

html submit美化后效果截圖

本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！

總結(jié)

以上是生活随笔為你收集整理的php表单美化,使用css美化html表单控件详细示例(表单美化)_HTML/Xhtml_网页制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。