Form表單中的各種樣式

2021-07-10 04:20:40 字數 2062 閱讀 9070

很多時候,我們僅僅為了實現資料採集這個功能來使用表單,常看到的表單都是「千人一面」、毫無生氣,本專題嘗試著來改變這一現象,試圖賦予表單乙個豐富多彩的面貌。

表單的外觀,也是最為直接的花樣,可以通過改變它來實現特效,本文分兩個出發點來講述:css魔法和影象魔法。

1、css魔法

css,就是大家知道的層疊樣式單,它可以定義頁面元素的外觀,包括字型樣式、背景顏色和影象樣式、邊框樣式、補白樣式、邊界樣式等等,下面就從這幾個方面出發,討論怎樣將css應用到表單中,徹底美化它!

1.1 字型樣式的應用

字型樣式包括:字型族科(font-family)、字型風格(font-style)、字型變形(font-variant)、字型加粗(font- weight)、字型大小(font-size)、字型(font),具體的定義方法,在這裡不詳細講述,可以參考它的資料。

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

為了充分展示這些應用,下例特別設計了幾種樣式,在實際應用中,不必這麼凌亂,靈活運用:

樣例12:

表單元素的字型樣式展示 

分析:

小結:只要我們對字型的樣式熟悉了,就可以靈活多變,不一定要在標籤裡面使用style來定義,完全可以在<head>裡定義,或者外部引用css檔案,用到的時候引用一下就能達到預期的效果。 

1.2 背景顏色和影象樣式的應用

有很多時候,網頁由於顏色的搭配,不得不對表單的背景顏色和影象樣式進行設計,背景顏色利用background-color屬性,背景影象利用background-image屬性,顏色和影象同樣能夠得到意想不到的效果。

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

分析: 

小結:用好background-color屬性和background-image屬性,就可以設計很出「色」表單了。

1.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,這裡不作詳細的講述,請參考有關資料。

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

分析:

樣例15:邊框的特殊設計展示

聰明的讀者一定會想到,如果設計單邊框,一定更加漂亮,對!下面我們來嘗試以下部分邊框的設定效果,本例僅僅以solid和dotted兩種型別的邊框作演示,其它型別的邊框原理相同: 

注意:邊框型別的外觀如下:

2、影象魔法

影象,是網頁的重要元素,能否應用到表單中呢?接下來,我們用影象來改造死板的表單,分兩個部分來**:用影象代替按鈕、用背景圖美化表單元素。

2.1 用影象代替按鈕

由於預設的表單按鈕太醜陋,絕大多數的**採用了影象按鈕,那麼,我們通過兩個例項來看看怎樣實現的:

樣例16:用影象代替提交按鈕:

當只有乙個提交按鈕的時候,可以簡單地實現,不用加事件函式,**是:

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

除了標籤改為input type="image"以外,其它的屬性和<img>標籤的屬性是一樣的,例如: 

是不是只要用就可以代替所有的按鈕呢?是的,不過,不是上面這麼簡單了,必須加上事件函式,不然的話,都是提交按鈕,不能完成復位等功能,看看下面的例子就知道了:

樣例17:用代替所有的表單按鈕: 注意:

2.2 用背景圖美化表單元素

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

form 表單 跟 CSS樣式

form表單提交資料的幾個注意事項 1.所有獲取使用者輸入的標籤都必須在form表單裡面 2.action控制著往哪兒提交 3.input select textarea 都需要有name屬性 4.提交按鈕 input 系列的type屬性 text 文字框 password 密碼框 radio 單選...

form表單中的標籤

1 文字域 當使用者要在表單中鍵入字母 數字等內容時,就會用到文字域。2 單選按鈕 當使用者從若干給定的的選擇中選取其一時,就會用到單選框。3 核取方塊 當使用者需要從若干給定的選擇中選取乙個或若干選項時,就會用到核取方塊。2 下拉列表 select 元素可建立單選或多選選單。3 文字框 標籤定義多...

Django中 form表單的使用

from django import forms 第一步 首先在models.py中定義乙個表單模型 class remarkform forms.form subject forms.charfield max length 100 label mail forms.emailfield labe...