表單佈局

簡介

功能簡介

表單佈局包括對表單的欄位排列、標題樣式、輸入框寬度等進行自訂設定。透過表單佈局，可以將表單欄位合理進行分佈，提高表單界面美觀度，提升資料填報效率。

應用場景

預期效果

如「員工檔案」中，透過表單佈局，設定欄位多列展示，效果如下：

設定方法

設定入口

進入「表單設計」頁面，在「表單屬性 > 表單佈局」處即可設定佈局：

列數設定

當表單中欄位數量較多時，可以將表單佈局設定為多列，以減少填寫人員滑動頁面的頻率。

表單佈局支援「單列」、「雙列」、「三列」，以及「四列」這四種排列方式，點擊下拉單選即可切換：

附註：

表單多列布局只在電腦端生效，行動裝置僅支援單列布局。

更多設定

除了欄位佈局的基礎設定，點擊，可以對欄位標題、描述資訊等進行更加細緻的設定。

更多設定中支援設定的具體內容如下：

切換電腦端/行動裝置

表單佈局中，支援切換「電腦端」和「行動裝置」查看預期效果，並對「電腦端」和「行動裝置」分別設定佈局效果。

其中，電腦端和行動裝置支援設定的內容包括：「欄位標題位置」、「欄位標題樣式」、「欄位描述資訊樣式」、「輸入框寬度」（僅電腦端支援設定）。

欄位標題位置

欄位標題位置可以設定為「上下」或「左右」兩種佈局方式，兩種佈局方式的展示效果如下：

欄位標題樣式

當欄位標題位置設定為「左右」佈局時，支援對欄位標題的如下樣式進行自訂設定：

欄位描述資訊樣式

當欄位標題位置設定為「左右」佈局時，支援設定欄位描述資訊樣式為「顯示」或者「隱藏」。

設定為「顯示」時，描述資訊將直接在輸入框下方顯示；設定為「隱藏」時，描述資訊將以小提示的方式展示，點擊提示符號，彈出對應的描述資訊，效果如下圖：

附註：

1. 當「欄位標題位置」設定為「上下」佈局時，欄位描述資訊預設顯示在欄位標題下方；

2. 「分割線」欄位的欄位描述資訊始終顯示不可隱藏。

輸入框寬度

輸入框寬度可以設定為「標準」或「自動」：

附註：

表單佈局選擇「多列」時纔會觸發「輸入框寬度」的設定。

兩種設定的效果如下圖：