10 個用於創建漂亮表單的代碼片段

每個網站通常都需要某種類型的表單，無論是結帳頁面還是簡單的聯繫頁面。

確保表單正常工作至關重要，因此可用性是第一。 但美學也很重要，因為值得信賴的設計總是更具吸引力。

如果您對設計理念感到困惑，那麼這個系列可能會有所幫助。 它是 10 種帶有免費源代碼的表單設計的集合。 您會發現許多不同的配色方案、輸入字段樣式、印刷樣式等等。

此外，這些都是免費託管的，因此您可以根據自己的喜好複製和使用代碼。

1. 材料設計

每個人都知道谷歌在過去幾年聲名鵲起的材料設計語言。 材料設計概念針對 Android 應用程序，但迅速傳播到網絡上。

如果您喜歡 Google 材質 UI 的簡約風格，請查看 Jon Uhlmann 創建的這個材質表單。

它在 Sass 和 Pug 上運行，用於 CSS/HTML 預處理。 它也是一個非常輕量級的表單，材料設計元素應該在所有瀏覽器中呈現相同的內容。

真的是所有材料設計師的靈感來源。

2. 海底

以這種非常獨特的以水生風格建造的聯繫形式進入海洋。

整個頁面背景使用重複的圖案來創造海水的波浪。 但是，動畫小魚是一個完全不同的故事，從背景圖像中可以看到動畫。

此外，每當您選擇一個輸入字段時，就會出現一隻友好的章魚來打招呼。 多麼古樸！

3. Bootstrap 3 表單

默認的 Bootstrap 樣式非常無聊，在這一點上它們真的已經習慣了。 每當我看到一個具有相同通用樣式的 Bootstrap 網站時，我只能想像設計師太懶惰而無法定製或太專注於體驗而不關心。

這個 BS3 表單通過構建在 Bootstrap 框架之上來做正確的事情。 它在輸入字段和提交按鈕上使用了一些重新設置樣式來創建一個可愛的 Bootstrap 表單，您永遠不會知道它是 Bootstrap 的。

如果您正在運行 BS3 佈局，肯定會考慮像這樣重新設計您的表單。 您還可以嘗試使用基於 Bootstrap 構建的 3rd 方框架來進行更定制的設計。

4.優雅的接觸

借助 Font Awesome 圖標和一些基本的響應式樣式，此聯繫表單確實是其中的一種。

我總是建議在表單中添加圖標，尤其是對於較大的設計。 有了更多的字段，您就會有更多的猶豫，而用戶只想輕鬆地瀏覽表單。

這些簡單的圖標為每個字段添加了提示，因此很容易一眼就知道需要什麼樣的信息。

如果您正在尋找一些獨特的東西，請嘗試在組合中添加不同的圖標字體。

5. 微登錄

有時候，小事真的是最好的事。 這個表單用戶界面通過創建一個超級縮小的登錄表單來證明這一點。

排版在表單設計中非常重要，我通常更喜歡登錄字段上的較小字體。 這實際上取決於網站以及較小的文本與佈局的融合程度。

但是這個表格也有一個小的進度步驟圖形掛在旁邊，解釋了表格的過程。 僅授予兩個字段，這似乎很愚蠢，但對於較大的註冊表單，進度條將證明對用戶體驗非常寶貴。

6.登錄和註冊組合

如果您想減少登錄時間，您可以嘗試將登錄表單和註冊表單組合在一個頁面上。 它比你想像的要容易得多，你可以在這個 pe 中看到一個甜蜜的演示。

每當您單擊側面的登錄/註冊鏈接時，您會發現一個漂亮的自定義動畫將表單旋轉到視圖中。 這一切都通過 jQuery 提供支持，但動畫也可以通過 CSS 工作。

但我確實注意到此佈局中的一個錯誤，即“隱藏”表單的底部在切換後仍然可見。 您可以使用 CSS可見性屬性或將位置移出邊界來解決此問題。

7. 黑板聯繫人

這是一個真正獨特的表單樣式，絕對會跳出頁面。 這種黑板聯繫表格使用背景漸變來創建光線從黑板上反彈的效果。

加上木製邊框有助於將這東西作為真正的交易出售。

創作者 Greg Sweet 甚至使用了一種自定義的網絡字體，看起來就像典型的人類筆跡。 這非常適合在表格上添加最後的潤色，因此確實感覺您回到了學校。

8. 信用卡結賬

我看過很多結帳表格，但 Fabio Ottaviani 的這個設計可能是我偶然發現的最好的。

它確實使用 JavaScript 來處理輸入字段驗證，但信用卡都是 CSS。 它會根據您在表格中輸入的數字進行動畫處理，甚至在您輸入信用卡 CVV 號碼時會旋轉到後面。

9. 自定義註冊

對於一個純 CSS 註冊表單，這個片段真的很重要。 在帶有小陰影的單個容器中休息感覺非常簡單。

但是輸入字段是高度定制的，包括將這些圖標添加到每個字段所需的空間。

每當您突出顯示一個字段時，邊界就會變成苔綠色。 您會注意到圖標也會改變顏色！ 甚至信用卡的選擇菜單也有自己的自定義樣式。

純粹在 CSS 中製作這是一個非常複雜的效果，但開發人員 Jose Carneiro 實現了它。

10. 浮動標籤

自定義浮動標籤是我最喜歡的表單設計趨勢。 它們總是有助於提高可用性，即使您填寫了該字段，它們也會給出清晰的解釋。

看看這個在 CSS3 和 Compass 上運行的浮動標籤表單。

創作者 Anton Simanov 使用 jQuery 作為標籤，但它都是自定義編碼的，沒有任何插件。 更不用說他的解決方案適用於所有典型的輸入樣式，包括文本區域和選擇菜單。

無論您要採用哪種形式的形式，我當然希望這個畫廊可以為您提供一些想法和片段以繼續前進。

您研究設計模式的次數越多，您為自己的項目構建的想法就越多。 CodePen 是收集這些想法的絕佳網站。