表單樣式大全

相信大家都知道，在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候不免都會(huì)用到表單，那么表單的樣式你們知道多少呢？今天學(xué)無(wú)憂通過(guò)整理，搜集成表單樣式大全，讓大家在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候得心應(yīng)手，下面學(xué)無(wú)憂小編將詳細(xì)給大家講解表單樣式大全的具體內(nèi)容：

表單樣式大全一、CSS魔法

層疊樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。

1、字體樣式的應(yīng)用

字體樣式包括：字體(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)。可以利用字體樣式設(shè)置按鈕的文字、文本框、多行文本框、口令框、下拉文本框。

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

文本框里的文字是加粗的，大小是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>發(fā)送1和發(fā)送2按鈕的文字不同，是因?yàn)榘l(fā)送1按鈕使用了9pt的宋體文字，所以比較美觀<br>
<input type="submit" name="Submit" value="發(fā)送1" 
style="font-family:宋體; font-size:9pt;">
<input type="submit" name="Submit" value="發(fā)送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、背景顏色和圖像樣式的應(yīng)用

背景顏色利用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>單選和復(fù)選按鈕的背景是紅色的<br>
<input type="checkbox" name="checkbox" value="checkbox" 
style="background-color: #FF0000">
<input type="radio" name="radiobutton" value="radiobutton" 
style="background-color: #FF0000">
 
<br>下拉選擇框的選項(xiàng)是豐富多彩的背景<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.wangbatian.cn</option>
<option style="background-color: #ff33cc">sina.com</option>
<option style="background-color: #999999">sohu.com</option>
</select> 
<br>多行文本框的背景是一個(gè)圖像
 
<br>submit1按鈕的背景是黃色的<br>
<input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900">
 
<br>submit2按鈕的背景是一個(gè)圖像<br>
<input type="submit" name="Submit22" value="Submit2" 
style="background-image: url(學(xué)無(wú)憂.gif)"><br>
<textarea name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" 
style="background-image: url(學(xué)無(wú)憂.gif)">

3、邊框樣式的應(yīng)用

和邊框有關(guān)的屬性有：邊框式樣border-style、上邊框border-top、右邊框border-right、下邊框border-bottom、左邊框border-left、邊框顏色border-colr、邊框?qū)挾?border-width、上邊框?qū)挾萣order-top-width、右邊框?qū)挾萣order-right-width、下邊框?qū)挾萣order-bottom-width、左邊框?qū)挾萣order-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> 復(fù)選

<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=發(fā)送 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、邊框特殊設(shè)計(jì)應(yīng)用

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

例子：邊框特殊設(shè)計(jì)展示

<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：無(wú)邊框。與任何指定的border-width值無(wú)關(guān)；dotted：點(diǎn)線；dashed：虛線；solid：實(shí)線邊框；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="學(xué)無(wú)憂.gif" align=absMiddle 
border=0 name=imageField>

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

<input onclick=this.form.submit() type=image height=19 width=53 
src="學(xué)無(wú)憂.gif" align=absMiddle border=0 name=RedImg>
<input onclick=this.form.reset() type=image height=19 width=53 
src="學(xué)無(wú)憂.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(學(xué)無(wú)憂.gif)" name=RedBack> 

<input style="background-image: url(學(xué)無(wú)憂.gif)" 
type=checkbox value=checkbox name=checkbox3> 

<input style="background-image: url(學(xué)無(wú)憂.gif)" 
type=radio value=radiobutton name=radiobutton> 

<select style="background-image: url(學(xué)無(wú)憂.gif)" size=1 name=select3> 

<option selected>www.wangbatian.cn</option> 

<option>xue51.com</option> 

<option>www.wangbatian.cn</option>

</select> 

<br>

<input style="background-image: url(學(xué)無(wú)憂.gif)" type=submit value=Submit name=Submit5> 

<input style="background-image: url(學(xué)無(wú)憂.gif)" type=reset value=Reset name=Submit25>

<br>

<textarea style="background-image: url(學(xué)無(wú)憂.gif)" name=RedBacka rows=3 wrap=VIRTUAL>

推薦閱讀：網(wǎng)頁(yè)特效：5款經(jīng)典用于網(wǎng)站導(dǎo)航的下拉菜單

以上就是有關(guān)表單樣式大全的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！