表单是每个网站的重要组成部分 – 但是,我们并不总是太注意他们的细节。有许多可以做的事情来改进它们,例如添加验证,输入掩码和其他视觉指南。这只是刮伤表面。最终的目标是使它们既有吸引力又尽可能易于使用。
这里有10种免费的工具可以用来使您的表单成为最好的:
formbase
formbase是一个使用CSS / SASS来为表单元素带来改进的默认样式的软件包。这些风格与跨浏览器兼容,可以使更好的UX。
狐狸
Foxholder是15种不同占位符动画的集合,用于增强您的表格。当用户与输入进行交互时,会触发动画。这是确保用户确切了解您的表单的整洁方法。
干涸
dirrty是一个jQuery插件,可以在表单字段被修改时检测。当检测到更改时,将提示用户保存对表单的更改。
输入掩码
做出这样的日期,电话号码和货币形式输入数据超方便与用户输入掩码。当用户与定义的输入进行交互时,屏幕将放置在显示所需精确格式的字段中。它不仅向用户显示所需的格式,还可以确保输入数据有效。
jQuery验证插件
在jQuery的验证插件是一个高度可定制的工具来帮助验证表单数据。开箱即用,它支持URL和电子邮件验证。它甚至带有API,允许开发人员添加自己的旋转。
如果您正在寻找更多的jQuery验证库,请查看此集合。
依赖于取决于
字段依赖关系对于确保用户只能看到与它们相关的字段,也可以作为验证手段的任务非常有用。dependsOn是一个jQuery插件,将允许您添加任何形式的依赖关系。
Choices.js
使用Choices.js,您可以在表单中添加一些非常有吸引力的选择框和文本输入功能。这款轻巧的香草JavaScript可让您创建自己的自定义输入模板。
级联下拉菜单
级联下拉菜单是您需要一个窗体需要用户选择几个步骤的时候的一个很好的解决方案。例如,想想选择一辆车。你会选择制作,然后选择模型,然后选择年份等等。
多点
Multipicker为用户提供了一种视觉吸引人的方式,可以在列表中选择多个项目(类似于复选框)或单个项目(类似于单选按钮)。它可以与上述表单元素或甚至HTML元素一起使用,如无序列表。
jQuery表单插件
升级您的标准HTML表单以使用AJAX与jQuery表单插件。该插件具有很多选项,可让您对表单数据的提交方式进行全面控制。