type="text" 表单控件需重视 name（必填，用于后端接收）、id（关联 label，提升可访问性）、label（不可用 placeholder 替代）、maxlength（字符级硬限制）与 pattern（提交前校验，需配 title）、移动端适配（如 type="email"/"tel" 和 inputmode）。
input 元素的 type="text" 是最基础、也最容易被低估的表单控件——它不只用来“输名字”，它的行为、验证和可访问性细节，直接决定表单是否能被正确提交、被屏幕阅读器理解、被移动端键盘友好支持。
为什么 name 属性不能省，而 id 却常被漏写
后端接收数据靠的是 name，不是 id。没写 name 的 input 提交后根本不会发到服务器；而没写 id，label 就无法用 for 关联，用户点击标签时输入框不会聚焦，对触屏和辅助设备都不友好。
-
name必须唯一且有意义（如name="username"），避免用name="text"或空值 -
id要与对应label的for值完全一致，大小写敏感 - 同一页面中多个
input可以共用一个name（如多选地址），但此时需配合[]写法（name="address[]"）才能让后端收到数组
placeholder 不是 label，别用它替代语义化标签
placeholder 是临时提示，焦点进入或内容非空时就消失；它不提供任何可访问性信息，屏幕阅读器默认不读它，也不参与表单校验逻辑。
- 必须配
label（显式for关联或包裹式写法），否则 WCAG 2.1 会失败 -
placeholder="请输入手机号"不能代替<label>手机号：</label> - 如果真想隐藏视觉
label（如仅用于辅助技术），用class="sr-only"+aria-label，而不是依赖placeholder
maxlength 和 pattern 的实际约束力差异
maxlength 是硬限制，用户打满字符后无法再输入；pattern 是提交前校验，允许输入非法字符，但提交时会报错并聚焦该字段。
-
maxlength="10"对中文、英文、emoji 都按“字符数”计，不是字节数（注意：某些旧版浏览器对 emoji 计数异常） -
pattern="[a-zA-Z0-9_]{3,16}"要配合title属性才显示友好提示，否则只弹原生英文错误 - 服务端必须重复校验——前端限制可被绕过，
pattern尤其不可信
移动端键盘适配常被忽略的三个点
在手机上，type="text" 默认调出全键盘，但加对属性能显著提升体验。
- 邮箱场景用
type="email"，而非type="text"+pattern，iOS/Android 会自动显示 @ 和 .com 快捷键 - 数字场景优先用
type="tel"（非number），避免出现上下箭头和科学计数法干扰，且能触发数字键盘 - 加
inputmode="text"或inputmode="decimal"可覆盖默认键盘策略，比type更细粒度（但兼容性略低）
真正难的不是写出一个能输文字的 input，而是让它在 Safari 的 VoiceOver 下可操作、在 Android 微信里唤出正确键盘、在用户粘贴超长文本时不崩溃、在校验失败时给出明确反馈——这些细节堆起来，才是生产级表单的门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
