表單樣式大全

相信大家都知道，在設計網頁的時候不免都會用到表單，那么表單的樣式你們知道多少呢？今天本站通過整理，搜集成表單樣式大全，讓大家在設計網頁的時候得心應手，下面本站小編將詳細給大家講解表單樣式大全的具體內容：

表單樣式大全一、CSS魔法

層疊樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標志的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。

1、字體樣式的應用

字體樣式包括：字體(font-family)、字體風格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)�？梢岳�用字體樣式設置按鈕的文字、文本框、多行文本框、口令框、下拉文本框。

例子：表單元素的字體樣式展示

文本框里的文字是加粗的，大小是9pt，字體是宋體<br>
<input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋體; 
font-size: 12px; font-weight: bold" value="加粗">
 
<br>口令框文字是紅色的<br>
<input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" 
size="8" maxlength="8">
 
<br>下拉框文字顏色是紅色的，字體是Verdana，大小是9pt<br>
<select name="select" size="1" style="font-family:Verdana,Arial; 
font-size: 9pt; color: #FF0000">
<option value="2" selected>yesky.com</option>
<option value="1">redidea.net</option>
</select>
 
<br>多行文本框了的字體是Verdana，有下劃線，大小是9pt<br>
<br>發送1和發送2按鈕的文字不同，是因為發送1按鈕使用了9pt的宋體文字，所以比較美觀<br>
<input type="submit" name="Submit" value="發送1" 
style="font-family:宋體; font-size:9pt;">
<input type="submit" name="Submit" value="發送2" ><br>
<textarea name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; 
font-size: 9pt; color: #000099; text-decoration: underline" align=right>

2、背景顏色和圖像樣式的應用

背景顏色利用background-color屬性，背景圖像利用background-image屬性。

例子：表單元素的背景展示

文本框背景是黑色的，字體是白色的<br>
<input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; 
background-color: #000000">
 
<br>口令框背景是灰色的<br>
<input type="password" name="RedFld3" size="10" maxlength="10" 
style="background-color: #999999">
 
<br>單選和復選按鈕的背景是紅色的<br>
<input type="checkbox" name="checkbox" value="checkbox" 
style="background-color: #FF0000">
<input type="radio" name="radiobutton" value="radiobutton" 
style="background-color: #FF0000">
 
<br>下拉選擇框的選項是豐富多彩的背景<br>
<select name="select2" size="1">
<option selected style="background-color: #FF0000">yesky.com</option>
<option style="background-color: #0000CC">xue51.com</option>
<option style="background-color: #009900">www.xue51.com</option>
<option style="background-color: #ff33cc">sina.com</option>
<option style="background-color: #999999">sohu.com</option>
</select> 
<br>多行文本框的背景是一個圖像
 
<br>submit1按鈕的背景是黃色的<br>
<input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900">
 
<br>submit2按鈕的背景是一個圖像<br>
<input type="submit" name="Submit22" value="Submit2" 
style="background-image: url(本站.gif)"><br>
<textarea name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" 
style="background-image: url(本站.gif)">

3、邊框樣式的應用

和邊框有關的屬性有：邊框式樣border-style、上邊框border-top、右邊框border-right、下邊框border-bottom、左邊框border-left、邊框顏色border-colr、邊框寬度 border-width、上邊框寬度border-top-width、右邊框寬度border-right-width、下邊框寬度border-bottom-width、左邊框寬度border-left-width、邊框 border。

例子：8種邊框樣式的展示

<input style="border-right: #006600 1px dotted; border-top: #006600 1px dotted; 
border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" size=10 
value=dotted name=RedF>

<input style="border-right:3px dashed; border-top:1px dashed; border-left:3px dashed; 
border-bottom: 1px dashed" size=10 value=dashed name=RedF2>
 
<input style="border-right:3px double; border-top:3px double; border-left:3px double; 
border-bottom: 3px double" size=10 value=double name=RedF3>
 
<input style="border-right: 2px groove; border-top:2px groove; border-left:2px groove; 
border-bottom: 2px groove" size=10 value=groove name=RedF4> <br>

<input style="border-right: 3px inset; border-top: 3px inset; border-left:3px inset; 
border-bottom: 3px inset" size=10 value=inset name=RedF5>
 
<input style="border-right:2px outset; border-top:2px outset; border-left:2px outset; 
border-bottom: 2px outset" size=10 value=outset name=RedF6>


<input style="border-right:3px ridge; border-top:3px ridge; border-left:3px ridge; 
border-bottom: 3px ridge" size=10 value=ridge name=RedF7>
 
<input style="border-right:1px solid; border-top:1px solid; border-left:1px solid; 
border-bottom: 1px solid" size=10 value=solid name=RedF8> <br>

<input style="border-right:#006600 1px dotted; border-top:#006600 1px dotted; 
border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" 
type=checkbox value=checkbox name=checkbox2> 復選

<input style="border-right: #006600 1px dotted; border-top: #006600 1px dotted; 
border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" type=radio 
value=radiobutton name=radiobutton> 單選
 
<input style="border-right:3px double; border-top:3px double; border-left:3px double; 
border-bottom: 3px double" type=submit value=發送 name=Submit4>

<input style="border-right:3px dashed; border-top:1px dashed; border-left:3px dashed; 
border-bottom: 1px dashed" type=submit value=取消 name=Submit23> <br>
<textarea style="border-right: #006600 1px dotted; border-top: #006600 1px dotted; 
border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" name=RedF9 rows=3 
wrap=VIRTUAL cols=30>

4、邊框特殊設計應用

利用邊框顏色：border-color、邊框類型border-style設置。

例子：邊框特殊設計展示

<input style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; 
BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; 
BACKGROUND-COLOR: #ffffff" size=25 value=文本框：只有下邊框 name=myRed>

<input style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; 
BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; 
BACKGROUND-COLOR: #ffffff" type=button value=按鈕1 name=Button><br><br>

<input style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; 
BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; 
BACKGROUND-COLOR: #ffffff" size=25 value=文本框：上下邊框顏色不同 name=myRed2>

<input style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; 
BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; 
BACKGROUND-COLOR: #ffffff" type=button value=按鈕2 name=Submit24><br><br>

<input style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; 
BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; 
BACKGROUND-COLOR: #ffffff" size=25 value=文本框：邊框、顏色不同 name=myRed3>

<input style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; 
BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; 
BACKGROUND-COLOR: #ffffff" type=button value=按鈕3 name=Submit32>

注意：

邊框類型的外框如下：none：無邊框。與任何指定的border-width值無關；dotted：點線；dashed：虛線；solid：實線邊框；double：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；groove：3D凹槽；ridge：邊框突起；inset：3D凹邊；outset：3D凸邊。

表單樣式大全二、圖像魔法

1、用圖像代替按鈕

<input type="image" name="..." src="url" width="" height="..." border="...">

例子：用圖像代替按鈕

<input type=image height=19 width=53 src="本站.gif" align=absMiddle 
border=0 name=imageField>

是不是只要用圖片就可以代替所有的按鈕呢？是的，不過，不是上面這么簡單了，必須加上事件函數，不然的話，圖片都是提交按鈕，不能完成復位等功能，看看下面的例子就知道了：

<input onclick=this.form.submit() type=image height=19 width=53 
src="本站.gif" align=absMiddle border=0 name=RedImg>
<input onclick=this.form.reset() type=image height=19 width=53 
src="本站.gif" align=absMiddle border=0 name=RedImg3>

注意：

代替submit按鈕的圖片代碼格式是：

<input type="image" name="..." src="..." onClick="document.formName.submit()">

代替reset按鈕的代碼圖片格式是：

<input type="image" name="..." src="..." onClick="document.formName.reset()">

注：這里的formName是表單的name屬性值。

2、用背景圖片美化表單元素

利用背景圖片：background-image:url()

例子：背景圖片美化效果展示

<input style="background-image: url(本站.gif)" name=RedBack> 

<input style="background-image: url(本站.gif)" 
type=checkbox value=checkbox name=checkbox3> 

<input style="background-image: url(本站.gif)" 
type=radio value=radiobutton name=radiobutton> 

<select style="background-image: url(本站.gif)" size=1 name=select3> 

<option selected>www.xue51.com</option> 

<option>xue51.com</option> 

<option>www.xue51.com</option>

</select> 

<br>

<input style="background-image: url(本站.gif)" type=submit value=Submit name=Submit5> 

<input style="background-image: url(本站.gif)" type=reset value=Reset name=Submit25>

<br>

<textarea style="background-image: url(本站.gif)" name=RedBacka rows=3 wrap=VIRTUAL>

推薦閱讀：網頁特效：5款經典用于網站導航的下拉菜單

以上就是有關表單樣式大全的相關內容，希望對大家有所幫助！