免费创建JavaScript和HTML5表单
几乎每个网站都需要使用表格。 因此,有意义的是,有许多免费和付费的服务,插件和库可用来简化表单的创建。 在本文中,我将列出一些工具,插件和库,这些工具,插件和库可用于在线创建免费表单,而无需任何JavaScript知识。 其中一些工具是完全免费的,而另一些工具则可以免费使用。
如果您具有该语言的基本知识,我还将列出一些有用的库,这些库可以促进基于JavaScript的表单的创建。 这些库是免费使用的,因此您可以根据需要创建任意多个表单。
让我们开始使用在线上可用的工具来创建自己的表单。
免费工具来创建表格
Bootsnipp是一个完全免费供所有人使用的工具。 您可以使用它来创建任意数量的表单。 它生成HTML,您可以将HTML复制并粘贴到自己的网页中。
拖放表单构建器使您可以从左侧拖动表单组件,并将它们拖放到右侧以创建表单。 放下输入组件后,可以单击它以查看一个小表格,并根据该组件填写ID,标签文本,占位符文本和其他特定于元素的信息。
创建表单后,单击查看HTML按钮很容易获得生成HTML。 如果要创建基于Bootstrap的表单,请尝试使用此工具。
实际上,Bootsnipp网站还提供了一些其他有用的工具,例如按钮构建器和页面构建器。
这个基于jQuery的表单生成器也是完全免费的,并提供了一种非常用户友好的拖放方法来构建表单。 您只需要从右侧列表中拖动不同的表单组件并将它们放在左侧即可。 完成此操作后,您将可以单击表单组件右上角的“编辑”按钮来编辑其所有属性,例如占位符文本,是否需要等等。
此工具的另一个好处是,您可以使用27种不同的语言中的任何一种来创建表单。
您可以使用formRender插件轻松呈现使用此工具创建的任何表单或表单模板。 您可以在官方网站上找到有关表单创建和呈现过程的更多信息。
pForm是又一个基于HTML的免费表单生成器,它使您可以通过以下三个简单步骤来创建自己的表单。
首先,为表单选择一种配色方案,然后添加一些输入字段。 将输入元素添加到表单后,就可以设置各种属性的值,例如标签文本,字段类型和其他属性。
将所有需要的字段添加到表单后,只需单击“ 保存表单”按钮以下载生成HTML。 此时,您还可以选择预览表单,然后再下载或返回以再次编辑表单输入字段。
继续使用pForm创建表单-这非常简单,而且您还可以为表单选择自己的配色方案。
更多高级表单生成器工具
JotForm有一个免费的入门计划,该计划允许您最多创建5个表单并每月提交100个。 您还将获得每月约1,000次的表单视图。 如果使用免费的入门包,则您生成的表单将包含JotForm品牌。
如果您不介意JotForm商标,并且使用范围不超出限制,那么此工具实际上非常易于使用。 注册后,您可以开始使用模板来创建自己的表单。 模板满足了各种需求,从付款和酒店预订表格到课程和活动注册。
Cognito Forms还提供了免费计划中功能有限的表单构建器。 您将在创建的表单中获得Cognito Forms商标,但是您可以创建任意数量的表单。 但是,免费计划中每月提交的表格数量限制为500。 这仍然是JotForm设置的上限的五倍。
表单构建器工具允许您从头开始创建表单或使用内置模板。 无论哪种情况,您都可能会发现它是迄今为止列出的所有表单构建器工具中功能最丰富,最用户友好的。
尝试使用一种Cognito表单模板创建表单,然后查看它是否满足您的所有需求。
免费的插件和库来创建表格
如果您不介意自己编写一些代码来创建表单,则可以利用所有免费JavaScript或jQuery插件和库来创建具有特定项目所需确切功能集的自己的表单。
这里有一些库可以帮助您入门。
即使您已经创建了基本HTML5表单,仍然可以使用该插件通过一行代码添加验证。 它将大大改善访问您网站的用户的用户体验。 您可以完全控制错误消息的位置和样式,并且库确保以非侵入方式显示它们。
该库还允许您在所有表单中集成输入验证,但是与jQuery验证插件不同,它使用HTML数据属性而不是JavaScript进行验证。 向表单添加验证就像在<form>
标记中包含data-parsley-validate
属性一样简单。
您应该看一下官方网站上提到的一些示例 ,以更好地理解库的工作原理和功能。
任何想要添加易于使用,移动友好,响应Swift且基于jQuery的轻型日期和时间输入选择器的人都会发现Pickadate非常有用。
触摸和键盘友好。 选择器支持40多种不同的语言,因此您可能可以让人们选择使用其母语的日期。
该插件为日期选择器和时间选择器提供了许多自定义选项。
这个名字怪异的密码强度估算器实际上是一个很好的工具,可以让用户知道在使用您创建的表单进行注册时想要使用的密码的相对强度。
它依靠模式匹配,并权衡大约30,000个常用密码,常用名,姓氏和模式(如日期)或键盘序列(如qwertyuiop等)来确定密码是否足够强。 如果您想为用户提供一种友好的方式来确定其密码强度,绝对值得一试。
文件池
FilePond是一个JavaScript库,可让您通过一组令人印象深刻的功能在表单中实现文件上传功能。 您将立即喜欢此插件的一件事是它的用户友好性。
它将接受目录,文件,blob等作为输入。 在客户端对所有上传的图像进行优化,调整大小和裁剪,以显着提高上传速度并同时减少服务器负载。
功能列表不止于此! 我强烈建议您在寻找一个JavaScript库以方便用户在表单中上传文件时,请将该库签出。
最后的想法
在本文中,我们介绍了一些流行的表单构建工具,插件和库,这些工具可用于立即创建功能丰富HTML表单。
如果您不想编写任何代码,那么本文上半部分提到的自由格式生成器工具将为您生成HTML。 您要做的就是拖放要包含在表单中的组件。 一些专用的表单构建服务还将为您提供许多其他功能,但通常需要付费,而免费版本将使您能够使用有限的功能。
本文后面提到的插件和库将对那些想要创建具有所需功能的表单的人有所帮助。 这些库将使它们更容易添加所需的功能,同时使他们可以更好地控制表单的外观和行为。
翻译自: https://code.tutsplus.com/articles/create-javascript-and-html5-forms-for-free--cms-33212