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

1、html submit按鈕

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

submit按鈕代碼：

submit按鈕效果截圖

html submit按鈕效果截圖

2、html bottom按鈕

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

bottom按鈕代碼：

bottom按鈕截圖：

html botton按鈕效果截圖

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

type=button 就單純是按鈕功能

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

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

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

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

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

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

比如：

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

2，button代碼

http://www.css.com">

按鈕截圖

3，按鈕HTML 代碼

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

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

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

1、對(duì)html bottom按鈕美化

1)、圖片素材

可將圖片另存為使用

美化圖片按鈕素材

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

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

html{width:100%;height:100%;}

body{background:#fff;font-size:18px;font-family:"Arial","Tahoma","微軟雅黑","雅黑";

line-height:18px;padding:0px;margin:0px;text-align:center}

div{padding:18px}

img{border:0px;vertical-align:middle;padding:0;margin:0}

input,button{font-family:"Arial","Tahoma","微軟雅黑","雅黑";border:0;

vertical-align:middle;margin:8px;line-height:18px;font-size:18px}

.btn{width:140px;height:36px;line-height:18px;font-size:18px;

background:url("bg26.jpg")no-repeatlefttop;color:#FFF;padding-bottom:4px}

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

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

3)、bottom效果截圖

bottom美化效果截圖

2、對(duì)html submit按鈕美化

1)、圖片素材

可將圖片另存為使用

按鈕圖片素材 鼠標(biāo)右鍵另存為使用

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

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

html { width:100%; height:100%; }

body { background:#fff; font-size:18px; font-family:"Arial", "Tahoma", "微軟雅黑", "雅黑";

line-height:18px; padding:0; margin:0; text-align:center; }

div { padding:18px }

img { border:0px; vertical-align:middle; padding:0px; margin:0px; }

input, button { font-family:"Arial", "Tahoma", "微軟雅黑", "雅黑"; border:0;

vertical-align:middle; margin:8px; line-height:18px; font-size:18px }

.btns { width:143px; height:40px; background:url("bg11.jpg") no-repeat left top; color:#FFF; }

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

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

3)、submit按鈕效果截圖

html submit美化后效果截圖

總結(jié)

以上是生活随笔為你收集整理的html表单下拉美化教程,使用css美化html表单控件详细示例(表单美化)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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