表單頁面功能元素設計攻略:字段種類及屬性說明

5 評論 36813 瀏覽 198 收藏 11 分鐘

本文參考了一些表單編輯平臺的字段功能,基本上涵蓋了平時常用的所有表單字段。

字段種類

  1. 文本:單行文字、多行文字、描述
  2. 號碼
  3. 數值:數字(小數點后保留)
  4. 金額
  5. 計算公式
  6. 選項:單級下拉框、多級下拉框(級聯)
  7. 下拉菜單:單項選擇、多項選擇
  8. 矩陣單選
  9. 矩陣填空
  10. 工作區成員
  11. 日期和時間
  12. 圖片:圖片單選、圖片多選
  13. 附件:上傳文件
  14. 分頁:向下展開、設置單頁數據數量、顯示全部、滾動加載
  15. 網址
  16. 評分
  17. 關聯:表單關聯、字段關聯、綜合計算公式的關聯

實例字段:聯系信息

  1. 姓名
  2. 昵稱
  3. 性別
  4. 身份證號
  5. 手機
  6. 座機
  7. 郵箱
  8. 微信
  9. QQ
  10. 地址/地理位置
  11. 備注

表單字段公共屬性說明

基礎

  1. 字段標題:此屬性用于告訴填寫者應該在該字段中輸入什么樣的內容。通常是一兩個簡短的詞語,也可以是一個問題。
  2. (頁面初始化)默認值:設置后,此值將作為默認值顯示在該字段的輸入框中。如果不需要設置默認值,請將此處留空。
  3. 字段提示:此屬性用于指定對該字段進行一些附加說明,一般用來指導填寫者輸入。
  4. 數據類型:字母(分大小寫和不分大小寫)、阿拉伯數字、中文(一個漢字=兩個字符)、限定種類的混合字符數據(字母開頭、只限字母和數字、只限字母、只限數字、字母數字英文“_”中文“-”)
  5. 標識

布局設置

  1. 排列方式:縱向、橫向
  2. 寬度占整行的百分比:占總寬度的百分比。
  3. 設置表單寬度值和高度值

校驗

  1. 必填校驗:勾選后,該字段將不允許為空,在字段名稱后會有紅色的星號標出。如果填寫者在提交表單時必填字段沒有輸入,系統將會給出相關錯誤提示,表單將無法提交。該屬性常用于需要強制填寫者必須輸入的字段。
  2. (單選)設置“其他”必填:勾選后,當填寫者選中“其他”時,需要同時填寫“其他”后面的文本框;如果填寫者在提交表單時,該文本框沒有輸入內容,系統將會給出相關錯誤提示,表單將無法提交。
  3. 唯一校驗:勾選后,該字段將將不允許重復,在字段名稱后會有紅色的星號標出。如果填寫者在提交表單時字段不唯一,系統將會給出相關錯誤提示,表單將無法提交。該屬性常用于需要強制填寫者輸入不重復的字段。
  4. 只能填數字:勾選后,該字段只能填寫數字,數字之外的字符將不能正常提交表單。
  5. 重復校驗:(不能和已有數據重復)勾選后,該字段將不允許提交重復值。填寫者在提交表單時,會檢測數據庫中是否已存在相同的值;如果存在,將給出錯誤的提示信息,提交將失敗。常用于電子郵件,用戶名等需要驗證填寫者身份的字段。
  6. 限定范圍:勾選設置后,填寫者只能提交這個列表范圍內的數據,這個列表范圍外的數據將不能提交表單。通常用于需要限制報名者身份的場景。
  7. (長度)最少填寫字符:勾選設置后,系統會限制填寫者填寫此字段的最小字符數。
  8. (長度)最多填寫字符:勾選設置后,系統會限制填寫者填寫此字段的最大字符數。
  9. (可見權限)字段隱藏:勾選后,該字段只有管理員及數據維護員可見,普通填寫者將看不到此字段;通常適用于當你想為已提交數據設置一些特殊屬性,如狀態(處理/未處理)或優先級(重要/一般)。
  10. 緩存填寫數據:(為填寫者緩存所填內容,下次自動填寫)勾選后,填寫者第二次打開你的表單時,第一次填寫的字段數據將會自動顯示出來,減少重復填寫。(注:清除瀏覽器cookie后該功能將會失效)
  11. (單選或多選)選項展示順序隨機:勾選后,該字段的選擇項在每次訪問時出現的順序是隨機的。

統計

統計數據:對該字段的數據總數求和

權限

增刪改查

數據提交

提交方式:按步驟提交——點擊確定或完成或提交或更新按鈕向數據庫請求提交數據、失去焦點提交并更新數據、數據模塊填寫完成并失去焦點時自動提交

字段的特殊屬性

數字:最多支持15位數字。如需要用作“身份證號碼”填寫,請選用“單行文字”。

時間:

日期:

日期校驗

起始日期:

勾選設置后,系統會限制填寫者填寫此字段的最小值。

結束始日期:

勾選設置后,系統會限制填寫者填寫此字段的最大值。

單選選項(圓形)

多選選項(方形)

單張圖片

多張圖片

矩陣單選:

矩陣填空:

下拉框:

描述:

顯示分割線

翻頁:

評分:

級聯:

上傳文件:

上傳文件的大小限制在20MB以內

最大文件數量:此屬性用于限制填寫者最大上傳文件數量。

手機號:

  • 限定手機號:限定范圍——勾選設置后,填寫者只能提交這個列表范圍內的數據,這個列表范圍外的數據將不能提交表單。通常用于需要限制報名者身份的場景。
  • 短信驗證:勾選后,填寫者在填寫該字段時會收到一條驗證碼用于驗證填寫者手機號真實性。(注:短信費用將會從你的賬戶中扣除。)

地理位置/地址:

本文參考了一些表單編輯平臺的字段功能,基本上涵蓋了平時常用的所有表單字段。

 

作者:Aaron,微信公眾號:四方策論weiwonder,金融領域B端產品經理。

本文由 @Aaron 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 如果是地理位置字段應該注意哪些呢

    回復
    1. 自動定位或目標搜索
      輸入方式:
      1、可搜索指定位置
      2、僅可獲取當前位置

      限制只可在指定地點的周邊輸入
      1、不限制輸入位置
      2、通過固定地點限制(多地點和單地點)
      3、通過其它位置字段限制(關聯字段或條件)

      數量:是否可以輸入多個位置
      必要性:必填選填
      顯示方式:顯示地圖、不顯示地圖(只顯示位置文本信息)
      說明備注

      來自浙江 回復
  2. 干貨收藏!不過有好多圖片顯示不出來了

    來自江蘇 回復
    1. 關注:四方策論公眾號

      來自浙江 回復
  3. 絕對干活~可以當成字典日后用時可以查漏補缺! :mrgreen:

    來自北京 回復