平时搬砖也算是接触了不少的低代码表单，但是今天给大家分享的这款低代码表单绝对会让你的眼前一亮。不仅支持vue2、vue3，而且还提供了移动端，还适配了uniapp。怎么样，就我目前的见到的很少能够同时适配这么多的表单，它就是今天的主角 — Variant Form。

废话不多说，我们直接上干货！

前言

在 HTML 中使用

列表标签

在html中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！

作用：如果说table标签是用来显示数据的，那么列表标签

大家好，我是TJ

关注TJ君比较久的读者应该知道，我是一名后端开发。对于前端知识是比较零碎的，所以很多时候写表单这样的工作，一般就是复制黏贴，然后改改字段。对于HTML格式，一直觉得比较杂乱，不够简洁。

你是否曾构建过表单，准备用JavaScript实现验证功能，后来才发现...HTML其实早已内置了解决方案？有些你大概率不知道的属性已经内置在里面了。

如果你是网页开发者——尤其是处于初级或中级阶段——你很可能写过这样的表单：先构建表单结构，再添加JavaScript来验证邮箱格式、阻止空字段提交或限制输入内容。我们都有过这样的经历。

表单的工作过程

表单的信息发送与处理过程可以简单的进行图示，如下图。

以注册会员为例，用户在自己的电脑上打开相应的注册表单页面填写信息，完成填写后点击提交按钮，也就是图中1所示过程。

这时浏览器会将这些信息发送给处理这些信息的服务器，服务器上有使用类似asp或php写成的相应的处理程序，处理完成后，生成一个反馈信息，也就是2到3的过程。

我们都同意，填写表格是一项枯燥且耗时的任务。如果我们可以创建一个可以为我们填写表格的 AI 助手，让我们将时间投入到更有建设性的任务中，那会怎样？

上篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：

• 输入类控件
• 菜单类控件

输入类组件 —— input

此类控件有很多种类型，使用<input type="类型">语法，常见类型如下：

表单标签的作用

• <form>标签及其属性

<from></form>标签对用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性。

• action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。相对和绝对

• Method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.