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

下面給大家介紹10款設(shè)計(jì)簡(jiǎn)單但是外觀精美的jQuery和CSS3表單，希望對(duì)大家有所幫助。

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



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

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



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

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

3、HTML5 CSS3表單



4、jQuery和CSS3的多步驟注冊(cè)表單



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

5、精美實(shí)用的CSS3留言表單



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

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



7、HTML5和CSS3登錄表單



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

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

8、簡(jiǎn)單美觀的CSS3登錄表單



這是一款基于CSS3的簡(jiǎn)單美觀的登錄表單，僅僅用幾行簡(jiǎn)潔的CSS3代碼，就能打造出一個(gè)非常實(shí)用的登錄表單，一起來(lái)看看吧。

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



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

10、下拉菜單表單