表單頁(yè)面功能元素設(shè)計(jì)攻略:字段種類及屬性說(shuō)明

劉偉
5 評(píng)論 36967 瀏覽 198 收藏 11 分鐘

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

字段種類

  1. 文本:?jiǎn)涡形淖?、多行文字、描?/li>
  2. 號(hào)碼
  3. 數(shù)值:數(shù)字(小數(shù)點(diǎn)后保留)
  4. 金額
  5. 計(jì)算公式
  6. 選項(xiàng):?jiǎn)渭?jí)下拉框、多級(jí)下拉框(級(jí)聯(lián))
  7. 下拉菜單:?jiǎn)雾?xiàng)選擇、多項(xiàng)選擇
  8. 矩陣單選
  9. 矩陣填空
  10. 工作區(qū)成員
  11. 日期和時(shí)間
  12. 圖片:圖片單選、圖片多選
  13. 附件:上傳文件
  14. 分頁(yè):向下展開、設(shè)置單頁(yè)數(shù)據(jù)數(shù)量、顯示全部、滾動(dòng)加載
  15. 網(wǎng)址
  16. 評(píng)分
  17. 關(guān)聯(lián):表單關(guān)聯(lián)、字段關(guān)聯(lián)、綜合計(jì)算公式的關(guān)聯(lián)

實(shí)例字段:聯(lián)系信息

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

表單字段公共屬性說(shuō)明

基礎(chǔ)

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

布局設(shè)置

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

校驗(yàn)

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

統(tǒng)計(jì)

統(tǒng)計(jì)數(shù)據(jù):對(duì)該字段的數(shù)據(jù)總數(shù)求和

權(quán)限

增刪改查

數(shù)據(jù)提交

提交方式:按步驟提交——點(diǎn)擊確定或完成或提交或更新按鈕向數(shù)據(jù)庫(kù)請(qǐng)求提交數(shù)據(jù)、失去焦點(diǎn)提交并更新數(shù)據(jù)、數(shù)據(jù)模塊填寫完成并失去焦點(diǎn)時(shí)自動(dòng)提交

字段的特殊屬性

數(shù)字:最多支持15位數(shù)字。如需要用作“身份證號(hào)碼”填寫,請(qǐng)選用“單行文字”。

時(shí)間:

日期:

日期校驗(yàn)

起始日期:

勾選設(shè)置后,系統(tǒng)會(huì)限制填寫者填寫此字段的最小值。

結(jié)束始日期:

勾選設(shè)置后,系統(tǒng)會(huì)限制填寫者填寫此字段的最大值。

單選選項(xiàng)(圓形)

多選選項(xiàng)(方形)

單張圖片

多張圖片

矩陣單選:

矩陣填空:

下拉框:

描述:

顯示分割線

翻頁(yè):

評(píng)分:

級(jí)聯(lián):

上傳文件:

上傳文件的大小限制在20MB以內(nèi)

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

手機(jī)號(hào):

  • 限定手機(jī)號(hào):限定范圍——勾選設(shè)置后,填寫者只能提交這個(gè)列表范圍內(nèi)的數(shù)據(jù),這個(gè)列表范圍外的數(shù)據(jù)將不能提交表單。通常用于需要限制報(bào)名者身份的場(chǎng)景。
  • 短信驗(yàn)證:勾選后,填寫者在填寫該字段時(shí)會(huì)收到一條驗(yàn)證碼用于驗(yàn)證填寫者手機(jī)號(hào)真實(shí)性。(注:短信費(fèi)用將會(huì)從你的賬戶中扣除。)

地理位置/地址:

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

 

作者:Aaron,微信公眾號(hào):四方策論weiwonder,金融領(lǐng)域B端產(chǎn)品經(jīng)理。

本文由 @Aaron 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 如果是地理位置字段應(yīng)該注意哪些呢

    回復(fù)
    1. 自動(dòng)定位或目標(biāo)搜索
      輸入方式:
      1、可搜索指定位置
      2、僅可獲取當(dāng)前位置

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

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

      來(lái)自浙江 回復(fù)
  2. 干貨收藏!不過(guò)有好多圖片顯示不出來(lái)了

    來(lái)自江蘇 回復(fù)
    1. 關(guān)注:四方策論公眾號(hào)

      來(lái)自浙江 回復(fù)
  3. 絕對(duì)干活~可以當(dāng)成字典日后用時(shí)可以查漏補(bǔ)缺! :mrgreen:

    來(lái)自北京 回復(fù)
专题
12731人已学习15篇文章
知识付费是内容赛道上的一块高地,有着上百亿的市场规模。本专题的文章分享了关于对知识付费的观点。
专题
12084人已学习12篇文章
精细化运营、抓住老用户、提升用户复购,则将是品牌需要着重留意的地方。本专题的文章分享了提升复购率的N种方法。
专题
15993人已学习12篇文章
数据中台是处于业务前台和技术后台的中间层。本专题的文章分享了如何搭建数据中台。
专题
34417人已学习23篇文章
不懂心理学,怎么懂你的用户;不懂你的用户,又怎么做好产品的设计和运营。
专题
13497人已学习11篇文章
本专题的文章以To G领域为例,从产品经理的角度,分享TO G产品设计指南。