使用css美化html表單控制項詳細範例(表單美化)_HTML/Xhtml_網頁製作

一、html submit與bottom按鈕基本語法結構

1、html submit按鈕

在input標籤裡設定type="submit"即可設定此表單控制項為按鈕。

submit按鈕碼：

複製程式碼

程式碼如下:

submit按鈕效果截圖

html submit按鈕效果截圖

2、html bottom按鈕

在input標籤裡設定type="bottom"也是即可設定此表單控制項為按鈕。

bottom按鈕程式碼：

複製程式碼

程式碼如下:

程式碼如下:

bottom按鈕截圖：

html botton按鈕效果截圖

二、html submit與bottom按鈕差異

type=button 就單純是按鈕功能

type=submit 是發送表單

但是對於從事WEB UI的人應該要注意到，使用submit來提高頁面易用性：

使用submit後，頁面支援鍵盤enter鍵操作，而許多WEB軟體設計師，可能沒注意到submit統一.

用button後往往頁面不支援enter鍵了。所以需要支援enter鍵，必須設定個submit，預設enter鍵對頁面第一個submit進行操作。

複製程式碼

程式碼如下:

執行完onClick，轉到action。可以自動提交不需要onClick。所以說onclick這裡可以不要。

複製程式碼

程式碼如下:

執行完onClick，跳轉檔案在js檔案裡控制。提交需要onClick。

例如：

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

2，button程式碼

複製程式碼

程式碼如下：

程式碼如下：http://www.css.com">

按鈕截圖

3，按鈕HTML 程式碼

複製程式碼

程式碼如下:

程式碼如下:

程式碼如下:

程式碼input type="button" name="Button" value="Button"

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

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

首先我們準備好按鈕美化的按鈕圖片，並對input submit或bottom按鈕控制項內添加class樣式即可，設定其按鈕背景為美化圖片，設定好邊框為零，寬度和高度。

1、對html bottom鈕美化

1）、圖片素材

可將圖片另存為使用

美化圖片按鈕素材

2）、對應完整HTML原始碼：

複製程式碼程式碼如下:

html{寬度:100%;高度:100%;}
body{背景:#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}
輸入,button{font-family:"Arial","Tahoma","微軟雅黑","雅黑";border:0;
垂直對齊：中；邊距：8px；行高：18px；字體大小：18px}
.btn{寬度：140px；高度：36px；行高：18px；字體大小：18px;
背景：url("bg26px；字體大小：18px;
背景：url("bg26px；字體大小：18px;
背景：url("bg26px .jpg")no-repeatlefttop;顏色：#FFF;padding-bottom:4px}


;

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

onmouseout="this.style.backgroundPosition='lefttop'"/>

3）、底部效果截圖

底部美化效果截圖

2、對html提交按鈕美化

1）、圖片素材

可將圖片另存以供使用

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

2）、回复完整HTML源代碼：

複製代碼

代碼如下：








html { 寬度：100%;高度：100%; }
正文{ 背景： #fff;字體大小：18px； font-family:"Arial", "Tahoma", "微軟雅黑", "雅黑";
line-height:18px;填充：0；保證金：0；文字對齊：居中； }
div { 填充：18px }
img { 邊框：0px;垂直對齊：中間；內邊距：0px；邊距：0px; }
輸入、按鈕{ font-family: "Arial", "Tahoma", "微軟雅黑", "雅黑";邊框：0；
垂直對齊：中間；邊距：8px；行高：18px；字體大小：18px }
. btns { 寬度：143px;高度：40px；背景：url("bg11.jpg") 左上不重複；顏色：#FFF； }
樣式>
頭>

http://www .css。 40px'"
onmouseout="this.style.backgroundPosition='left top'" value= "提交" />

表格>

身體>

3）、投稿按鈕效果截圖

html提交美化後效果截圖