表單在網(wǎng)頁中扮演著十分重要的作用，從用戶登錄注冊到留言評論，都離不開表單。一個設計精美方便的表單，可以提高用戶交互的質(zhì)量。

下面給大家介紹10款設計簡單但是外觀精美的jQuery和CSS3表單，希望對大家有所幫助。

1、發(fā)光的HTML5表單



這是一款非常漂亮的HTML5登錄表單，當表單獲取焦點時，表單四周就會呈現(xiàn)出發(fā)光動畫的效果，并不斷地進行顏色漸變；當表單失去焦點時，停止發(fā)光。其中顏色漸變的動畫只有基于webkit的瀏覽器才有效果，比如chrome和safari。

2、帶滑動條、日歷、取色器等常用功能的HTML5表單



這是一款非常經(jīng)典的CSS3&HTML5表單，我之所以稱之為經(jīng)典，是因為在這個表單中集成了不少我們開發(fā)中常用的控件，比如Slider 滑動條、數(shù)字框、日歷、取色器、url地址框、email地址框，不像有些CSS3表單，純粹是外觀上比較迷人但功能卻不是很豐富。就外觀上而言，這個 CSS3表單也非常不錯，還算大氣。

這個CSS3表單主要用到了Webforms2, Modernizr, jQuery UI以及其他的jQuery插件。

3、HTML5 CSS3表單



4、jQuery和CSS3的多步驟注冊表單



這是一款基于jQuery和CSS3實現(xiàn)的多步驟注冊表單，當用戶注冊時，該表單將引導用戶分步完成注冊信息的填寫并作注冊信息的合法性驗證，每一個注冊環(huán)節(jié)都會在下面的進度條中體現(xiàn)出來，在IE8及以上瀏覽器中測試通過，IE6應該也支持的，大家可以幫忙試試。

5、精美實用的CSS3留言表單



在很多網(wǎng)站中，我們經(jīng)常會用到留言功能，留言一般會讓用戶填寫昵稱、電子郵箱、網(wǎng)站和留言信息，如何設計一款漂亮的留言表單？這里提供5個比較精美的CSS3留言表單供大家參考。

6、HTML5 CSS3聯(lián)系表單



7、HTML5和CSS3登錄表單



這是一款基于HTML5和CSS3的登錄表單，非常簡潔、美觀。該HTML5表單所用到的HTML 5的特性：

• placeholder – 輸入框的簡短提示，當該輸入框獲得輸入焦點時，該提示信息自動消失
• required – 指定該輸入元素是否必須提供
• autofocus – 指定輸入框是否在頁面加載完畢自動獲取輸入焦點
• type=”password” – 指定密碼輸入(非HTML5專有)

8、簡單美觀的CSS3登錄表單



這是一款基于CSS3的簡單美觀的登錄表單，僅僅用幾行簡潔的CSS3代碼，就能打造出一個非常實用的登錄表單，一起來看看吧。

9、基于jQuery的仿Twitter下拉登錄表單



這是一個基于jQuery的仿Twitter的下拉登錄表單，讓用戶直接可以在當前頁面登錄而不用跳轉(zhuǎn)到另外的登錄頁面，另外由于可以展開和折疊，也并不會占用太大空間。

10、下拉菜單表單