基本用法

最基本的用法是配置表单项和提交接口API。

表单展示

首先展示默认模式：

其代码

{"type": "page","body": {"type": "form","api": "/amis/api/mock2/form/saveForm","body": [{"type": "input-text","name": "name","label": "姓名："},{"name": "email","type": "input-email","label": "邮箱："}]}
}

只需要对其加入一些方法就可以改变其模式以及其他功能。

首先就是设置水平。

我们可以在mode中添加horizontal是表单水平，也可以通过配置horizontal的属性使其调整偏移量，格式如下：

"horizontal": {"left": 2,"right": 6,"offset": 2
}

如图：

通过上面的配置可以看出来水平布局其实按比率分配的。实际上有时候固定左侧宽度更好看点。可以通过leftFixed进行改动配置 'xs' | 'sm' | 'md' | 'lg' 来定义左侧 label 的宽度。

两端对齐

有时表单内容需要两端对齐，可在 horizontal 中增加 justify 配置，注意只对内联控件生效。

label对齐模式

水平模式下 labelAlign 可以设置标签文本的对齐方式，支持right和left，默认为right。该属性的优先级：表单项 > 表单

内联模式（inline）

内联模式主要展示表单项。

如果需要实现一行展示多个表单项：有两种方法，一个是通过columnCount来控制表单显示几列。另一个方法是使用 group，它能实现每行显示不同列数，以及不同列的宽度分配情况，可以实现更灵活的控制。

参考文档Form 表单 (baidu.com)https://aisuda.bce.baidu.com/amis/zh-CN/components/form/index

低代码amis学习笔记(表单)相关推荐

【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
京东低代码平台：水滴表单联动可视化配置的实现与思考
TL;DR drip-form在0.9.0的alpha版支持了可视化配置联动的功能(仍在测试中) drip-form通过协议到代码的转换,尽可能降低常见联动配置的开发成本探讨:JSON diff动态 ...
在html中表单对象以什么标记开始,HTML学习笔记——表单
9.1 表单标记form 在网页中< form>< /form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容.在表单的标记中,可以设置 ...
html中表单涉及的标记有哪几个,HTML学习笔记--表单标记
表单是网页上的一个特定区域.这个区域是由一对标记定义的.这一步有几方面的作用.第一方面,限定表单的范围.其它的表单对象,都要插入到表单之中.单击提交按纽时,提交的也是表单范围之内的内容.第二方面,携 ...
八、PHP框架Laravel学习笔记——表单伪造和 CSRF 保护
一．表单伪造之前一直用的 GET 请求方式,而表单可以实现 POST 方式,我们来实验下: 先在 TaskController 创建两个方法,一个表单页,一个接受表单数据路由: public fun ...
React学习笔记—表单
表单组件像 <input>.<textarea> 不同于其它的原生组件,因为它们会随着用户交互而改变.这些组件提供了接口方便我们管理这些交互. 交互属性表单组件提供了一些受用 ...
吴恩达《机器学习》学习笔记四——单变量线性回归（梯度下降法）代码
吴恩达<机器学习>学习笔记四--单变量线性回归(梯度下降法)代码一.问题介绍二.解决过程及代码讲解三.函数解释 1. pandas.read_csv()函数 2. DataFrame ...
表单识别（四）-基于深度学习的表单识别)-OCR
(论文研读后,感觉有用的一些笔记,主要是给自己记录) 论文:熊雨点,基于深度学习的表单识别系统的研究与实现基于深度学习的表单识别前言: 文档检测方法: 基于扩张卷积残差网络的表单文档定位方法: 扩 ...
步步为营 .NET 代码重构学习笔记九
步步为营 .NET 代码重构学习笔记系列步步为营 .NET 代码重构学习笔记一.为何要代码重构步步为营 .NET 代码重构学习笔记二.提炼方法(Extract Method) 步步为营 .NE ...

低代码amis学习笔记(表单)