表单设计
表单标记

定义表单的开始位置和结束位置，表单提交时的内容就是表单的内容


基本格式
<form action="服务器端地址"（接受表单内容的地址）name="表单名称" method="post|get"....</form>



常用属性


name 表单名称


method 传送数据的方式
get方式：会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性
post方式：提交时会将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制


action 表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表示不使用这个属性，也要指定其属性值为"no"


enctype 设置表单的资料的编码方式


用来指定目标窗口




文本域和密码

<input>没有结束标记


基本语法
<input type="" name="" value=""size=""maxlength="">



属性介绍

type属性: text或者password
name属性: 定义控件的名称
value属性: 初始化值，打开浏览器时，文本框中的内容
size: 设置控件的长度
maxlength: 输入框中最大允许输入的字符数



提交、重置、普通按钮


提交按钮
当<input type="submit">时，为提交按钮



重置按钮
当<input type="reset">时，为提交按钮



普通按钮
  当<input type="button">时，为提交按钮



单选框和复选框


单选按钮
当<input type="radio">时，为提交按钮



复选框
当<input type="checkbox">时，为复选框



注意
单选框和复选框都可以使用"checked"属性来设置默认选中项



隐藏域

当<input type="hidden">时，为隐藏表单域

多行文本域
	用法：使用<textarea>标记可以实现一个，能够输入多行文本的区域

	语法格式：<textarea name="name" rows="value" cols = "value" value="value"....<textarea>

	rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

菜单下拉列表域

标记
	1. 语法格式
		
		<select name="" size="value" multiple>
		<option value="value" selected>选项1</option>
		<option value="value">选项2</option>.....<selected>

介绍



基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来

工具地址：http://form.making.link

GitHub地址：https://github.com/GavinZhuLei/vue-form-making



特性

可视化配置页面
	
提供栅格布局，并采用flex实现对齐
	
一键预览配置的效果
	
一键生成配置json数据
	
一键生成代码，立即可运行
	
提供自定义组件满足用户自定义需求
	
提供远端数据接口，方便用户需要异步获取数据加载
	
提供功能强大的高级组件
	
支持表单验证
	
快速获取表单数据
CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

 

 Install

npm install form-making -S

 

Quick Start

import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)

// or
import {
  GenerateForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.component(GenerateForm.name, GenerateForm)

Template

<fm-generate-form></fm-generate-form>

功能介绍

通过 在线地址 生成的JSON，用于表单渲染


下面就是加载对应的数据用于展示，假设你已经正确加载组件

<fm-generate-form 
    :data="jsonData" 
    :remote="remoteFuncs" 
    :value="values"
    ref="generateForm">
</fm-generate-form>

<script>
new Vue({
    ...
    data () {
        return {
            jsonData: {}, // 表单配置中生成的json数据
            values: {}, // 表单需要显示的表单数据
            remoteFuncs: {
                // 组件配置时配置的远端方法,保持和配置时输入的名称一致
                func_test (resolve) {
                  // 模拟接口请求
                  setTimeout(() => {
                    const options = [
                      {id: '1', name: '1111'},
                      {id: '2', name: '2222'},
                      {id: '3', name: '3333'}
                    ]
                    
                    // 获取到的值和标签可以通过配置页远端配置
                    // 值:id  标签：name
        
                    resolve(options) // 将后端获取的数据放入回调函数中
                  }, 2000)
                },
                func_test2....
            }
        }
    },
    methods: {
        ...{
            // 调用此方法验证表单数据和获取表单数据
            this.$refs.generateForm.getData().then(data => {
                // 数据校验成功
                // data 为获取的表单数据
            }).catch(e => {
                // 数据校验失败
            })
        }
    }
})
</script>



问题交流

QQ群：985558286

AnyReport表单设计器作为报表的一个组件，可设计多样式表单，收集数据，可生成对应的物理表字段，支持在线设计表单、预览
表单，并支持一对多关系的表单结构设计，生成的表单支持输出excel文件，使用excel文件离线填写数据，支持打印表单数据信息。
AnyReport报表集成填报设计器，使用填报设计器设计企业多样化的表单，录入数据，根据设计的表单自动生成对应数据库物理表(无需手工到数据库建表)，类似Hibernate操作数据库，根据不同的数据库数据源生成对应的创建表SQL，新增数据、更新、删除数据对应的SQL。
填报设计器应可以设计自由填报样式表单、一对一关系、一对多关系的表样式，如：主从表是常见的一种数据表结构，主表中的一条记录对应从表中的多条记录，例如订单表和产品表，订单表的一个订单对应产品表中的多条产品记录。
类似Excel表单设计器，轻松地设计表单，不需要为表单组件排版，并能直接生成表单数据管理列表，可对数据进行添加、删除、修改，
表单设计器可定义表单而录入数据，例如下级向上级单位报数、统计表中的部分数据仍需手工填写等。验证表单数据，表单数据可进入审批流程，审批通过保存进入数据库，保证数据的安全性。
表单组件的编辑风格主要包括：文本框、下拉框、日期域、下拉书、单选框、复选框、密码框、文本框、上传图片、数据下拉框、文本编辑器。
设计完表单，直接可以生成数据库对应的物理表，更加简单, 可编辑表对应的名称、字段类型，及表之间的对应关系
数据提交成功页面，可轻松查看该表单数据的流程流转情况

全篇阅读大概需要15min，对表单设计不熟悉的同学看完后肯定会有不少的收获~~~
说到表单其实在生活中可以接触到各种各样的表单，主要目的就是让用户填写来【收集用户信息】。
初看这些表单，你可能觉得很简单，就是一些标签、非常基础的小组件，但是在实际业务中，想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节，常常会让设计师陷入无限的纠结中，比如：
文字标签是左对齐还是右对齐？
确定按钮是放左边还是右边？
控件颗粒长度是整齐划一还是与输入预期一样错落有致？反馈内容怎么显示......等等
★ 所以针对这些问题，我从【框架】>【细节】的逻辑与大家一起探讨「如何设计一份体验好的表单」。
表单拆分
在UX Collective，作者Taras Bakusevych 进行了详细的阐述，对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓
1、标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。
2、占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述、示意，当用户输入信息时即消失。
3、 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等
4、 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关......
5、 提示：描述该输入项需要的输入类型，如：上传的文件类型
6、 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，则按钮悬浮固定在底部；按钮“确定”放左、右统一即可，没必要过分纠结。
表单类型
看了很多文章，对表单类型的划分主要是：基础表单、分步表单、高级表单（分组表单）[1]
基础表单：常见于输入项较少的表单场景，如：登录、注册。
分步表单：常用于输入项较多，业务本身具有流程化特性（如：转账）
为了提高用户填写效率，减少用户心理负担，将一个冗长或用户不熟悉的表单任务拆分成多个步骤，一步步指导用户完成。
分步表单可以缓解用户需要填写较多内容时候的抵触情绪，并且通过拆分步骤，聚焦于每次填写的内容，提升用户在不同模块间的浏览效率。
高级表单（分组表单）：主要用于需要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。
但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择，但是实际在设计时，往往还需要考虑的是：这些表单应该是以什么承载结构展示？
是整页展示、弹窗展示、侧边栏展示？
表单内部布局方式，一定是平铺的一栏么，是否可以增加侧边目录？
这些都是设计师需要进行全盘考虑的问题，所以在设计表单的时候需要先确定这些框架，由外>内，层层深入，再对细节进行处理。所以接下来我会针对如何由外>内设计表单进行详细的陈述。
表单页设计步骤
在详细阐述如何设计表单页前，先明确下我对于表单页的划分 ↓ ↓ ↓
这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建设用户体验，即：战略层、范围层、结构层、框架层、表现层，这种逐层的思考逻辑对于设计表单是十分必要的，因为在设计表单的时候，常常需要考虑这个表单页所需承载的业务诉求（战略上）基础上去做后面的优化体验，所以在设计表单的时候应：
明确该表单的业务类型，因为不同的业务诉求的表单在设计中的展现形式会有不同，即“页面框架”会有不同（这也是我上面为何将表单页分成页面框架和表单内容区的原因）
在确定页面框架后，就需要对表单需展示的内容进行明确的划分，如：表单的内容是否要展示流程进度？表单内容是否有不同层级的导航？确定了这些后，我们表单内容的大致布局框架就可以确定下来，我们才能进入下一步（内容区具体的陈列方式）的设计；
表单内容区主要是对输入项的陈列方式，对齐方式，进行体验优化；
最后对所有输入项进行统一整理，检查是否与用户预期一致？与其他输入项的关系是否清晰等。
整体而言可以分为以下四步：
STEP1：确定【页面框架】
这里得页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。[2]
整页式：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。
弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。
侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。
以上这些就是常见的表单页面框架，我们在考虑采用何种样式时需要综合以下几个因素考虑：
内容多少  ——  内容较多不适合使用弹窗式
与原页面关系强度  ——  需与原页面保留强关联建议使用弹窗式、侧边栏式
表单内容区复杂程度  ——  一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。
STEP2：确定【表单内容区布局】
如上图所示，一个正常的表单内容区主要有：标题区、二级导航区、主内容区
其中标题区是必须要有的，标题区可以让用户快速明白该表单是需要收集什么内容
二级导航可以根据业务需要进行配置
主内容区则是表单填写的主区域，通常我们直接将这个区域称之为“表单内容区”，该区域布局样式可以分为三种：
1、通栏式，即：在页面中居中显示，从上到下直接平铺控件颗粒。
2、左右式，即：在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏（如：流程节点展示）。
3、左中右式，即：分别在表单域内容区左侧放置导航栏，右侧放置辅助信息栏。
以上三种样式就是常见的表单内容区的布局，采用哪种布局，可以综合以下几个因素考虑：
内容多少——如果内容很多导致页面很长，则可以考虑将内容分类，作为左侧导航栏，采用左右式布局。
内容类型——导航作用内容必须放置左侧（有些分步骤的表单也会将步骤条放置左侧），而辅助信息的内容建议放在右侧（因为人眼浏览习惯都是从 左 > 右，所以信息重要度建议按照该视线路径放置）
★ STEP3：确定【表单内容排列方式】
在该步骤中，主要确定表单内容区控件颗粒的排列方式，
单列布局 or 多列布局。
在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上>下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。
多列布局的表单会导致用户的视觉路径变长，用户需以 Z 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。
但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件颗粒来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。
so 根据单列布局、多列布局的优劣势，结合实际业务需要来选择：
【单列布局】
优：视觉路径清晰，填写效率高，体验好；
劣：占用纵向空间。
【多列布局】
优：省空间，能够放置更多的控件颗粒；
劣：视觉路径模糊，填写成本高，填写易出错。
在这个环节中，除了需要考虑单列式布局还是多列式布局，还有一个也是需要全盘考虑的——
【标签的对齐方式】
在设计时，到底是采用左对齐、右对齐还是顶部对齐呢？
Matteo Penzo《Label Placement in Forms》文章中，有对标签不同的方式方式优劣势进行了说明。[3][4]
后续在这块纠结的时候，则可以对照上面表格进行评估了，其中详细原理你也可以点击下方链接进行查看：
UX Collective​uxdesign.cc
STEP4：确定【表单内容颗粒】
最后一步只需要按照收集信息类型的需要，选择正确的控件颗粒，如：如果是要收集用户购买数量，则可以直接使用“数字步进器”、“输入框”。
在选用控件颗粒时，需要注意的是：
选用的控件颗粒应是用户可以最快输入的，能点击完成就别输入完成
表单中同个信息类型的控件颗粒应统一
指意不明确的表单应搭配占位提示，占位提示应是完整的陈述句 
重要信息的输入项应该有错误提示校验，这种一般用于错误率较高的情况，避免用户反复填写。如：在登录注册时，我们填写手机号如果不满11位数，就会报错。
特定的输入型颗粒控件，需要根据输入信息的特殊性给与格式的提示与限制，如：邮箱         @http://qq.com，这样有助于帮助用户提前感知，减少表单填写错误。
表单颗粒的宽度应该 暗示填写内容的长度，与输入预期成正比，在Ant Design 4.0 系列分享的文章[5]分析结论是：
错落有致的排版比整齐划一更舒适，因为在视觉上我们更容易将下方有图的空间和内容视为一个和谐的整体，但左图过度的对齐导致暗示隐性的截断，我们会感觉表单列右侧空间缺了一大块。
写在最后
本篇文章从表单所在的页面形式 > 表单框架 > 表单内容区 逐层对表单进行剥离拆解，帮助大家更加全面的认知表单，并总结了日常工作中设计师常常会遇到的表单类型和布局，设计师可结合文章中给出的建议参考并灵活应用。
希望能够通过这边文章给到大家更多的启发。文章中如果有不严谨、错误的地方希望大家给与指正。最后，作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师，希望大家可以多多点赞评论鼓励下（狗头保命）
参考
^表单类型： https://preview.pro.ant.design/form/advanced-form
^页面框架： https://www.uisdc.com/structured-approach-2
^标签对齐选择依据： https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
^标签对齐优劣势： https://www.uisdc.com/middle-form#
^整齐划一？不如错落有致。| Ant Design 4.0 系列分享： https://zhuanlan.zhihu.com/p/110096160