輸入框 Input

你可能會這樣說

讓人家填 Email 的那個格子，怎麼做才不會被亂填？還有那種灰灰的提示字。

白話解釋

輸入框是讓使用者打字的地方：姓名、Email、備註。組成它的三件事你一定看過但未必叫得出名字：標籤（Label，欄位的名字，永遠要顯示）、佔位提示（Placeholder，灰色的例子文字，一打字就消失）、提示訊息（錯誤或說明，出現在框下面）。

最容易踩的坑：把欄位名字放在佔位提示裡（框內灰字只寫「Email」），使用者一打字，名字就消失了，回頭就忘了這格是什麼。正確做法是標籤在外面，佔位提示放格式範例（如 name@example.com）。

跟 AI 協作時，把「驗證規則」講清楚：Email 格式對不對、必填有沒有填、錯了要出現什麼訊息、什麼時候檢查（打完字就查，還是按送出才查）。這些不講，AI 會給你一個好看但來者不拒的輸入框。

親手試試

試試：打幾個亂字然後點到框外（離開欄位時檢查）；或直接按送出（整份檢查）。注意「電子郵件」三個字一直在外面的標籤上，不是框裡的灰色字。

圖 2-3　試著送出一個不合格的 Email，看錯誤狀態怎麼出現。

別搞混

輸入框家族成員不少，依「要使用者提供什麼」來選就對了。

使用者自由打字：姓名、備註、搜尋字。適合答案無法預先列出的資料。

下拉選單 Select

答案只能從清單裡挑一個：縣市、付款方式。能列舉就用選的，別讓使用者用手打的——打字會錯，選的不會。

文字區域 Textarea

多行的輸入框：意見回饋、訂單備註。跟輸入框的差別就一句：內容會換行的，用它。

這樣對 AI 說

中文就可以

請幫我做「聯絡我們」表單，三個欄位：

1. 姓名（必填）、Email（必填、要檢查格式）、留言（必填、至少 10 個字）。
2. 每個欄位的標籤要顯示在框的上方，佔位提示放範例（如「王小明」「name@example.com」）。
3. 格式錯誤或漏填時：框變紅、下方出現具體的錯誤訊息（不要只寫「格式錯誤」，要說哪裡錯）。
4. 檢查時機：打完字離開欄位時先檢查一次，按送出時再全部檢查。
5. 全部通過才能按送出按鈕。

「標籤在外面」「錯誤訊息要具體」「什麼時候檢查」——這三句就是輸入框的品質分水嶺。

延伸閱讀

同一課的其他詞

下拉選單Select 開關Switch 文字區域Textarea 核取方塊Checkbox 單選按鈕Radio Button 日期選擇器Date Picker

「你可能會這樣說