文本输入框必须设置name属性供后端识别，用label显式关联确保可访问性，maxlength硬限制字符数，pattern需配title提示且服务端须二次校验，type和inputmode优化移动端键盘体验。
直接用 <input type="text"> 就能创建文本输入框，但只写这行代码大概率会让表单在实际项目中出问题——name 漏了后端收不到数据，没配 label 会触发可访问性报错，maxlength 和 pattern 混用还可能产生误导。
为什么 name 属性不能省，而 id 却常被漏写
后端靠 name 区分字段，不是靠 id。没写 name 的 <input> 提交时根本不会发出去；id 虽不参与数据传输，但它是 <label for="xxx"></label> 的唯一匹配依据——漏写或大小写不一致，点击标签就无法聚焦输入框，对触屏和屏幕阅读器都不友好。
-
name必须唯一且语义明确，比如name="user_email"，别用name="text"或空值 -
id要和对应<label for="xxx"></label>的值完全一致，区分大小写 - 同一页面多个
<input>可共用一个name（如多选地址），但需写成name="address[]"才能让后端收到数组
placeholder 不是 label，别用它替代语义化标签
placeholder 是视觉提示，焦点一进就消失，也不被屏幕阅读器读取，更不参与任何校验逻辑。WCAG 2.1 明确要求每个可输入控件必须有显式关联的 <label></label>，否则直接失败。
- 必须写
<label for="email">邮箱地址</label><input id="email" name="email">，而不是只靠placeholder="请输入邮箱" - 真要隐藏视觉 label（比如搜索框），用
class="sr-only"+aria-label，而不是删掉<label></label> -
placeholder适合补充说明格式（如“示例：name@domain.com”），不是字段主名称
maxlength 和 pattern 的约束力完全不同
maxlength 是前端硬拦截，打满字符后键盘输入直接被拒；pattern 只在提交前校验，用户可以随意输非法内容，直到点提交才弹原生错误提示——而且这个提示默认是英文，没配 title 就更难懂。
立即学习“前端免费学习笔记（深入）”；
-
maxlength="10"对中文、英文、emoji 都按“字符数”算（注意旧版 Safari 对 emoji 计数异常） -
pattern="[a-zA-Z0-9_]{3,16}"必须加title="用户名只能包含字母、数字和下划线，长度3–16位"才显示友好提示 - 服务端必须重复校验——前端限制可被禁用 JavaScript 或直接改 DOM 绕过，
pattern尤其不可信
移动端键盘适配不能只靠 type="text"
在手机上，type="text" 默认唤出全键盘，但加对属性能显著减少用户操作步骤。iOS 和 Android 原生支持的 type 值比你想的更聪明。
- 邮箱场景用
type="email"，键盘自动带 @ 和 .com 快捷键；别用type="text" + pattern - 纯数字输入优先用
type="tel"（不是number），避免出现上下箭头、科学计数法干扰，且能触发数字键盘 - 需要更细粒度控制时加
inputmode="decimal"或inputmode="text"，但注意 Chrome 93+、Safari 16.4+ 才稳定支持
真正难的不是让输入框“能输字”，而是确保它在 VoiceOver 下可聚焦、在微信内置浏览器里唤对键盘、在提交时把正确字段名传给后端——这些细节一旦漏掉，测试阶段就会卡住，而不是上线后才发现。
