一天一个 vibe coding 术语课，今天讲输入框。
输入框就是那块让你往里面打字的区域。
登录要填手机号，下单要填地址，顶上那条要搜关键词，留言区要写好几行。这些地方长得不一样，名字也一串，其实都是输入框在变。
认它的时候，可以分成四件事来看：外框怎么画、旁边挂着什么字、框有多大、它此刻是什么状态。
今天就按这个顺序讲。
一、第一件，变体：外框怎么画
打开一个登录页或注册页，你通常会看见一排能点进去的格子。格子四面有细边框，中间是空的，透出后面的底色。这种画法叫描边输入框，英文 outlined，也写作 outline。
一排字段叠在一起的时候，描边最常见。它强调更低，轮廓却清楚。资料页、地址表、一长串要填的内容叠在一起，整页才压得住，不会糊成一片。
另一种输入框里面铺了一层浅底色，四边常常没有完整描边，底下留一条细线当指示。这种叫填充输入框，英文 filled。
它比描边更抢眼，放在别的内容中间时更容易被看见。可要是整张表都铺成浅底，一排排抢在一起，扫起来反而更累。
所以同一页字段很多的时候，更常见的是描边；需要某一个输入框更扎眼的时候，才轮到填充。
还有一种更轻的：几乎看不见外框，只在文字下面画一条线。这种叫底线输入框，英文 underline，也有人叫 underlined。
它现在不如前两种常见，但你仍会在一些干净的资料页上碰到。它省地方，也安静，可是和旁边正文的分界更弱，人有时要多看一眼才认出「这里能填」。密密麻麻的大表单里，一般不用它。
这三种外框轻重不一样：填充最抢眼，描边居中，底线最轻。选哪一种，看的是这一页字段密不密、你希望这个输入框有多显眼。
二、第二件，零件：周围挂着什么字
还是回到登录页。手机号输入框的上方或左侧，通常写着「手机号」三个字。人填到一半抬头看一眼，还知道自己在填哪一个。这三个字叫标签，英文 label。
标签有一条硬规矩：它得一直在，而且要贴着自己的那个输入框。开始打字之后还在，填完回头检查的时候还在。人的短期记忆很短，填表又是一个接一个，标签一消失，就只好凭脑子硬记「刚才那个是啥」。
有的界面为了省地方，会把「手机号」先放在框里面；你一点进去或一开始打字，这几个字就缩小、飘到框的上沿去。这种摆法叫浮动标签，英文 floating label。
它比「框外什么都没有、只靠框里一行浅灰字撑着」好一点，因为字不会彻底消失，填的时候还能当备忘。
但空着的时候，框里已经有字，人有时会当成已经填好的内容，也更不容易一眼扫到「这里还空着」。
地方紧、尤其是手机上，浮动标签常见。只要版面允许，标签和说明都放在框外、始终看得见，仍然更稳。
再看输入框还空着的时候，里面有时躺着一行浅灰色的字，比如邮箱里的「name@example.com」，日期里的「YYYY-MM-DD」。这行灰字叫占位符，英文 placeholder。
占位符的活只有一个：示范该怎么填。
它干不了标签的活。读取屏幕的软件不把它当成标签来读，人一开始打字，它自己也就没了。
密码输入框下方，常常还有一行更小的字：「至少 8 位，包含字母和数字」。昵称下面可能写「提交后不可修改」。这种一直留在框外的说明，叫辅助文字，英文 helper text，也有人叫 supporting text。
辅助文字跟占位符不同：占位符打字就消失，辅助文字可以一直看着。凡是填错了要付出代价的提醒，都该放在辅助文字里。
你填完点提交，某一个输入框错了，边框会提示出错，下方那一行说明也会换成「请输入 11 位手机号」这类话。换上来的这一行，叫错误文字，英文 error text。
很多界面里，辅助文字和错误文字抢同一个位置：正常时显示说明，出错时换成原因和改法。
错误文字要回答两件事：哪里不对，以及该怎么改。「格式错误」几乎等于没说，「请输入 11 位手机号」才是能动手的。
报错也不能只靠把边框涂红。有人分不清红和绿，得边框、文字、必要时再加一个小图标，几件事一起到位，他才找得着出错的那个输入框。
再看下单页的金额、网址这类输入框。框内左边有时印着「¥」或「https://」，右边有时印着「元」或一只小眼睛。左边叫前缀，英文 prefix；右边叫后缀，英文 suffix；合起来有人叫 affix。
单位已经印在框上，人就不用自己记得还要写「元」；协议头已经在那儿，他只填后面一段就行。能印在框上的，就别逼他记在脑子里。
密码输入框右边那只小眼睛也是后缀，用来切换显示和隐藏，让人确认自己没打错，而不是盲打完再赌一次提交。
三、第三件，尺寸：它有多大
同一张注册表上，你会看见各行输入框高度齐齐的。组件库一般给小、中、大三档固定高度，英文 small、medium、large，代码里常缩写成 sm、md、lg。有了这几档，才不会有的框扁、有的框高，看起来像拼凑出来的。
宽度也要跟这个输入框要填的东西匹配。手机号只有 11 位，不必拉成整屏那么宽；收货地址很长，就不该缩成短短一条。
人看着框的长短，其实在猜自己该填多长。框和内容差太远，填起来更容易错。
手机上的登录、注册，输入框经常横着占满一整行。这种叫通栏，英文 full width，也有人叫 block。
高度还有一条硬线：能点进去的范围不能太小。手指按不准的输入框，人会点好几次才进去，或者误点到旁边那个。
目标越大、离手指越近，点起来越快，点错也越少。这条老规矩叫费茨定律。
四、第四件，状态：它此刻是什么样
你点进手机号输入框，光标在里面闪，外框常常会加深或换成主色，有的还会加粗一圈。这一刻叫聚焦态，英文 focus。它在告诉你：现在正在填的是这一个。
没用鼠标、靠键盘 Tab 一个一个跳的人，靠的也是这一圈变化。没有它，就不知道自己跳到哪一个了。
还没人碰、也还没报错的时候，叫默认态，英文 default。鼠标只是移到输入框上、还没点进去，有的界面会让边框稍微变深，那叫悬停态，英文 hover。手机上通常没有悬停。
有的表单会先让你选城市，街道那个输入框先是灰的，点不进去也打不了字。这叫禁用态，英文 disabled，意思是「现在还轮不到你」。
订单详情里的订单号，框里有字，看得见，也能选中复制，但改不了。这叫只读，英文 readonly，也写作 read-only。它跟禁用不是一回事：禁用是条件还没到；只读是这个输入框本来就不是给你改的。
提交之后某一个不对，边框提示出错、下方出现错误文字，这叫报错态，英文 error，也叫 invalid。
报错什么时候冒出来，本身也是状态的一部分。人还在输入框里打字，格式明明还没填完，就弹「格式不正确」，是在打断他。
更常见、也更不伤人的时机是：他离开这一个，或者点了提交之后，再指出问题。一旦已经报过错，他改的时候就立刻撤掉红字，让他知道自己改对了。
一上来就满屏红，或者每敲一个键都骂一句，都会把人吓停。
输入框上的颜色，多半就叠在这些状态上：聚焦用主色，报错用红色，偶尔校验通过闪一下绿色，那叫成功态，英文 success。颜色在这里主要跟着状态走，不是另有一套可以随便挑的色盘。
四件事讲完了，还得说一句：它们互相不挨着，可以随便搭。描边的框会有报错态，填充的框也能拉成通栏，搭出来的还是同一个输入框，不是另一个品种。
五、还有三种长得不一样的
顶栏要搜商品、搜好友，左边或框里常有一个放大镜，有的右边还有一个小叉。这种叫搜索输入框，英文 search input，或者 search field。
放大镜是在说「这里提交的是查找」，小叉是一把抹掉关键字，不用一格一格退格。它的外壳还是输入框，差别主要在零件和用途上。
留言、简介、详细地址，要写好几行。输入框会拉高，右边常常带着滚动条。这种叫多行输入框，英文 textarea，也叫 multiline。
单行输入框里回车多半表示「我填完了」，多行里回车就是换行。
高度也要跟要写的东西匹配。明明要写一段话，却只给一行高，人边写边看不全，错得更多。
登录页的密码输入框，打进去的字会变成圆点或星号，旁边常有那只小眼睛。这种叫密码输入框，英文 password input，或者 password field。外壳还是普通输入框，只是把显示方式换掉了，并带上切换可见的后缀。
六、最常见的一条用错
最后说一个最常见的用错：拿占位符当标签用。
很多界面为了省地方，框上面不写「手机号」，只在框里面用占位符写「请输入手机号」。还没填的时候，看上去好像挺干净。
可人一开始打字，占位符就没了。填到一半，或者填完回头检查，框里只剩一串数字，上面什么提示都没有。
他得靠短期记忆硬撑。字段一多，这种情况成倍变糟。
占位符对比度又低，有人还会当成已经填好，直接跳过。
标签负责「这一个是什么」，而且要一直在。占位符最多再补一个填写例子。真正要紧的规则，写在框下方的辅助文字里。
没有标签、只靠占位符撑着，不是简洁，是把说明写在一块一碰就消失的地方。
所以一排输入框看着差不多，其实还是那四件事拼出来的：外框多重、旁边挂什么字、框有多宽、此刻是什么状态。这四件分开说清楚，改起来才改得到点子上。
以后 AI 回你的话里蹦出 floating label、helper text 这种词，别自己猜，让它用大白话说清那是贴在哪、干什么用的、跟你现在页面上哪个像。
