input type="url" 不会自动补全 http://。它仅做验证型校验，要求输入必须含协议头（如 http://）或以 // 开头，缺失则提交报错；所谓“自动补全”实为浏览器缓存或 js 干预所致。
input type="url" 是 HTML5 原生支持的语义化输入类型，它不是“增强版 text”，而是有明确验证逻辑和移动端适配行为的独立控件。直接用它，比手写正则 + input type="text" 更轻量、更可靠，但必须清楚它的边界在哪里。
为什么 input type="url" 会拒绝 example.com？
浏览器原生验证要求输入值**必须包含协议头**（如 https:// 或 http://），否则视为无效。这是规范定义的行为，不是 bug。
- ✅ 合法：
https://example.com、http://localhost:3000、ftp://files.example.org - ❌ 非法：
example.com、www.example.com、//cdn.example.com（协议相对 URL 不被接受） - ⚠️ 注意：
https://后面哪怕只跟一个斜杠（https:///）也会通过原生校验，但显然不是有效 URL —— 原生验证只做语法层面最低限度检查
如何让 input type="url" 接受无协议域名？
不能靠改 type 属性绕过，只能放弃原生验证，退回到 type="text" 并手动控制。但别急着删掉 type="url" —— 可以用 pattern 属性叠加自定义规则：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 保留
type="url"获取移动端键盘优化（iOS 会显示.com快捷键、禁用空格） - 添加
pattern="https?://.+|www\..+"允许两种格式（注意：pattern 不影响提交阻断，只影响:valid/:invalid状态） - 必须配合 JavaScript 拦截
submit事件，自行解析并补全协议（如用户输example.com，自动转成https://example.com） - 服务端仍需做完整 URL 解析（比如用 Node.js 的
new URL()或 Python 的urllib.parse），不能信任任何客户端输入
input type="url" 在老浏览器或 Safari 上表现不一致？
是的。Safari 对 url 类型的验证最严格（连 http://127.0.0.1 都可能被拒），而旧版 IE 直接降级为 type="text"，完全不校验。这意味着：
- 不要依赖
:invalidCSS 伪类在所有环境统一高亮错误 - 避免仅用
required+type="url"就认为输入“安全”——它连是否可访问、是否指向恶意域名都管不了 - 如果业务强依赖 URL 可访问性（比如预览链接缩略图），必须走后端探测或可信第三方 API，前端无法替代
真正容易被忽略的点：很多人把 input type="url" 当作“防注入工具”，但它对 XSS、开放重定向毫无防护力。协议头能被轻易伪造，javascript: 或 data: 伪协议也能通过原生校验 —— 这些必须由服务端过滤或白名单机制拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
