Form 表單

把輸入元件組成一張表單:排版、標籤、驗證、按鈕的整體規則。使用 Element Plus 的 el-form + el-form-item。

設計準則

• 標籤位置:標準後台表單用右對齊(EP 預設,欄位掃視快、省高度);彈窗、側欄等窄容器用頂部;同一產品同一場景只用一種
• 標籤文字 2–6 字、不加冒號;必填的紅色星號由驗證規則自動帶出,不要手畫
• 表單寬度收斂(單欄 400–560px),欄位寬度跟著內容長度,不要每個欄位都滿版
• 驗證時機:格式錯誤在離開欄位(blur)時提示,必填在送出時檢查;錯誤訊息寫「怎麼修」,不是只說「格式錯誤」
• 動作按鈕放表單左下、與欄位對齊:主要按鈕在右、取消在左(同 Button 規範);送出中要有 loading
• 行內表單(inline)只用於列表頁的篩選列,欄位 4 個以內;超過就做成展開式篩選面板

基本用法

標準的建立表單:必填星號、選填欄位用 placeholder 說明預設行為:

loading

標籤位置

切換看三種位置的差異(標籤欄固定 120px 寬,才看得出左右對齊的不同); 右對齊是後台預設,頂部給窄容器:

loading

尺寸

在 el-form 上設 size,整張表單(含按鈕)一起換,不要逐欄位設定;後台預設 default:

loading

驗證

必填 + 格式驗證;直接按「建立活動」看送出時的整表驗證:

loading

行內表單

列表頁篩選列的標準版型:

loading

無障礙

設計稿層面要顧到的三件事:

• 每個欄位都要有標籤,不能只靠 placeholder——標籤會自動和輸入框關聯(點標籤即聚焦),螢幕閱讀器也才唸得出欄位名
• 一個欄位放多個輸入(起訖日期)時,每個輸入要有自己的 placeholder 說明
• 顏色不是唯一的錯誤指示:錯誤除了紅框一定要有文字訊息(EP 預設行為,不要為了版面把訊息拿掉)

loading

Do / Don't

✅ Do	❌ Don't
後台右對齊、窄容器頂部	同產品混用標籤位置
格式 blur 驗、必填送出驗	每打一個字就跳紅字
錯誤訊息寫怎麼修	「格式錯誤」四個字打發
表單寬度收斂 400–560px	欄位跟著螢幕拉滿版
主要按鈕在右、與欄位對齊	按鈕漂在頁面正中央

給工程師

完整 API 見 Element Plus Form 文件。 本站規範優先於 EP 文件中的視覺建議。