输入框参考图集
Input Reference Sheets
8 张 AI 生成的输入框设计参考海报：从基础视觉结构、状态与操作、格式与约束， 到验证码、格式掩码、前后缀、步进器、字数限制、分段日期、富文本、语音输入与 快捷键录入——把"一个输入框到底能有多少形态"一次讲全。
看见 → 理解 → 借用
从这张图借用什么：三种标签位置
点编号，查看原图中的具体位置与局部细节。它是 AI 生成的静态参考图；以下区分图中可见的结构和实现时需要补齐的行为。
标注 1 · 原图第 01 行
把标签、输入值和说明分开
- 图中看见什么
- 原图第 01 行中，“工作邮箱”位于边框上方，邮箱值在白色输入区域内，“用于接收项目通知”在下方。三层文字靠近同一个字段，没有挤在一行。
- 可以借用什么
- 适合资料、注册等需要反复核对的表单。保留常驻标签和紧邻字段的说明；实现时让标签与输入框关联，让辅助说明可被读屏读取。
- 什么不应照搬
- 不要把海报里的浅灰文字和细边框当作已经合格的生产规格。它没有展示错误、必填或键盘焦点；这些状态需要在真实页面里补齐并检查。
标注 2 · 原图第 04 行
填写后，字段名称仍然在场
- 图中看见什么
- 原图第 04 行把“未填写”和“输入后”并排：左边“邮箱地址”在框内，右边标签移到上边框，输入值留在框内。箭头表示这两个静态状态的关系。
- 可以借用什么
- 可借用“填写后仍认得字段”的原则。若采用浮动标签，应覆盖自动填充、已有值、清空和聚焦状态；在放大文字和长标签下检查重叠。
- 什么不应照搬
- 不要仅放一个会消失的 placeholder 来模仿它。长标题、较大字号或高密度表单若放不下浮动标签，使用外置常驻标签更容易保持清晰。图里的箭头也不证明动画或焦点逻辑已实现。
标注 3 · 原图第 05 行
边框内也要保留文字层级
- 图中看见什么
- 原图第 05 行的同一描边容器里，小号“工作邮箱”在上，较大的邮箱值在下。标签没有占用输入值的位置，两者共用一个容器。
- 可以借用什么
- 可借用“同一字段内分两层”的组织方式，让密集资料页仍能同时显示名称和值。为两层内容预留真实高度，标签仍应有明确的语义关联。
- 什么不应照搬
- 不要为了紧凑压成固定矮高度，也不要把标签当作用户可编辑内容。长邮箱、换行标签、200% 文字缩放或多语言页面都需要额外空间；海报没有证明这些情况可用。
实现依据：W3C WAI · 表单标签 · 表单说明
到输入框实验室验证真实交互 →生图 Prompt（可复现整套图）
制作一张竖版「输入框设计参考」海报，编号 NN，右上角标注本张主题（如 基础视觉结构 / 状态与操作 / 格式与约束）。米白背景（#FAF9F5），黑色粗标题「输入框设计参考 NN」+ 灰色小字 INPUT DESIGN REFERENCE。正文纵向排列 5 个条目，每条左侧是大号灰色序号 01～05、 英文模式名（如 OTP Input / Masked Input / Affix Input / Number Stepper / Character Counter）、中文模式名与 2×2 关键词短语；右侧浅灰圆角卡片内是该输入模式的真实感演示 （如 6 格验证码、手机号 3-4-4 分组、¥ 前缀与 kg 后缀、加减步进器、6/12 字数计数）， 卡片底部一行灰色说明。排版网格严格、留白充足、扁平极简，蓝色仅作强调， 中英文对照，UI 细节逼真。
A vertical "Input Design Reference" poster, sheet number NN, with the sheet theme top right (e.g. Form & Structure / States & Actions / Format & Constraints). Off-white background (#FAF9F5), bold black Chinese title plus grey "INPUT DESIGN REFERENCE" subtitle. Five numbered rows: large grey index, English pattern name (e.g. OTP Input, Masked Input, Affix Input, Number Stepper, Character Counter), Chinese name and a 2x2 keyword grid on the left; a realistic demo of that input mode inside a light-grey rounded card on the right (six OTP boxes, a 3-4-4 grouped phone number, a ¥-prefixed and kg-suffixed field, a +/- stepper, a 6/12 character counter), with a one-line grey caption. Strict grid, flat minimal, blue accent only, bilingual labels, crisp UI details.
- 💡 主题词决定本张讲什么：换主题词就能定向补齐某类输入形态
- 💡 让「演示要能看出交互状态」写进 prompt，避免生成的输入框全是默认态
图集（8 张）
