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 是收集这些想法的绝佳网站。