提高用戶體驗的最佳免費 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項目都不同，因此你可能須要不斷的嘗試各類各樣的插件。我很是但願這些插件能夠提供一個不錯的起點來增長你的網站表單的可用性。若是你知道任何類似的插件我可能忘記了。請儘管在下面的評論區分享。