网络表单可能是用户和网络应用之间的主要沟通渠道。它通常用于收集来自最终用户的重要信息，这些信息可以在客户端触发更新，或者存储在服务器端的数据库中。设计不良或混乱的表单会给终端用户和应用程序所有者带来很多不便。因此，有必要认真关注表单及其功能的正确实现，如标签、通知、验证规则等。
通过利用JavaScript UI库，可以大大简化将表单像其他界面元素一样集成到网络应用中的任务。这类工具在程序员中非常流行，因为它们有助于加速开发过程并减少代码库中的错误数量。
在这篇文章中，我们将考虑流行的UI库中包含的表单部件和表单相关的控件。
DHTMLX 表单
DHTMLX Suite 提供了一系列的部件，用于将功能丰富的 UI 组件无缝添加到任何 Web 项目中。可用的解决方案列表包括一个跨浏览器的JavaScript/HTML5表单。它使你能够使用14种不同的表单控件，并以所需的方式将它们分组，以建立任何复杂的表单。除了标准元素（输入字段、复选框、动作按钮等），你的表单可以包含文件上传器、滑块、日期选择器以及Suite软件包中的其他有用控件。预定义的验证规则和通知信息确保用户只提交有效数据。通知信息有助于避免在表单完成过程中出现任何误解。如果有必要，你也可以禁用任何表单选项或隐藏它们。
DHTMLX Form的丰富的API允许你根据你的项目要求来定制表单。例如，表单标签中的文本数据可以用各种语言显示，以便让不同国家的用户理解。任何风格的调整都是通过CSS进行的。这个小组件的初始化过程只需要几个简单的步骤。
Webix表格
Webix提供了一个UI小部件的集合，用于创建用户界面的各种部分，包括表单。表单小部件有助于从用户那里获得任何类型的信息，并在众多控件和验证功能的帮助下将其转移到进一步处理。它可以为所有的表单控件设置一个共同的配置。如果你的表单应该包括特定数量的数字/元音（信用卡、电话号码等），你可以指定一个模式来格式化输入的数据。禁用表单元素或切换到只读模式都不是问题。
表单部件可以与其他Webix组件结合，以显示复杂的表格。你可以把一个大的表单分成合理的部分，并使用Fieldset和Section组件给它们附加文本标签。另一个选择是在标签和分段按钮的帮助下划分一个表单，从而形成一个多视图布局。Webix的数据部件（如列表）采用表单作为编辑器。Webix还提供了HTMLForm小组件，允许你用Webix表单API升级简单的HTML表单，还可以与其他Webix小组件一起使用。你也可以从使用特殊的Webix工具（Form Builder）来生成表单中获益。
与之兼容。Angular, React, Vue.js, Backbone
Kendo UI表单
Form组件是Kendo UI库的一部分。它旨在生成和管理Web应用程序中的表单。这个UI工具带有许多配置和定制选项，以促进实施过程。
除了默认布局外，你还可以在你的表单中应用网格布局（最多12列）。这个选项只在现代浏览器中支持。用分组功能可以以更直观的方式定位表单元素。有两种显示表单标签的模式（垂直和水平）。Kendo表单带有一个可定制的内置验证器。这个重要的功能在提交时被设置为动作，并可以包括验证摘要，即验证错误列表。该表单组件还支持MVVM模式和现代可访问性标准。
与之兼容。Angular, React, Vue.js
DevExtreme Form Layout
DevExtreme表单是DevExpress设计的一个jQuery插件，是一个JavaScript UI小部件。该表格的UI表现为一系列标签-编辑器组合，对应于数据字段。所有的表单元素都可以以三种不同的方式排列：列、组和标签。还有一个空项被用来在表单项之间添加空间。这个小组件为在台式机和移动设备上的显示进行了优化，并允许你根据屏幕的大小预先定义屏幕上显示的表格列的数量。
由于有一个验证引擎，在表单字段中输入的值在保存前会被检查。使用这个引擎，你可以设置各种验证规则类型，包括自定义和服务器端验证，可以动态地禁用。此外，还可以在运行时修改表单项并定义其可见性状态。应该注意的是，这种改变只导致被改变的项目的更新，而不需要重新渲染整个表单。
**兼容:**Angular, React, Vue.js
jqxForm
jQWidgets是一个基于jQuery的widget库，有助于解决众多的UI开发需求，包括用jqxForm创建数据输入表单。这个widget使你能够通过JSON配置来设置一个交互式表单。
jqxForm的默认功能包括所有标准的输入字段（复选框、密码、下拉等），可以用自定义输入组件来补充。它包括几个对齐输入元素和标签的选项（右、左、中）。jQWidgets还包括许多其他有用的UI工具，如jqxValidator - 一个可定制的插件，用于用JavaScript验证表单中的用户输入。它可以与你的Web项目中的表单部件无缝集成。
与之兼容。Angular, React, Vue.js, Blazor, ASP.NET MVC, Web Components
Ext JS表单面板(Sencha)
Sencha的Ext JS库还包括一个UI工具（名为表单面板），它有助于解决在Web应用程序中收集最终用户的数据的问题。这个组件为标准的表单提供了一个标准的容器（面板），丰富了用Ext JS的方法和特定功能实现的相关功能。
它允许你从多种预定义的表单字段（日期、数字、文本、时间、复选框等）中选择开箱即用的类型。任何字段都可以配备内置或自定义验证和澄清错误的工具提示。Ext JS允许你同时应用MVC和MVVM架构方法。有趣的是，Sencha提供了两种变化的UI工具包（经典和现代）。你还可以利用特殊的开发工具（Sencha Themer、Sencha Architect、Inspector等），使你更容易将Ext JS的表单和其他UI组件纳入你的Web应用。
与之兼容。Angular, React, Vue.js
Syncfusion
一些JavaScript UI库不包括现成的表单组件，但提供了特定的控件，可用于创建表单而没有任何兼容性问题。Syncfusion的Essential JS 2就是这样一个解决方案。这个JavaScript UI工具包包括一系列具有模块化和响应式设计的控件。它们专门用于实现您的应用程序的各种UI方面，包括数据输入。
在Syncfusion输入控件的帮助下，您可以把您自己的表单与所有的核心功能结合起来。Essential JS 2中与表单相关的控件列表包括文本字段、动作按钮、表单验证、输入掩码、文件上传器、就地编辑器和许多其他控件。
与之兼容。Angular, React, Vue.js, ASP.NET MVC, ASP.NET Core
除了Syncfusion，你还可以考虑Ignite UI和Wijmo库，它们也提供了构建表单的所有必要组件。
最后的话
填写表单是许多网络用户最不喜欢的事情之一。因此，当你在自己的网络项目上工作时，使这种体验尽可能的简单是很重要的。而上面强调的所有工具都有助于以更少的时间和精力来实现这一目标。通过投资这些JavaScript UI库中的一个，你会得到一个表单和许多其他的UI部件，这些部件可以在你的编码工作中发挥作用。
主题。
javascript, web开发, web应用, 用户界面, web表单, widgets, javascript库, ui组件
DZone撰稿人所表达的观点属于他们自己。
