css里面那個form是什么意思？

css里面那個form就是html中的form,也就是你可以定義form的樣式

創(chuàng)新互聯(lián)公司專業(yè)提供成都移動云計算中心服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買成都移動云計算中心服務(wù)，并享受7*24小時金牌售后服務(wù)。

例如:form{color:#ff0000;border:solid

2px

red;}

之類的.

css怎么讓一個form標(biāo)簽水平垂直居中顯示

需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html，輸入問題基礎(chǔ)代碼。

2、在index.html中的style標(biāo)簽中，輸入css代碼：body {text-align:center;}，在script標(biāo)簽中輸入js代碼：

var a = ($(document).height() - $('form').height()) / 2;

$('form').css('margin-top', a + 'px');

3、瀏覽器運(yùn)行index.html頁面，此時form標(biāo)簽成功在頁面中水平垂直居中了。

在form表單屬性面板中的常用設(shè)置中哪一項是對表單應(yīng)用定義好的css樣式

form表單提交數(shù)據(jù)的幾個注意事項：

1.所有獲取用戶輸入的標(biāo)簽都必須在form表單里面

2.action控制著往哪兒提交

3.input\select\textarea 都需要有name屬性

4.提交按鈕input type="submit"

input 系列的type屬性

text 文本框

password 密碼框

radio 單選框

checkbox 復(fù)選框

date 日期

file 文件（可以上傳圖片）

button 普通按鈕，多用JS給它綁定事件

reset 重置按鈕

submit 提交按鈕

textarea 大段文本

再表單中寫css樣式

of course

input type="text" onblur="this.style.borderLeft='1px solid #C1DAD7'"

怎樣將form表單中的數(shù)據(jù)應(yīng)用到css樣式中

1、CSS魔法

CSS，就是大家知道的層疊樣式單，它可以定義頁面元素的外觀，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補(bǔ)白樣式、邊界樣式等等，下面就從這幾個方面出發(fā)，討論怎樣將CSS應(yīng)用到表單中，徹底美化它！

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

字體樣式包括：字體族科(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font- weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這里不詳細(xì)講述，可以參考它的資料。

也許你已經(jīng)注意到，按鈕上的文字不漂亮，其實可以通過CSS字體樣式來解決，同樣地，其它的幾個涉及到文字的表單項，例如，文本框、多行文本框、口令框、下拉選擇框都可以應(yīng)用字體樣式。

為了充分展示這些應(yīng)用，下例特別設(shè)計了幾種樣式，在實際應(yīng)用中，不必這么凌亂，靈活運(yùn)用：

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

分析：

文本框里的文字是加粗的，大小是9pt，字體是宋體，代碼：

＜input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋體; font-size: 12px; font-weight: bold" value="加粗"＞

口令框文字是紅色的，代碼：

＜input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"＞

下拉框文字顏色是紅色的，字體是Verdana，大小是9pt，代碼：

＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞

＜o(jì)ption value="2" selected＞yesky.com＜/option＞

＜o(jì)ption value="1"＞redidea.net＜/option＞

＜/select＞

多行文本框了的字體是Verdana，有下劃線，大小是9pt，代碼：

＜TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right＞underline css style＜/TEXTAREA＞

發(fā)送1和發(fā)送2按鈕的文字不同，是因為發(fā)送1按鈕使用了9pt的宋體文字，所以比較美觀，發(fā)送1按鈕的代碼：

＜input type="submit" name="Submit" value="發(fā)送1" style="font-family:宋體; font-size: 9pt;"＞

小結(jié)：只要我們對字體的樣式熟悉了，就可以靈活多變，不一定要在標(biāo)簽里面使用style來定義，完全可以在＜head＞里定義，或者外部引用CSS文件，用到的時候引用一下就能達(dá)到預(yù)期的效果。?

1.2 背景顏色和圖像樣式的應(yīng)用

有很多時候，網(wǎng)頁由于顏色的搭配，不得不對表單的背景顏色和圖像樣式進(jìn)行設(shè)計，背景顏色利用background-color屬性，背景圖像利用background-image屬性，顏色和圖像同樣能夠得到意想不到的效果。

　樣例13：?表單元素的背景展示?

分析：?

文本框背景是黑色的，字體是白色的，代碼：

＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞

口令框背景是灰色的，代碼：

＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞

單選和復(fù)選按鈕的背景是紅色的，代碼：

＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞

＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞

下拉選擇框的選項是豐富多彩的背景，代碼：

＜select name="select2" size="1"＞

＜o(jì)ption selected style="background-color: #FF0000"＞yesky.com＜/option＞

＜o(jì)ption style="background-color: #0000CC"＞redidea.com＜/option＞

＜o(jì)ption style="background-color: #009900"＞chinabyte.com＜/option＞

＜o(jì)ption style="background-color: #ff33cc"＞sina.com＜/option＞

＜o(jì)ption style="background-color: #999999"＞sohu.com＜/option＞

＜/select＞

多行文本框的背景是一個圖像，代碼：

＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞

submit1按鈕的背景是黃色的，代碼：

＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞

submit2按鈕的背景是一個圖像，代碼：

＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞

小結(jié)：用好background-color屬性和background-image屬性，就可以設(shè)計很出“色”表單了。

1.3 邊框樣式的應(yīng)用?

也許你覺得表單的邊框過于死板，我們能否設(shè)計單線條，或者其它的邊框樣式呢？當(dā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，這里不作詳細(xì)的講述，請參考有關(guān)資料。

　樣例14：?8種邊框形式的展示?

分析：

文本框有8種類型邊框樣式，即border-style，分別展示在本例中，

邊框?qū)挾鹊脑O(shè)置有一個規(guī)律：

border-width: [ thin | medium | thick | ＜長度＞ ]{1,4}

邊框?qū)挾扔靡坏剿膫€值來設(shè)置元素的邊框?qū)挾龋鼈兎謩e被應(yīng)用于上、右、下和左邊框?qū)挾取Ｈ绻唤o出一個值，它被應(yīng)用于所有邊框?qū)挾取Ｈ绻麅蓚€或三個值給出了，省略了的值與對邊相等

例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞

邊框顏色的設(shè)置有一個規(guī)律：

border-colr: ＜顏色＞{1,4}

邊框顏色用一到四個值來設(shè)置元素的邊框顏色。如果四個值都給出了，它們分別被應(yīng)用于上、右、下和左邊框顏色。如果只給出一個值，它被應(yīng)用于所有邊框顏色。如果兩個或三個值給出了，省略了的值與對邊相等。

對于多行文本框以及按鈕，設(shè)置邊框的方法和文本框一樣，不再陳述；

由于下拉選擇框Select不支持邊框的設(shè)置，所以對它設(shè)置是徒勞的；

單選按鈕和復(fù)選按鈕的邊框，設(shè)置的效果不十分協(xié)調(diào)，所以建議不要對它們設(shè)置，不然有“畫蛇添足”之感；

　樣例15：邊框的特殊設(shè)計展示

聰明的讀者一定會想到，如果設(shè)計單邊框，一定更加漂亮，對！下面我們來嘗試以下部分邊框的設(shè)置效果，本例僅僅以Solid和dotted兩種類型的邊框作演示，其它類型的邊框原理相同：?注意：邊框類型的外觀如下：

none ：無邊框。與任何指定的border-width值無關(guān)；

dotted ：點線；

dashed ：虛線；

solid ：實線邊框；

double ：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；

groove ：3D凹槽；

ridge ：邊框突起；

inset ：3D凹邊；

outset ：3D凸邊；

2、圖像魔法

圖像，是網(wǎng)頁的重要元素，能否應(yīng)用到表單中呢？接下來，我們用圖像來改造死板的表單，分兩個部分來探討：用圖像代替按鈕、用背景圖美化表單元素。

2.1 用圖像代替按鈕

由于默認(rèn)的表單按鈕太丑陋，絕大多數(shù)的網(wǎng)站采用了圖像按鈕，那么，我們通過兩個實例來看看怎樣實現(xiàn)的：

樣例16：用圖像代替提交按鈕：

當(dāng)只有一個提交按鈕的時候，可以簡單地實現(xiàn)，不用加事件函數(shù)，代碼是：

＜input type="image" name="..." src="url" width="" height="..." border="..."＞

除了標(biāo)簽改為input type="image"以外，其它的屬性和＜img＞標(biāo)簽的屬性是一樣的，例如：?

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

樣例17：用圖片代替所有的表單按鈕：?注意：

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

＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞

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

a href="javascript:document.formName.reset();"＜img border=0 src="..."＞/a

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

2.2 用背景圖美化表單元素

其實，前面已經(jīng)提到過，用background-image:url()屬性來定義表單元素的背景圖，這里僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網(wǎng)頁的背景來設(shè)置它們。

當(dāng)前文章：form的css樣式,css中form
分享網(wǎng)址：http://chinadenli.net/article1/dsgihod.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、企業(yè)建站、營銷型網(wǎng)站建設(shè)、虛擬主機(jī)、微信公眾號、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)