单行、原子、格式可校验的短文本用 input；配 type、inputMode 和 autoComplete 给出合适的移动端键盘与自动填充。
换三种校验时机，看错误物件什么时候长出来
同一个邮箱字段，校验时机不同，错误出现的节奏和位置完全不同。先把错误物件什么时候出现看清楚，再解释为什么。
场景：同一个报名表的「邮箱地址」字段。换三种校验时机，再切换禁用态，观察错误物件、字符计数 chip 和字段边框怎么长在字段本身——不只靠底部说明。
用于接收报名确认，不公开展示。0 字 · 待校验
校验时机实时校验当前状态待校验错误位置尚未校验字段可编辑是
对照：遮住底部反馈也能看出结果——字段卡尚无错误或通过物件；读屏读数四列随之变化。当前焦点不在输入框。
对照：同一个报名表的邮箱字段，换三种校验时机，看错误物件、字符计数和字段态怎么长在字段上。原因：校验时机决定错误何时出现。下一步：在字段里键入 hello@，再点「跑一次校验」。
写输入框时要盯这些
实验台证明的是机制；真正写字段时，用这五条检查边界。
- 错误要紧贴字段、带字段名错误物件长在字段下方，文案带上「邮箱地址：」前缀，并用 aria-describedby 关联到控件；不能只靠页面顶部 toast 或边框颜色。
- 校验时机要和用户节奏匹配实时校验每键必报，容易打断；失焦校验等离开字段；提交校验集中在最后。常规字段常用失焦 + 提交双保险。
- 校验失败要保留已输入内容不要因为格式不对就清空字段；用户只需修正一处，强迫重输整段是惩罚。
- 禁用态要说明原因disabled 字段不可编辑、不校验、不提交；要在字段旁写清为什么锁定、怎样解锁，不能只变灰。
- placeholder 不替代 labellabel 持久可见、程序关联、点选可聚焦；placeholder 只给 name@example.com 这样的格式示例，一输入就消失。
什么时候用 input，什么时候换别的控件
判断依据是「内容是多短、是否单行、是否需要换行或步进」。
导航栏搜索有图标和提交按钮，语境清楚，可用 aria-label 代替可见 label；输入时筛选或跳建议。
留言、简介、复现步骤用 textarea；它能换行、显示字数、自动增高，避免单行截断长文本。
数量、年龄、评分用 input-number 或滑块；它们提供步进、范围限制和超出边界提示，比裸 input 更稳。
怎么用：从 label 到错误的最短路径
让 label、帮助、错误、计数都绑到同一个控件，结果长在字段本身。
- 给 input 一个稳定 id，写 <label for="该 id">，字段名放进 label，必填用「必填」二字标注。
- 选对 type、inputMode、autoComplete，让移动端弹出合适键盘并支持自动填充。
- 选校验时机：常规字段失焦校验 + 提交校验；简单格式可实时；敏感或长字段避免每键必报。
- 错误物件紧贴字段下方、带字段名，用 aria-describedby 关联控件、aria-invalid 标记控件。
- 读屏从头到尾走一遍：进字段听到名字、用途、是否必填，出错听到是哪个字段、怎么改。
正反例：同一个邮箱字段，只改校验时机和错误位置
目标都是让用户尽早知道邮箱不对。差别只在「错误什么时候、在哪出现」。
用户键入时不被打断，离开字段立即在字段下方看到「邮箱地址：请输入完整邮箱」，提交时再兜底校验。错误物件带字段名，字段边框和计数 chip 同步变化，用户立刻知道是哪个字段、怎么改。
这样校验用户填完所有字段点提交，才在页面顶部看到一句「邮箱格式不对」，字段本身没有任何标记；用户得自己来回找是哪个字段，修正后还得担心是不是又被截断。
别这么省快速自测
一个报名表的邮箱字段，用户经常填到一半被打断。哪种校验时机最不打扰用户，又能尽早报错？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。