表單需要有一個穩(wěn)固的視覺結(jié)構(gòu),完整的層次組成元素(輸入框、提示文本、提交按鈕等) ,強(qiáng)大的技術(shù)和功能(Ajax)使表單更加易于使用并看上去更加漂亮。下面是一些Ajax效果的CSS表單,可以用來美化你的網(wǎng)站表單。
樣式化表單
1) Uni Form
一個規(guī)范的表單,結(jié)構(gòu)良好,高度可定制,交互友好,非常實用。

2) CSS-Only, Table-less Forms這是一個很好的CSS表單設(shè)計實例,使用了表格。它良好運(yùn)行在 IE6/Firefox1.0+/Opeara v8.0和Safari ,盡管可能在不同的瀏覽器下有細(xì)微的出入,但基本不影響使用。

3) Tableless Forms一個非常漂亮的表單,例如在輸入框的最左邊有一個小圖形,這樣看起來挺精致漂亮。
Demo

4) A form with style 如何把一個難看的表單通過CSS樣式化讓它好看起來。

樣式化表單元素
5) Niceforms 1.0
這是一個腳本,取代常用的表單元素,其中對復(fù)選框和下拉選擇框的改非常值得一用,突中顯示當(dāng)前選擇,這樣看上去很友好。

6) Fancy Form
Fancyform是一個功能強(qiáng)大的多選框替換腳本,極具靈活性,改變了HTML表單元素的外觀和功能。它不僅便于使用,并且支持各種不同的瀏覽器。

7) Styling form controls with CSS, revisited
使用不同的CSS規(guī)則定制出224種不同的畫面顯示效果的表單。

8 ) Showing Good Form - 用語義標(biāo)記達(dá)到的比較簡潔的CSS表單,有點像表格哦。呵呵。
Demo :

9) Styling the Button Element with Sliding Doors
一個滑動門技術(shù)和按鈕美化的示例。

實用且兼容各大瀏覽器的表單
10) Prettier Accessible Forms
Demo :

11) Check it, don’t select it
Fancy Demo :

12) Sensible Forms
網(wǎng)站可用性-Roger Hudson提供了一個非常有用的教程,就如何創(chuàng)建一種良好布局的表單。
Ajax表單
13) AJAX Contact Form
Dustin Diaz設(shè)計的一個出色的Ajax聯(lián)系表單,使用了javascript.
Demo :

14) AutoSuggest: An AJAX auto-complete text field -
這個表單比較特別的地方在于,它為文本輸入框增加了一個彈出下拉菜單中的文本建議。用戶可直接點擊選擇其中的文本建議,支持Tab鍵的選擇。
Demo :

15) FancyUpload using Mootools - 基于Mootools構(gòu)建的一個漂亮的文件上傳表單。
Demo :

16) jQuery Form Plugin
使用AJAX技術(shù)讓您輕松管理HTML表單,以方便從表單元素中搜集資料,確定如何來管理提交過程,讓你對如何提交數(shù)據(jù)能有充分的控制權(quán)。
17) Cforms
這是一個Ajax的Wordpress聯(lián)系表單插件,可以為你的博客用戶聯(lián)系你時提供更多的方便。

優(yōu)秀的表單驗證
18 ) Really Easy Field validation with Prototype - 這是一個非常簡單的表單驗證腳本。
Demo :

19) Live Validation
這是一個很小巧的開放源代碼的Javascript效果,當(dāng)用戶在提交表單時,提供實時的表單驗證。

20) Ajax form validation
學(xué)習(xí)如何使用Ajax技術(shù),以便處理和校驗?zāi)愕谋韱巍?/p>

21) fValidator
fValidator是一個開源免費的Javascript腳本,當(dāng)用戶在提交表單時,提供實時的表單驗證。

表單提示信息
22) Validation Hints for your form
這篇文章將解釋如何使用JavaScript和CSS達(dá)到輸入提示的效果。

23) Form Help without Popups
一個新鮮的技術(shù),為你的用戶在輸入表單時提供幫助信息,用不使用彈出窗口。

隱藏表單域
24) Trimming form fields
利用Javascript,DOM和CSS,讓用戶自主選擇是否選擇哪些表單內(nèi)容。
Demo :

創(chuàng)建表單的一些技巧
25) Tips For Creating Great Web Forms
這是一篇對所有設(shè)計師來說都值得一學(xué)的表單設(shè)計技巧。