应使用 type="tel" 触发带符号数字键盘且无格式强制，配合 pattern 和 title 实现有效验证，name 影响前后端数据结构，避免 id 冲突和 novalidate 干扰，并始终服务端校验。
用 type="tel" 而不是 type="text" 或 type="number"
移动端键盘行为差异是核心问题：type="tel" 会唤起带 +、-、#、* 的数字键盘，且不强制格式校验；而 type="number" 在 iOS 上会加上下箭头、过滤掉 +86 前缀，type="text" 则完全无法触发数字键盘。浏览器不支持 tel 时自动降级为 text，无兼容性风险。
pattern 和 title 必须配对使用才有效
仅写 pattern="[0-9]{11}" 不会触发提示，用户提交失败时只看到模糊的“请填写有效值”。必须同时加 title="请输入11位手机号"，浏览器才会在验证失败时显示该文字。注意：pattern 是完整匹配（隐式前后加 ^ 和 $），写成 [0-9]{11,15} 才能兼容带区号或国际前缀的号码。
-
pattern对空值无效——留空时不会触发，所以仍需required - 正则中不要用
\d，部分旧版 Safari 不识别，统一用[0-9] - 若需支持
+86 138 1234 5678这类带空格/横线的，pattern 应写为^[+0-9\s\-()]{7,20}$，再靠 JS 后续清洗
name 和 id 的命名影响后端接收和 JS 控制
name="phone" 决定了表单提交后键名是 phone，PHP 接收为 $_POST['phone']，JS 中可通过 form.phone.value 或 form.elements['phone'].value 直接读取。若写成 name="contact[phone]"，PHP 会解析为嵌套数组，但 JS 访问需用方括号语法 form.elements['contact[phone]']。
- 动态生成多个电话字段时，避免重复
id——label for="phone"绑定失效的主因就是id冲突或缺失 - 更稳妥的写法是嵌套：
<label>联系电话<input type="tel" name="phone"></label>，无需id也能点击聚焦
别忽略 novalidate 对验证逻辑的全局影响
如果 <form> 上写了 novalidate 属性，所有 required、pattern、minlength 都会被跳过，浏览器不阻塞提交也不弹提示——这点常被误认为“验证没生效”，其实是配置覆盖了字段级规则。
立即学习“前端免费学习笔记（深入）”；
- 想局部禁用某字段验证？不能删属性，而是用 JS 设置
element.setCustomValidity('') - 调试时快速确认是否被
novalidate干扰：临时删掉它，看提示是否出现 - 服务端永远要二次校验，因为前端验证可被绕过
0086-138-1234-5678，有人输 (86) 138 1234 5678，原生控件只管触发键盘和基础匹配，清洗和标准化得靠 JS + 后端协同完成。 
