⑴ 一. 低代码 - 基于MongoDB的自定义表单系统
最近上线了一个小型SAAS系统，基于SpringCloud Alibaba，阿里云Serverless部署。系统的核心就是围绕自定义表单展开各种业务，之前对自定义表单的各种方案做过一些调研和对比，苦于没有找到一个比较成熟且“聪明”的方案。最终衡量利弊和开发效率之后，决定尝试一下MongoDB + 前端表单设计的方案。业务核心以外的其他模块Mq，Activiti等等都是一些成熟的方案。
就自定义表单这一块内容，从用户的角度，在表单设计页面用前端工具咔咔连拖带拽设计出一个表单，提交保存之后立马就可以用了，感受还是不错的。
背后要做的事情还挺多，简单罗列一下，后面分几篇文逐个记录一下。
1. 数据类型和数据校验的问题。
2. 多步骤表单、付款步骤以及各步骤的先决条件设置
3. 如何支持Excel的导入，导入模板的管理及校验方式
……
一、表单的定义
现在使用前端进行自定义表单拖拽配置的工具很多，我用的Avue，有一些坑，不过能凑活用。后台所作的工作就是根据解析用户定义的表单配置（JSON格式），把字段、字段类型、校验规则、正则规则、是否必须等等属性全部解析出来保存好，作为后续校验用户提交数据的依据。
⑵ HTML5网页前端设计中如下图表单的代码怎么写
下面是表单代码，你直接再加属性就可以了，表单用 table 写比较简单，div 太麻烦了；
<html xmlns=" http://www.dayinmandarin.com ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑板</title>
</head>
<body>
<div style="width:500px;">
<h1 style="width:500px;height:50px;color:#2A8DF0;border-bottom:#2A8DF0 solid 3px; text-align:center;">用户注册页面</h1>
<table cellpadding="0" cellspacing="10" style="margin:0 auto;">
<tr>
<td align="right" valign="top"><div>用户名：</div></td>
<td><input style='width:250px' value='请输入用户名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>密 码：</div></td>
<td><input style='width:250px' value='请输入密码' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>确 认：</div></td>
<td><input style='width:250px' value='请再次输入密码' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>姓 名：</div></td>
<td><input style='width:250px' value='请输入真实姓名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>邮 箱：</div></td>
<td><input style='width:250px' value='请输入电子邮箱' /></td>
</tr>
</table>
<div align="center"><input style="width:100px;height:30px;text-align:center;line-height:30px;background:#2289F0;border:#2289F0;color:white;font-weight:bold;font-size:16px;" type="submit" value="提交注册" /></div>
</div>
</body>
</html>
⑶ 网页端表格设计指南
想象一下你为企业端产品设计了一个系统，或是设计了某个应用程序。在诸如此类的设计中都需要用到表格。这些表格设计不是那些设计网站中展示的非常精美的表格样式，而是具有复杂交互和数百个单元格的表格。
在这种情况下，设计师会面临许多挑战。 例如：将设计与现有的前端框架进行匹配，或与破坏布局的“不舒服”数据进行斗争。 我们将通过以下步骤来解决这些问题：系统化需求，原子化，定义交互。
所以，你已经采访了目标受众。现在是时候将他们的需求和需求拼凑在一起，并转化为对设计有用的东西。例如，一位用户说：“我需要看看我的数据如何影响应用程序的其他部分。”或者在看到另一个人使用软件时，你注意到他只使用快捷方式而根本不摸鼠标。这是什么意思？第一个用户的话是关于输入验证和提示。你需要考虑将警报或帮助信息附加到表中，或者开发一个有意义的颜色系统。这取决于领域和心理模型。观察第二个用户的工作可能是你需要设计键盘可设置快捷方式，可能需要考虑比“Cmd + C”和“Cmd + V”更深刻的快捷方式。
这样，你就有一系列的需求和愿望。开放式问题有助于找出真正的需求并过滤掉一时兴起。例如，“什么可以帮助你更快地工作？这如何提高你的工作效率？如果你不能做XX会有什么改变？“
这时候就需要一个功能框架了。如下图
任何表的最小构建块都是一个单元，联合成行和列，其具有不同于其他单元的特定特征。 最后，我们将表格的重要补充作为顶栏，键盘命令，处理错误等。
简而言之，构建一个复杂的表，收集并优先考虑用户需求。 考虑非表格解决方案，例如图表。
绘制一张树形图，系统化所有需要的功能。
原子化是首先设计小的UI组件然后组装更大的UI组件。 我们将逐渐从字体和颜色等基本粒子转移到像标题或列这样的大模态。
这些部分可以由设计系统或UI框架定义。 如果为现有产品创建表，请检查调色板，字体和图标是否满足表格的需要。
当表格原子设计准备就绪时，我们可以继续设计不同类型的单元。 首先要事先考虑每个元素的“正常”，“悬停”和“激活”的状态。 后面再添加“点击”，“禁用”和其他状态。
单元格可以有工具提示，输入提示，错误消息，占位符等附件。
设计单元格创建行时，需要查看各种组合是否可以很好地协同工作。 下面我在一行中展示了只读和可编辑单元格的。 一旦设计一个具有复杂编辑逻辑的表格，那么表格的某些字段由用户提供，而其他字段则使用默认值自动计算或填充。
需要注意的是，将鼠标悬停在只读和可编辑单元格上时，光标会有所不同。 点击单元格会触发选择行或进入可编辑单元格的编辑模式。 你可以在下图看到用户选择一行或多行时的单元格状态。
现在是时候考虑表头了。 根据我的经验，通常无法控制列标题长度并坚持一行。 我在下图展示了表头的不同变体。
基于数据的工具，用户经常需要排序和过滤。 它可以帮助用户在冗长的数据中找到有价值的信息。 排序和过滤的挑战是将排序控件和过滤控件与其他标题元素（列标题，度量单位等）结合起来。
与表格单元格不同，过滤器框通常在右侧具有“重置”图标，以便用户可以查看未过滤的内容。
在示例中，有三种类型的过滤器框。 字母数字过滤器可以按字母和数字进行搜索。 它支持通配符 - 未知数量的未知字符。
日期选择器过滤器具有日历，其工作方式与其单元格相同。 允许用户手动输入日期并从日历中选择是一件好事。 如果他们知道他们在搜索什么，那么打字比点击容易得多。 在我的一个项目中，我们允许输入“01/25/2017”，“6 12 17”和“2016年9月4日”等日期，仅过滤一个月或一年。
复杂表的一个常见功能是固定列。 通常，包含关键信息的列（例如，元素名称或状态）不可滚动。
虽然表列应该巧妙地适应内容大小，但是当文本被截断时会发生。 在这种情况下，列大小调整很有帮助。 用户可以拖动列边缘并查看长内容。
处理长文本字符串的另一种方法是：使用最长内容拉伸列或将内容折成多行。 第一种方法对于或多或少类似的文本字符串更有效。 如果看到全部内容对于人们来说比保持表格的垂直紧凑更重要，那么第二个更好。
我们需要定义列的默认最小宽度，以防止表格不适合调整大小。
什么构成一张表格？ 单元格，列，行。 此外，复杂的表通常有一个顶部操作区。 与其他组件一样，顶部栏由较小的元素构成 - 标题和命令。 下面我收集了我们在其中一个产品中使用的各种状态的命令列表。
现在我们可以尝试组合不同的元素，看看它是否有效。 这里有些例子。
当然，这不是功能和元素的最终列表。 它不同于一个项目，可能包含其他内容，例如：
按多列排序;
可自定义的列;
可扩展行;
用于过滤和搜索的逻辑运算符（“和”，“或”，“其他”等）。
如果你犹豫要设计哪些功能，哪些没有，可以参考奥卡姆的剃刀，或简约法则。 如果现有的实例满足需求，则设计者不应创建新实例。 你应该“削减”用户可能需要的令人讨厌的功能。
只读表格 。 要构建的最简单的表类型，因为它只显示数据。 没有过滤或编辑选项。
搜索表格 。 单元格不可编辑，标题有过滤框和排序控件，可以选择行。 从实践来看，这些表格有助于从大量类似的东西中查找，比较和选择一个项目或几个项目。
可编辑的表格 。 所有或部分单元格都是可编辑的，通常没有筛选，因为行的顺序可能是自定义的。 这些表格通常会有工具栏并允许使用行执行操作。
简而言之
从最小的组件开始。 然后逐渐走向更大的，最后，模拟整个表格。
事先考虑每个组件的所有可能状态。
使用Occam的剃刀原则将元素数量保持在最小但覆盖所有用例。
构建块不足以构建像表格这样复杂的。设计师应该考虑“游戏规则”，并设计视觉部分背后的逻辑原则和惯例。
容器与响应式
如何将表格放在界面中？ 例如，它会占用现有容器中的一些空间还是一个单独的模块？ 这些问题的答案完全取决于产品，最好预见可能的问题并彻底定义原则。
有些应用程序使用线条或白色灰色“斑马线”来使信息更易读。
定义合理的默认宽度，并允许在需要时手动调整大小。对于阅读表格，最好在右边有一些空格而不是列之间的间隙。但是如果一个表包含许多行和列，则水平和垂直滚动是不可避免的。对于手机端的阅读，还可以把表格做成卡片式利于用户浏览数据。
即使是非常流畅和漂亮的表格也可能成为用户的噩梦。因此，遵循可访问性原则非常重要。 以下是可访问性方面的主要设计考虑因素。
给出标题并准备简明的摘要 。视力受损的用户应该能够在不对其所有单元进行语音处理的情况下处理表格。
注意字体大小 。尽管网络没有正式的最小尺寸，但16 px（12 pt）被认为是最佳的。此外，用户应该能够在不破坏整个布局的情况下将表格增加到200％。
为有色盲的人测试颜色 。文本和控件应与其背景具有足够的对比度。最低要求色比3：1（越多越好）。颜色不应该是标记事物的唯一方式。例如，错误消息不应仅依赖于红色文本，警告图标将为色盲用户提供参考。
避免使用小而模糊的控件 。如果可点击组件至少为40×40像素，则认为它们是触摸友好的。由图标表示的命令应标记或具有工具提示和替代文本。设计师不应过度使用图标，因为用户可能无法正确理解复杂的隐喻。
简而言之
内容统一和格式化也是设计师的工作。
不仅要考虑界面元素，还要考虑用例，规则和常用模式。
原文：https://medium.muz.li/complex-tables-356826d11861
译者：Ever
相关文章推荐：
在构建设计规范之前，你需要看看这些设计资源
如何构建设计语言系统
给初级UI&UE设计师的Sketch资源分享
交互设计原则和理论1——尼尔森十大可用性原则
交互设计原则和理论2——七大定律
国外设计团队的高频设计工具与协作工具
16个表单优化技巧
网页端表格设计指南
怎样提高注册登录流程的交互体验
不可错过的2019设计趋势
⑷ 前端页面点击新增按钮弹出表单样式
亲，好的，我可以为您提供前端页面点击新增按钮弹出表单样式的解决方案。我可以帮助您在最少200字最多500字的范围内完整回答问题，并且确保没有重复内容。
⑸ javaweb防止表单重复提交的几种解决方案
1.js方法解决:关于js方法解决就是说通过js动态控制提交按钮不能多次点击，或者多次点击不起作用。
方案一:通过设立标识使表单不能重复提交:
要强调的是，利用session方法解决表单重复问题是十分完美的，基本上可以应对各种重复提交问题。
但！是不是之前在客户端防止表单重复提交的种种方法就不使用了呢？
答案是否定的，我们需要多种方法混合使用才能达到最好的效果，也许有人会问，不是说session方法基本可以应对各种重复提交问题了吗？
这里我们所说的达到最好效果指的是，给用户更好地体验，例如用户点击了提交按钮，这时将按钮变为不可用的，用以告诉用户你已经提交内容了，不可重复提交。还有如果无论什么情况都用session防止表单重复提交问题，反而无形的增加了服务器端的负担。
⑹ 前端拿到UI设计的图 如何开始布局设计
前端拿到UI设计的图 开始布局设计的方法
布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计者在选择布局之前，需要注意以下几点原则：
明确用户在此场景中完成的主要任务和需获取的决策信息。
明确决策信息和操作的优先级及内容特点，选择合理布局。
一、常用布局
网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。
1、网站展示页
网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：
明确你要传达的内容，保持简短而清晰的文案。
搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。
2、控制台页
控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：
按照信息的重要程度来组织页面排版，突出展示关键信息。
将数据可视化，让用户可以直观地了解关键信息及整体情况。
合理地使用颜色及栅格排版，减轻用户的视觉负担。
3、列表页
列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的“可阅读性”及“可操作性”是设计的关键。在设计时要注意以下几点：
根据用户需求来定义信息展示的等级，仅展示关键信息及操作。
当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
4、表格页
表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：
构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。
更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。
5、详情页
详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：
清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。
图文搭配比单文本展示信息能更好地提高用户的理解。
6、表单页
表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：
考虑用户的浏览方式，提供清晰的用户视线浏览路径；
内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；
醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
二、栅格
我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按（移动：‘页面总宽 750px，内容区 750px’，PC：‘页面总宽 1440px，内容区 1208px’）来设定，并在此基础上以 12等分的栅格来划分整个设计建议区域。
建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。
注：图中灰色部分为栅格的列，定义为‘Column’，白色部分为栅格的间隔，定义为‘Gutter’。
栅格公式：
我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
网站展示页和 Dashboard 的 Gutter 宽度为 24px。
列表、表格、详情和表单页面的 Gutter 宽度为 16px。
⑺ Web表单设计—点石成金的艺术（一）
最近在读《 Web表单设计—点石成金的艺术 》一书，颇受启发。而且该书目前已经买不到了，好像二手书也买不到，特意找了pdf扫描版来读，读书过程中的一些感悟跟大家分享。
一、表单的设计
大多数人都不喜欢填写表单，这也就说明了应该关注优秀表单设计。
而很多的特定数据来源都提供了衡量表单设计影响的方式：
（1） 可用性测试 （观察人们与表单如何交互）
（2） 实地测试 （从人种学角度观察人们在家中或办公室中与表单互动的情况；）
（3） 客户支持 （了解客户填写表单时遇到的问题）
（4） 网站追踪
（5） 眼动跟踪 （记录人们如何理解表单的表现形式）
（6） Web惯例 （即查看该问题的通用解决模式，可理解为分析竞争对手的解决方案）
二、表单的组织
类似标签后面是否要防止冒号的问题，用户真的不关心。用户关心的是问题内容和所问的原因。
有些字段需要告诉用户填写的原因（ 为什么问这些问题，能为用户带来的好处 ），如果不能回答，就要考虑是否真的需要这个字段。
表单所提的问题即 标签要尽量的简洁清晰 。
如果简洁的标签容易引起用户的误会，应该 尝试使用自然语言的方式 。
表单较长或较复杂时应 考虑对表单内容进行分组 ，有助于浏览和快速完成填写。
有些时候很多问题需要按顺序回答，否则回答就没有意义。这时候人们需要看到所有问题，一个较长的网页是好的解决方案。通常这些问题会和一个主题相关。
有些 可选问题在表单填写完成后再问比较好 ，如“您如何知道我们”或者“您想进一步了解我们吗”。这样会比初始表单就提问能获得更多的答案。
可以通过Web惯例调查， 比较相似网站的设计方案 ，引导发现网上已经形成的常见表单组织结构，但是也要结合自身情况不要只停留在简单复制竞争对手。
对表单进行分组时， 每个内容组都从视觉上区别于表单的其余部分 ，但是对比太多也可能造成视觉污染，阻碍人们浏览表单。
信息设计专家爱德华,托佛特认为，信息由产生作用的差异构成，任何无助于布局的页面元素都会损坏布局。 采用最好的必要视觉信息来区分内容组 。
英文网站， 标签首字母应当大写 ，使内容组更容易浏览。
最后，祝大家六一儿童节快乐！永葆童心~
⑻ 一款优秀的vue前端中后台解决方案：vue-admin-design
完整演示地址： http://42.194.194.178/ （1M带宽初次访问比较慢）
前端演示地址1： https://mingxuan.net/page-admin-design
前端演示地址2： https://mingxuan.gitee.io/page-admin-design
github项目地址： https://github.com/mingxuan/vue-admin-design
github接口地址： https://github.com/mingxuan/node-admin-design
gitee项目地址： https://gitee.com/mingxuan/vue-admin-design
gitee接口地址： https://github.com/mingxuan/node-admin-design
- 登录 / 注销
- 路由权限
- 表格&表单
- 综合表格
- 表单列表
- 行内编辑表格
- 图片处理
- 图片裁剪
- 图片压缩
- 图片合成
- 视频处理
- 视频播放器
- 视频水印
- 组件
- 图片上传
- 拖拽
- 列表拖拽
- 组件拖拽
- 穿梭框
- 数字滚动
- 编辑器
- Markdown编辑器
- 富文本编辑器
- 树形结构
- 组织树
- 控件树
- Excel
- 导出Excel
- 导入Excel
- 错误页面
- 401页面
- 404页面
⑼ 前端开发应该知道的几个CSS网页表单布局技巧
1、绝对定位
在绝大过程中，想确定一个元素在网站当中的固定位置，绝对定位是实现这个方式的解决办法。在网页当中，绝对定位可精确的控制元素在网页当中的位置，我们可使用顶部、底部、左侧和右侧，附上一个像素值来控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。
2、覆盖所有样式
写CSS的时候都应该知道，当你想给一个元素添加一个新的CSS样式，但这个样式之前已经被定义过了。此时我们可以采用！important来定义。
例如，如果我想在我的网站的特定部分的H3标题是红色而不是黄色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情况，一般会分成文本居中和DIV的内容居中。
文本居中
文本居中使用text-align：center; 。如果想让文本在左右两侧，可以使用左侧或右侧。
DIV内容
DIV内容居中跟文本居中不一样。CSS可以这样定义：
#div1 { display: block; margin: auto; width: anything under 100% }
把宽度设置为“100％以下”的原因是因为如果它是100％宽度，那么如果是全宽度，并且不需要居中。最好有一个固定的宽度，如60％或550像素等。
4、垂直对齐（对于一行文本）
要使菜单的高度和文本的行高一致，可以这么设置：
.nav li{line-height:50px; height:50px;}
5、悬停效果
这适用于按钮，文本链接，网站的部分，图标等等。如果你想做一个悬停效果，可以试试：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
这个功能可以让你的h2标签的颜色从黑色变成黄色。
6、悬停效果过渡
对于悬停效果，如使用菜单或网站上的图像，我们肯定不希望颜色快速贴近结果，所以我们可以通过使用时间变化来达到过渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
这就使得样式上的改变，可以是从黑色变黄色的过渡时间是0.5秒，而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。
7、a标签的状态
我们在遇到a标签的时候，一定要给a标签做样式定义，否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过，更利于用户体验。
a:link {color: blue; } a:visited {color: red; }
8、轻松调整图像大小以适应
说到这个样式，我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手，我相信这个效果肯定有很多人都想做，当然，我提供的方法也只是其中的一种：
img {max-width:100%;height:auto;}
这个样式意味着最大的图像可能是100％，并根据图像宽度自动计算高度。在某些情况下，您可能还必须指定宽度为100％。
9、父级元素和子元素
如果ni不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器：
h1 > strong {color:red;}
特殊情况下你可能会想定义第N个子元素的样式，这样就可以用到下面这个样式：li:nth-child(n)
具体的使用方法可以去w3school上看。
10、将CSS应用于多个类或选择器
如果你想要在所有图片，博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目，用逗号分隔：
.blog,img,.sidebar {border: 1px solid #000;}