提升用戶體驗的最佳免費 jQuery 表單插件

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

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

jQuery Autotab

自動挑格是個很棒的功能，這個功能我們完全可以從頭開發。但是如果你想節省時間的話，可以選擇jQuery AutoTab這個強大的插件去簡化這個功能。當一個字段達到最大長度時，jQuery AutoTab將會檢測到，并自動跳到form表單的下一個元素中。

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

Pickadate.js

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

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

Progression.js

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

這個開源項目讓開發人員輕松地引導表單域，而不用進行過多的設置。你可以通過一系列的參數設置區調節寬度，動畫風格和界面顏色。你可以查看在線文檔以了解更多。我覺得Progression.js是一個簡單的方法，可以讓用戶專注于填寫每一個字段，并充滿希望地完成整個表單。

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項目都不一樣，所以你可能需要不斷的嘗試各種各 樣的插件。我非常希望這些插件可以提供一個不錯的起點來增加你的網站表單的可用性。如果你知道任何相似的插件我可能忘記了。請盡管在下面的評論區分 享。