Ⅰ 關於Web表單設計的經驗分享
表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關於表單設計的知識點分享給大家～
一、什麼是表單？
表單在網頁中的主要功能是負責採集數據以及向伺服器傳送數據的。表單是採集用戶信息數據重要的途徑。好的表單設計能提升信息採集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息採集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什麼信息、該表單需要採集什麼內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然後按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位於左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由於人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側並不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小夥伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入後。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮游標的設計、輸入文字信息的設計，信息提示等，在輸入後：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容後，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽採用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該採用哪種對齊方式。標簽的處理原則就是要要盡量對齊，採用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽採用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果採用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，採取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
採用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用於橫向寬度較窄的頁面。
▵頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
▵右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊>右對齊>左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對於全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作並點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對於主按鈕層級要弱一些，通常採用線性形式。在一個頁面中可以出現多個次按鈕。
對於局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至於應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易於理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶滑鼠停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當滑鼠停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由於按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對於純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息後，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
▵及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對於簡單的表單設計過於細化的狀態是沒有必要的。
寫在最後的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什麼規律嗎？按鈕的上下邊距與左右邊距有什麼關系嗎？通過這些思考，然後去觀察總結，並轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法
Get點9切圖方法（內附切圖神器）
Ⅱ web伺服器表單的html設計問題
你說的這個很簡單啊，我不知道你知道不知道如何在web伺服器取的客戶端form里發過來的數據，限制可以雙向，一般在客戶端先進行一個判定（限制5位數和只能是數字，用trim和string長度限制即可，數字用正則判定就行）。你發的代碼是ajax，這個就解釋了獲得數據後如何刷新下，ajax就是無刷新顯示的意思，你發的代碼意思是：
function LED0()
{
loadXMLDoc("/led_red.cgi?red=1&t="+ Math.random(),
//獲取XML文檔對象，後面的參數是red=1，另一個隨機數是為了防止瀏覽器緩存
function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
//這里的意思是XMLHTTPrequest對象的狀態，4代表響應已完成可以獲取並使用伺服器回復的響應了，200代表正常
{
document.getElementById("red").src=xmlhttp.responseText;
//獲取id=red的dom對象，並更改該對象的src屬性=xmlhttprequest對象返回的內容
}
});
}
明白了沒？
Ⅲ 靜態頁面的表單數據如何收集。能否幫忙將代碼寫出來
首先需要明白，靜態頁面很難完成交互的。
完成你的需求必須要把表單中的內容做個存儲，如果不想用資料庫，可以存儲到txt中，
那麼再回到你的需求上來，靜態頁面可以考慮用js生成txt文件來存儲
利用jQuery獲取表單輸入的值，然後在把值寫入到生成的txt中。
具體涉及的代碼比較多，上面把思路給你了，自行網路吧
Ⅳ 網頁端表格設計指南
想像一下你為企業端產品設計了一個系統，或是設計了某個應用程序。在諸如此類的設計中都需要用到表格。這些表格設計不是那些設計網站中展示的非常精美的表格樣式，而是具有復雜交互和數百個單元格的表格。
在這種情況下，設計師會面臨許多挑戰。 例如：將設計與現有的前端框架進行匹配，或與破壞布局的「不舒服」數據進行斗爭。 我們將通過以下步驟來解決這些問題：系統化需求，原子化，定義交互。
所以，你已經采訪了目標受眾。現在是時候將他們的需求和需求拼湊在一起，並轉化為對設計有用的東西。例如，一位用戶說：「我需要看看我的數據如何影響應用程序的其他部分。」或者在看到另一個人使用軟體時，你注意到他只使用快捷方式而根本不摸滑鼠。這是什麼意思？第一個用戶的話是關於輸入驗證和提示。你需要考慮將警報或幫助信息附加到表中，或者開發一個有意義的顏色系統。這取決於領域和心理模型。觀察第二個用戶的工作可能是你需要設計鍵盤可設置快捷方式，可能需要考慮比「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設計趨勢
Ⅳ 求推薦現在有什麼好用的web報表工具
思邁特軟體Smartbi的報表工具就挺好用的，思邁特軟體Smartbi在大數據審計分析中的應用重點包括跨庫查詢、高性能存儲、疑點生成、自助分析、數據報送、財務分析、專題分析、自動取證單、大屏報送等。思邁特軟體Smartbi是一款基於輕量級Web報表工具，採用拖拽式設計模式，不需任何伺服器和組件支持，即可在 Mac、Linux 和 Windows 操作系統中，設計多種類型的報表。思邁特軟體Smartbi在Web平台的擴展，不但繼承了其強大的報表設計能力和高效的報表開發引擎，還提供了全新的跨平台報表設計器和純前端報表查看器，全面支持 Node.js、Angular、React、Vue 等前端開發框架。
Smartbi從報表開發的數據准備、樣式設計、數據計算、數據可視化、互動邏輯、共享發布六大步驟上都有特色的功能，充分利用了Excel的現有能力，堪稱企業報表平台的解決方案專家。尤其集成了Excel和ECharts後，使得Smartbi Insight具有豐富的展現力、強大的互動性（基於單元格和對象的數據模型）、超級靈活的布局能力，而且這些都可以在Excel界面上全部完成。
集群：提高系統性能和可靠性
高一致性：所有通過Smartbi產品進行的配置和文件都可以隨時同步到集群的各個節點。
高可用性：支持所有單機功能。單一節點宕機後，系統仍可正常訪問。
強擴展性：基於良好的架構設計，隨著節點的增加，系統所支持的並發幾乎呈線性增長，且每個節點的負載更加均衡。
使用簡單：可在平台中通過簡單的操作快速配置集群環境，其中節點的增刪支持熱部署。此外，還可在平台中監控各個節點的運行情況和日誌。
自成立初期，思邁特軟體Smartbi就一直堅持國產自主研發道路，先後獲得軟著數十項；同時與華為、深信服、新華三、達夢、麒麟軟體、人大金倉等合作夥伴通力合作，共同打造產品銷售、產品整合、產品應用的國產化可信生態體系，與上下游廠商、專業實施夥伴和銷售渠道夥伴共同為最終用戶服務。
報表工具靠不靠譜，來試試Smartbi,思邁特軟體Smartbi經過多年持續自主研發，凝聚大量商業智能最佳實踐經驗，整合了各行業的數據分析和決策支持的功能需求。滿足最終用戶在企業級報表、數據可視化分析、自助探索分析、數據挖掘建模、AI智能分析等大數據分析需求。
思邁特軟體Smartbi個人用戶全功能模塊長期免費試用
馬上免費體驗:Smartbi一站式大數據分析平台
Ⅵ web表格怎樣做得美
下面我們以一個簡單的示例來體會體會一下表單。
最終效果如下：
如何用web表格控制項FineReport做web表格
2
新建表單
點擊文件>新建表單，如下圖
如何用web表格控制項FineReport做web表格
拖入組件
如上圖所示的效果圖，我們可以看到該表單需要有1個下拉框控制項以及對應的1個標簽控制項和一個查詢按鈕，還需要一個以表格形式顯示數據的報表塊和顯示圖表的圖表塊，此時，我們確定了需要在表單中添加一個報表塊，一個圖表塊，3個控制項。
註：在組件介紹中，我們知道控制項即可依附於參數面板組件存在，也可以單獨以組件的形式存在，在這里可隨意使用哪種形式，效果都一樣，那麼使用依附於參數面板組件存在的形式。
參數組件
從工具欄中將參數組件拖拽至表單主體中，並將相應的三個控制項：下拉框、文本控制項和查詢按鈕拖拽至參數組件中，並設置標簽控制項的控制項值為：客戶，如下圖：
如何用web表格控制項FineReport做web表格
報表塊組件
從工具欄中將報表組件也拖拽至表單主體中，如下圖：
如何用web表格控制項FineReport做web表格
註：如果組件數量過多，在web端展示的時候自適應在一頁內顯示會比較擁擠，那麼此時可以在右側下方選中整體框架body，在右側上方的屬性表中將組件縮放修改為自適應原樣縮放，如下圖：
如何用web表格控制項FineReport做web表格
充滿展現區域：是指在web端展示的時候，所有組件自適應充滿整個瀏覽器頁面顯示，不出現滾動條；
自適應原樣縮放：是指在web端展示的時候根據製作表單時候組件大小比例顯示，並不縮放充滿整個web頁面，如果超過頁面大小，會出現滾動條。
其詳細顯示樣式請查看錶單樣式
圖表組件
再從工具欄中將圖表組件拖曳至報表塊組件的下方，如下圖：
如何用web表格控制項FineReport做web表格
控制項綁定數據
定義數據集
效果圖中，新建數據集ds1：SELECT 產品名稱,庫存量,產品.成本價 ,產品.單價 FROM 訂單,訂單明細,產品 where 客戶ID='${company}'and 訂單.訂單ID=訂單明細.訂單ID and 訂單明細.產品ID=產品.產品ID，參數company的默認值為VINET,。
註：參數名字必須與客戶ID下拉框控制項名稱保持一致。
客戶下拉框控制項
選中下拉框控制項拖拽到適當位置，下拉框控制項名設為「company」，數據字典來自FRDemo資料庫的客戶表（數據類型選擇資料庫表，資料庫選擇FRDemo），實際值和顯示值分別為客戶ID和客戶名稱，控制項值為VINET：
如何用web表格控制項FineReport做web表格
報表塊
參數面板與控制項都已經設置好之後，點開報表塊裡面的觸筆按鈕，進行報表塊編輯界面，如下圖：
如何用web表格控制項FineReport做web表格
新建數據集
效果圖中，報表塊裡面要顯示訂單明細數據，根據客戶ID進行過濾，新建數據集ds2：select * from 訂單 where 客戶ID='${company}'，company默認值為VINET.
表樣設計
如下圖所示，設計表樣：
如何用web表格控制項FineReport做web表格
點擊左下角的表單按鈕回到表單的設計界面，選中報表塊，可在右側的屬性表中設置其報表塊工具欄是否可見，如下圖：
如何用web表格控制項FineReport做web表格
圖表塊
滑鼠選中圖表塊所在區域，為該圖表綁定數據，圖表數據源來源於數據集數據源，其分類系列設置如下：
如何用web表格控制項FineReport做web表格
條件屬性
由於該圖表塊類型為組合圖，即需要通過圖表條件屬性來修改不同系列的圖表類型，如下圖，新增一個條件屬性，設置當系列序號為3的時候，其坐標軸為次坐標軸，圖表類型為折線圖：
如何用web表格控制項FineReport做web表格
13
註：設置條件選擇系列序號的時候需要與數據綁定時的數據列順序相匹配，在上圖設置圖表數據時，庫存量、成本價和單價的系列序號依次為1、2、3，條件屬性主要是設置庫存量系列用柱形圖展示，成本價和單價用折線圖展示並使用次坐標軸。在添加一個組合圖時，會默認添加2個條件屬性，詳細請查看組合圖
到此為止，表單就已經製作好了。
Ⅶ 表單在網頁中的作用是什麼
收集信息
最初，將Web設計為全球共享和瀏覽靜態信息的媒體，目前它已經發展為一種互動式媒體。如今，最普通的交互方式就是數據輸入表單。表單由數據輸入框、控制項、標簽和動作按鈕組成。表單可以是單一的搜索對話框，也可以是多頁面的調查問卷保單形式。Web表單中的數據輸入框和控制項主要是由標准控制項組成的，這些標准控制項是從Web誕生前的圖形用戶界面中繼承下來的：文本與數字框、單選按鈕、復選框、菜單等。然而，Web是一種新興的且飛速發展的媒體，在Web上，無論好壞，設計人員都在發揮創造力設計出全新的交互技術和控制項。
不幸的是，Web上設計出來的許多表單和控制面板幾乎沒有從圖形用戶界面設計人員那裡得到支持。有些表單太有創造力了，通用性不強。
文本框是表單中使用最頻繁的控制項，實際上是嚴重過度使用。Web上到處充斥著這樣的站點，站點中使用文本框來定義結構或者約束數據的值，例如時間、體積、日期、金額和未成年兒童的數量等。對於這類數據來說，文本框形式太自由了。除非在對話框的標簽中給出範例，否則幾乎沒有什麼可以作為有效值的標准，因此，很容易輸入無效值。通常在表單提交時檢查輸入的內容，如果輸入的某個值無效，那麼將得到一條如下的出錯消息：！無效的輸入，請重新輸入。
假如表單允許用戶進行選擇而不是直接輸入，那麼就不需要出錯消息了，因為根本不可能輸入無效值。不幸的是，許多網站沒有考慮這種方式。我要盡可能的在利用表單的功能的同時，更好的完成合理的用戶體驗設計。
Ⅷ web中表單發送數據有哪些方法各有什麼優缺點
常用的就GET和POST是HTTP請求的兩種基本方法
GET在瀏覽器回退時是無害的，而POST會再次提交請求。
GET產生的URL地址可以被Bookmark，而POST不可以。
GET請求只能進行url編碼，而POST支持多種編碼方式。
GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。
GET請求在URL中傳送的參數是有長度限制的，而POST沒有。
對參數的數據類型，GET只接受ASCII字元，而POST沒有限制。
GET請求參數會被完整保留在瀏覽器歷史記錄里，而POST中的參數不會被保留。
GET比POST更不安全，因為參數直接暴露在URL上，所以不能用來傳遞敏感信息。
GET參數通過URL傳遞，POST放在Request body中。
Ⅸ 如何使用OQSS在線問卷製作
產品簡介
OQSS是智能的web表單引擎，專業的問卷調研調查軟體，後台程序運行於web伺服器，前台使用瀏覽器進行操作，同時也是在線的web表單開發引擎，是第一款國產開放式的問卷調查系統及表單引擎。使用OQSS:你可以用來製作、發布、分析在線調查表，製作信息搜集表單，設計web程序，進行網路考試，在高節奏的互聯網上工作，每個企業都需要一套OQSS。
OQSS已經有5年歷史，逐漸發展成熟，擁有一批客戶，如中國搜索、普思電子、廈門大學、溫州大學、廈新電子、TCL集團、CSDN、讀者雜志社、女友雜志社、中國電信、中國移動、中國汽車網、珠海視聽網、賽迪顧問、深圳公安局、稅務局、紅塔集團...，在這些客戶的支持下，OQSS團隊不斷進取、不斷創新，堅持在軟體結構、人性化、安全性方面進行提升，使OQSS更好用、更易用，功能更強大。
OQSS的適用范圍
市場調查
客戶反饋
科研調研
數據收集
網站調查
表單開發
心理調查
考試試卷
web表單
.....
OQSS詳細功能:請點擊這里
OQSS的內核是一套表單開發引擎
OQSS的問卷模型
單行填充題(單行輸入控制項)
多行填充題(多行輸入控制項)
單選+輸入(redio點選控制項)
多選+輸入(checkbox多選控制項,可控選擇數)
矩陣題(矩陣單行輸入控制項)
對選項進行分值設定(根據分值計算結果)
集成輸入驗證(常見表單驗證)
多級下拉聯動
多選互斥
選項控制題呈現
圖形化選項
為題目選項設定分值，以實現問卷記分
URL參數傳遞
程序精細控制
防IP重復提交，可設置重復提交時間間隔
可設定問卷結束日期
可設定提交後的顯示頁，可設置為問卷評分結果，可設置提交後顯示問卷報表
問卷密碼前置，可設置問卷密碼，打開問卷前需要輸入密碼，保護你的問卷
即時開關問卷，即時開關問卷，使問開啟或者關閉
即時開關數據，即時開關結果數據，未開啟數據前匿名不用不可查看
集成問卷郵件群發
長期跟蹤同一樣本
在線樣本組管理
問卷郵件在線群發
可從斷點群發
直接在收到的Email中回答問卷
在線統計分析
顯示一張答卷所有內容
一頁中顯示多個答卷
頻率頻數分析
柱形圖、餅形圖
任意設定過慮條件分析
數據可導出為Excel文件
OQSS架構
B/S結構，.Net+AJAX+DB
內核:表單開發引擎默認用戶名[email protected] 密碼hello
Ⅹ Web表單設計—點石成金的藝術（一）
最近在讀《 Web表單設計—點石成金的藝術 》一書，頗受啟發。而且該書目前已經買不到了，好像二手書也買不到，特意找了pdf掃描版來讀，讀書過程中的一些感悟跟大家分享。
一、表單的設計
大多數人都不喜歡填寫表單，這也就說明了應該關注優秀表單設計。
而很多的特定數據來源都提供了衡量表單設計影響的方式：
（1） 可用性測試 （觀察人們與表單如何交互）
（2） 實地測試 （從人種學角度觀察人們在家中或辦公室中與表單互動的情況；）
（3） 客戶支持 （了解客戶填寫表單時遇到的問題）
（4） 網站追蹤
（5） 眼動跟蹤 （記錄人們如何理解表單的表現形式）
（6） Web慣例 （即查看該問題的通用解決模式，可理解為分析競爭對手的解決方案）
二、表單的組織
類似標簽後面是否要防止冒號的問題，用戶真的不關心。用戶關心的是問題內容和所問的原因。
有些欄位需要告訴用戶填寫的原因（ 為什麼問這些問題，能為用戶帶來的好處 ），如果不能回答，就要考慮是否真的需要這個欄位。
表單所提的問題即 標簽要盡量的簡潔清晰 。
如果簡潔的標簽容易引起用戶的誤會，應該 嘗試使用自然語言的方式 。
表單較長或較復雜時應 考慮對表單內容進行分組 ，有助於瀏覽和快速完成填寫。
有些時候很多問題需要按順序回答，否則回答就沒有意義。這時候人們需要看到所有問題，一個較長的網頁是好的解決方案。通常這些問題會和一個主題相關。
有些 可選問題在表單填寫完成後再問比較好 ，如「您如何知道我們」或者「您想進一步了解我們嗎」。這樣會比初始表單就提問能獲得更多的答案。
可以通過Web慣例調查， 比較相似網站的設計方案 ，引導發現網上已經形成的常見表單組織結構，但是也要結合自身情況不要只停留在簡單復制競爭對手。
對表單進行分組時， 每個內容組都從視覺上區別於表單的其餘部分 ，但是對比太多也可能造成視覺污染，阻礙人們瀏覽表單。
信息設計專家愛德華,托佛特認為，信息由產生作用的差異構成，任何無助於布局的頁面元素都會損壞布局。 採用最好的必要視覺信息來區分內容組 。
英文網站， 標簽首字母應當大寫 ，使內容組更容易瀏覽。
最後，祝大家六一兒童節快樂！永葆童心~