input设为URL类型用type="url"即可，浏览器自动校验基础格式但不验证可达性，需后端二次校验且不支持相对路径。
HTML input 怎么设成 URL 类型
直接用 type="url" 就行，浏览器会自动校验基础格式（比如必须含 :、不能只有域名没协议），但别指望它能拦住所有非法 URL。
- 写法就是
<input type="url" name="site">，不用额外 JS 也能触发原生提示 - 注意：空值或只填
example.com会被认为无效，必须是类似https://example.com或http://localhost:3000 - 移动端键盘会自动弹出带
.com快捷键的 URL 键盘，体验比text好不少 - 但 Safari 对
type="url"的校验最松，Chrome 和 Firefox 更严格——比如ftp://在 Chrome 里可能被拒，Firefox 却接受
为什么提交时还是能绕过 url 校验
因为 type="url" 只在表单提交前做一次前端校验，且仅检查格式，不发请求、不验证域名是否存在、也不管是否可访问。
- 用户可以禁用 JS 后手动改 DOM，把
type="url"改成type="text"绕过 - 更常见的是：粘贴了
https:// example.com（中间有空格）——浏览器会静默截断，变成https://，然后报错，但用户看不到具体哪错了 - 后端绝不能信任这个校验，必须自己用正则或 URL 构造函数再验一次，比如 Python 里用
urllib.parse.urlparse()，JS 里用new URL(inputValue)捕获异常
input url 类型和 href 属性的值要求一样吗
不一样。input type="url" 要求是「绝对 URL」，而 href 可以是相对路径（./page.html）、锚点（#section）甚至空字符串（href=""）。
-
input里填/api/data或index.html会被认为无效，即使它在页面上下文中完全合法 - 如果业务逻辑允许相对地址，别用
type="url"，改用type="text"+ 自定义校验，或者加一个协议下拉选择框辅助输入 - 想兼容
mailto:、tel:这类 scheme？type="url"理论上支持，但部分老 Android 浏览器会直接忽略，建议显式列出允许的 scheme 并用 JS 控制
有没有比 type="url" 更靠谱的替代方案
没有银弹，但可以组合增强：保留 type="url" 提供基础体验和语义，再加一层轻量 JS 校验，比全靠属性或全靠 JS 都稳。
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，实时用new URL(value)尝试解析，捕获TypeError并标红输入框 - 避免用正则硬匹配 URL——RFC 3986 太复杂，
new URL()是浏览器原生实现，更准也更省心 - 注意
new URL("https://")会抛错，但new URL("https:///")不会；所以校验前最好 trim 并补斜杠（视业务而定） - 如果项目要支持 IE，那就彻底放弃
type="url"和new URL()，改用成熟的第三方库如validator.js的isURL()
真正容易被忽略的点是：URL 输入常出现在配置表单或 CMS 后台，用户可能复制带换行或零宽空格的链接——这些字符肉眼不可见，却会让 new URL() 直接失败。粘贴时用 .trim().replace(/[\u200B-\u200D\uFEFF]/g, '') 清一下更稳妥。
