1/4
Day 08 · Input 输入框：短文本，自己填
2026/6/17 · 9:15
图集
Input 是让用户输入和编辑短文本的表单控件。它不是「所有输入」的统称：长句说明交给 Textarea，固定选项交给 Select；短文本、用户自己填，才是 Input 的主场。Material Design 将 Text field 用于输入和编辑文本，并强调字段状态、Label 与错误提示要清楚可辨。1
图 2：Input / Textarea / Select 的边界对比（本期生成图）
本期先记住三个边界：
- Input：短文本自由输入，比如姓名、邮箱、标题、搜索词。
- Textarea：长文本输入，比如评论、备注、需求说明。
- Select：固定选项选择，用户不需要自己组织文本。
图 3：Text / Password / Search / Textarea 四种常见输入形态（本期生成图）
做 Input 时，Label 不要省。旧版 Material 规范也明确写到每个文本框都应有 Label；Placeholder 只是空字段里的提示或示例，不应承担 Label 的职责。2 Ant Design 的数据录入规范同样强调：Label 要直白，并提供足够上下文，别让用户猜该填什么。3
图 4：Input 的该用与别用清单（本期生成图）
一句判断：短文本自己填 → Input。
如果答案已经被系统列好，用 Select；如果只是开/关状态，用 Switch；如果要写一整段话，用 Textarea。
评论