界面图鉴
输入框Input
你可能会问
输入框到底是什么？一个小小的文本框有什么好讲的？
简单来说
接收用户键入内容的基础控件，细节全在标签、提示和状态上。
01 · 拆开看看
这一块由什么组成
它是用户和系统之间最基本的对话窗口：你敲什么，它收什么。细节全在状态上——聚焦、报错、禁用，每个状态都在跟用户说话。组成：
标签Label
说明这格要填什么，永远别省。
输入区Field
接收内容的框体本身。
占位提示Placeholder
框里的灰色示例，聚焦后消失——代替不了标签。
状态样式States
聚焦高亮、报错红框、禁用置灰。
02 · 常见变体
同一个零件，几种摆法
标签在上、框在下，最稳的排法。
框里带个图标提示用途，搜索框常用。
红框加下方红字，指出哪里不对。
03 · 火眼金睛
这个设置面板里，哪一个是输入框？
三个控件都在收集你的意思，但只有一个让你自由发挥。
点一块试试，看看它叫什么
输入框Input
就是它！带标签的文本框，敲什么收什么。
下拉选择Select
不是它。看着像输入框，但带小箭头、点开是列表——只能选，不能打。
开关Toggle
不是它。非开即关的是开关，不接收文字。
04 · 用与不用
什么时候该上它
适合
- 自由文本：姓名、邮箱、密码
- 数字、日期等有格式的值
- 搜索关键词
先别用
- 选项有限且已知——用下拉或单选
- 非开即关——用开关
- 大段长文——用多行文本域
05 · 想一想
一道题，检查眼力
占位提示（placeholder）里写着「请输入邮箱」，上方的标签就可以省了吗？
对。填到一半忘了这格是什么，只能删掉重看——标签要常驻。
简洁的代价是用户靠记忆填表。所有靠记忆的设计，最后都会变成用户的错。
标签说「这格是什么」，占位说「可以这样填」——一个是名字，一个是示例。
06 · 说给 AI 听
让 AI 改它时，这样说
把每个状态（默认、聚焦、报错、禁用）都说清楚——AI 默认只做默认态。
邮箱输入框：标签、占位示例，失焦时校验格式
密码框加一个显示/隐藏的小眼睛
输入框聚焦时边框变品牌色
报错时红框加下方红字提示，别用弹窗
最容易踩的坑
占位提示不能代替标签：字一敲它就没了。让用户靠记忆填表，错都会算在用户头上。