玩轉表單之花樣表單
表單外觀的美化
很多時候，我們僅僅為了實現資料採集這個功能來使用表單，常看到的表單都是「千人一面」、毫無生氣，本專題嘗試著來改變這一現象，試圖賦予表單乙個豐富多彩的面貌。
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＞標籤的屬性是一樣的，例如：
注意：
2.2 用背景圖美化表單元素
其實，前面已經提到過，用background-image:url()屬性來定義表單元素的背景圖，這裡僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網頁的背景來設定它們。
樣例18：背景圖的設定
樣例15：邊框的特殊設計展示
聰明的讀者一定會想到，如果設計單邊框，一定更加漂亮，對！下面我們來嘗試以下部分邊框的設定效果，本例僅僅以solid和dotted兩種型別的邊框作演示，其它型別的邊框原理相同：
注意：邊框型別的外觀如下：
2、影象魔法
影象，是網頁的重要元素，能否應用到表單中呢？接下來，我們用影象來改造死板的表單，分兩個部分來**：用影象代替按鈕、用背景圖美化表單元素。
2.1 用影象代替按鈕
由於預設的表單按鈕太醜陋，絕大多數的**採用了影象按鈕，那麼，我們通過兩個例項來看看怎樣實現的：
樣例16：用影象代替提交按鈕：
當只有乙個提交按鈕的時候，可以簡單地實現，不用加事件函式，**是：
＜input type="image" name="..." src="url" width="" height="..." border="..."＞
除了標籤改為input type="image"以外，其它的屬性和＜img＞標籤的屬性是一樣的，例如：
注意：
2.2 用背景圖美化表單元素
其實，前面已經提到過，用background-image:url()屬性來定義表單元素的背景圖，這裡僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網頁的背景來設定它們。
樣例18：背景圖的設定
HTML 表單之表單的屬性
在網頁製作過程中，時常會用到表單。form雙標籤被用來建立乙個表單，在form雙標籤中可以設定表單的基本屬性。真正處理表單的資料指令碼或程式在action屬性裡，這個值可以是程式或指令碼的乙個完整url。語法 action 表單的處理程式 form 語法中，表單的處理程式定義的表單是要提交的位址，也...
django 表單之模型表單（三）
models.py forms.py views.py get index.html views.py post home.html urls.py from django.urls import path from import views urlpatterns path views.index...
Angular 響應式表單之表單分組
表單提交，表單全部校驗成功才能提交，當表單校驗錯誤，表單邊框變紅，同時有錯誤提示資訊，有重置功能 git倉庫 在分析 之前，首先明確 formcontrol formcontrol formcontrolname formgroup formgroup formgroupname formarray...