html bottom html submit按鈕表單控件與CSS美化

2020-03-24 17:44:51

字體：大中小

供稿：網(wǎng)友

html bottom按鈕html submit按鈕控件html表單按鈕控件-html bottom與html submit按鈕表單控件與CSS美化，介紹form input bottom按鈕和html input submit按鈕基本結(jié)構(gòu)與用法，html按鈕控件bottom和submit區(qū)別，同時DIVCSS5對html按鈕美化布局。

一般提交按鈕使用了html submit和html bottom兩種按鈕控件實現(xiàn)同時可將按鈕設(shè)置CSS樣式美化為時間設(shè)計圖片按鈕，首先DIVCSS5介紹html按鈕基本語法結(jié)構(gòu)與用法，DIVCSS5再對按鈕進行圖片美化布局。

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

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

submit按鈕代碼：

<inputname=""type="submit"value="提交"/

submit按鈕效果截圖

html submit按鈕效果截圖

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

bottom按鈕代碼：

<inputname=""type="button"value="提交"/

bottom按鈕截圖：

html botton按鈕效果截圖

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

type=button 就單純是按鈕功能
type=submit 是發(fā)送表單

但是對于從事WEB UI的人應(yīng)該要注意到，使用submit來提高頁面易用性：
使用submit后，頁面支持鍵盤enter鍵操作，而很多WEB軟件設(shè)計師，可能沒有注意到submit統(tǒng)一.

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

<inputtype="submit"name="b1"value="提交"onClick="bt_submit_onclick()"

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

<inputtype="button"name="b1"value="提交"onClick="bt_submit_onclick()"

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

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

2，button代碼

<formname="form1"method="post"action="http://www.divcss5.com"
<inputtype="button"name="Button"value="按鈕"onClick="submit()"
</form

按鈕截圖

3，按鈕HTML 代碼

<inputtype="button"name="Button"value="Button"
onClick="javascript:windows.location.href="你的url""

三、html submit與bottom按鈕美化css div布局 - TOP

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

1、對html bottom按鈕美化
1）、圖片素材
可將圖片另存為使用

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

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

<!DOCTYPEhtml
<html
<head
<titlebutton按鈕美化在線演示-www.divcss5.com</title
<!--www.divcss5.com--
<style
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}
</style
</head
<body
<p
<formid="form1"name="form1"method=""action="http://www.divcss5.com/"target="_blank"
<div
<inputtype="button"class="btn"value="按鈕"onmouseover="this.style.backgroundPosition='left-36px'"
onmouseout="this.style.backgroundPosition='lefttop'"/
</div
</form
</p
</body
</html

3）、bottom效果截圖

bottom美化效果截圖

4）、在線演示：查看案例

5）打包下載（包括html文件+圖片素材）

立即下載（6KB）

2、對html submit按鈕美化
1）、圖片素材
可將圖片另存為使用

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

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

<!DOCTYPEhtml
<html
<head
<titlesubmit按鈕美化在線演示-www.divcss5.com</title
<!--www.divcss5.com--
<style
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-repeatlefttop;color:#FFF;}
</style
</head
<body
<p
<formid="form1"name="form1"method=""action="http://www.divcss5.com/"target="_blank"
<div
<inputtype="submit"class="btns"onmouseover="this.style.backgroundPosition='left-40px'"
onmouseout="this.style.backgroundPosition='lefttop'"value="提交"/
</div
</form
</p
</body
</html