⑴ 一. 低代碼 - 基於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;}