網頁表單是一個老生常談的話題。出於這樣或那樣的目的，一些示例中都會包括使用者註冊，電子商務結算，使用者設定甚至聯絡人表格。而輸入欄是非常容易用現代的CSS3技術來應用樣式。但是到底什麼決定整體使用者體驗？

在這篇文章中，我想展示一些免費的開源jQuery外掛來幫助開發者建立更簡易的web表單。訪問者不用太多的猶豫就能完成表單的填寫。你也許不想太過華麗頁面元素，它會干擾手頭的任務。考慮這些附加的特性，它就像一個使用者指南，能幫助使用者填寫表單，而它們又涉及到唯一的或者不熟悉的內容。

jQuery Autotab

自動挑格是個很棒的功能，這個功能我們完全可以從頭開發。但是如果你想節省時間的話，可以選擇

所有的input標籤都是由以逗號間隔的欄位組成的長字串作為jQuery選擇器來建立的。我喜歡這樣的方式——使用這個外掛，基於每個欄位的tabindex屬性，動態的，而不是手動地定義每個元素。它還有非常酷的過濾功能，以供你輸入不同的內容，例如，數字的電話號碼，或數字字母組合的街道地址。你可以從Github官網獲得一個副本，來看一下這個外掛是如何工作的。

Pickadate.js

不久之前，我寫了一篇文章詳細介紹了很多種jQuery日期選擇外掛。那個單子裡，列出了一些非常不錯的選擇，但是我漏掉了一個非常好的解決方案，它的名字是pickadate.js。這是一個免費的開源外掛，可以在任何網站專案，同時也支援移動裝置的網頁瀏覽器。Pickadate不僅僅可以讓使用者選擇一個日期，而且可以選擇一個特定的時間或者一個時間範圍以上傳至表單。

如果你有興趣，可以讀讀我的另一篇文章。我真的非常喜歡把玩pickadate.js,因為它幾乎可以支援所有的移動裝置。我完全不是在推銷這款外掛，而是希望這個漂亮的介面可以完完全全地呈現在第一次使用它的使用者面前。如果你需要一個快速的jQuery日期外掛，那麼我建議你從現在開始使用它，並把它介紹給其他人，如果有機會的話。

Progression.js

你見過隨著使用者的每一個輸入欄位進行引導的表單吧？這些表單可以通過隱藏的文字元素或工具提示來手動建立。但是你也可以選擇包含一個外掛，比如Progression來完成類似的功能。

這個開源專案讓開發人員輕鬆地引導表單域，而不用進行過多的設定。你可以通過一系列的引數設定區調節寬度，動畫風格和介面顏色。你可以檢視

Selectize.js

設計過WEB表單的開發者都熟悉選項選單控制元件：一個下來列表，包含一些不同值的選項，有時候有一些選項會放到一個選項組中。Selectize.js是一個免費的外掛，可以幫助你定製選項選單，提供更加自然的使用者介面。

儘管你可以選擇使用標準的選項選單，它包含很多可定製的特性，使用者甚至可以將自定義的值輸入到選擇選單中。但Selectize.js可以幫你將選項域填入基於標籤的輸入框，你也將發現很多諸如Tumblr這樣流行的社交網站已經出現在列表中，同樣的，Selectize.js也允許使用者輸入新的標籤。

Selectize.js並不是對於所有型別的標點都是完美的，但它確實提供了很多有價值的特性。基於標籤輸入的選項選單是比較難實現的，而這個開源的jQuery外掛提供了所有這些功能(幫助實現基於標籤輸入的選項選單)，以及對你的選項選單更豐富的自定義設計。

iCheck

這是我最喜歡的外掛之一，因為它裡面很多的模板直接拿來就可以用。iCheck允許開發者給表單中的單選按鈕和多選框設定風格。它裡面有很多不同的面板供你選擇，如扁平化的，四方或是星型的。這些面板的顏色都是可以改變的。

iCheck可以讓開發者非常方便的自定義多選框和單選框。你可以根據你要設定的面板顏色來選用不同的CSS類別。因為iCheck的簡單，每次我都會選用它。

Colpick

顏色選擇器是另一個很少用的介面，但其對於網路應用來說是十分重要的。用jQuery構建的解決方案非常之多，我不可能都用。Colpick是可以在Github上下載的開源軟體。其UI對於很多做設計的人來說不會陌生，因為它很像Photoshop中的樣子。

但即使人們從來沒有用過Adobe的軟體，這個顏色選擇器也非常簡單易用。我不認為人們會費盡心思想了解它是如何工作的。它是完全用JS/CSS來實現的，甚至支援老爺級的IE7/IE8瀏覽器。截止我寫這篇文章Colpick發行最新版本已有1個月時間，所以我們要相信其未來會有更多的更新和bug修復。

jQuery 選擇按鈕

蘋果的ios使用者一定熟悉在應用的設定裡看到選擇 ON/OFF配置。許多 jQuery 擦汗奸(among other libraries)在網站上覆制了這樣的樣式。實現這樣的效果 Switchbutton 是很不錯的選擇，它提供了大量自定義選項來修改標籤文字、觸發按鈕。以及怎樣將選擇結果傳入表單。

你可以自己設計一下，使他更加像IOS新IOS5/6/7選擇器,或一個沒有文字的縮小版本，外掛頁 檢出程式碼，使他們能正常在瀏覽器中工作。這個外掛最大的用處就是無需重新設計大段的頁面就可以改善使用者體驗.

Passy

在網站的註冊頁面上對使用者密碼都有強度評級是一直十分流行的做法。有時你會發現使用者會發現這個功能很煩人，想關閉此功能。但這個功能真的能幫助人們判斷他們所選擇的密碼是否能夠抵擋住hackers破解。

我真的很喜歡 Passy for jQuery 應為他不僅能驗證密碼的強度，還能自動生成隨機密碼。當初試化外掛之後。你可以選擇新密碼應該有多少字元。選擇哪些密碼是允許的，哪些密碼是不允許的，以及動態密碼生成是否出現在頁面上。對於幫助使用者驗證他們的密碼或者使用者自己生成一個密碼. 這是一個很簡單的外掛。很容易上手

Nod

最後一個是驗證表單輸入框的外掛.通常每個表單都有欄位長度最低要求，例如使用者名稱和郵箱的地址長度. Nod 是一個驗證任何輸入型別的jQuery外掛.檢出線上的例子 想想怎樣在實際專案中使用這個驗證外掛 .

在網站上有很多不同的驗證外掛供你選擇。這是另一個不錯的選項，對於輸入錯誤時的處理和驗證。Nod是一個簡單的去好用的Jquery外掛之一。實現基本的前端驗證能夠在任何型別的表單找那個完美的使用能夠。所以如果你想學習瞭解更多關於這個外掛的知識的話，可以檢視專案所在git網站。

結束

我在這裡的目的是為Web設計者和開發者提供各種各樣的外掛，可供把玩，看看哪些工作的最好。每一個Web專案都不一樣，所以你可能需要不斷的嘗試各種各樣的外掛。我非常希望這些外掛可以提供一個不錯的起點來增加你的網站表單的可用性。如果你知道任何相似的外掛我可能忘記了。請儘管在下面的評論區分享。