url 网址输入

type="url" 是 HTML5 为网址（URL）设计的输入控件。浏览器会自动验证输入值是否为合法的 URL 格式，并在移动设备上提供优化的 URL 键盘（包含 /、.com 等快捷键）。本节将详细讲解 URL 输入的验证规则、协议要求、以及实际使用中的注意事项。

前置知识

阅读本节前，建议先了解：tel 电话输入

基础概念

什么是 url 输入

type="url" 创建一个用于输入网址的输入框。它在功能上与 type="text" 相似，但增加了：

自动格式验证：提交时检查是否为合法 URL
移动端键盘优化：在手机上弹出包含 /、.com、. 快捷键的 URL 键盘
语义化：辅助技术可以识别这是一个 URL 输入框

html

<!-- 基本 URL 输入 -->
<input type="url" name="website" placeholder="https://example.com">

<!-- 自动验证：提交时检查 URL 格式 -->
<form>
  <input type="url" name="blog" required>
  <!-- 输入 "hello" 提交时，浏览器会阻止 -->
  <!-- 输入 "https://hello.com" 提交时，验证通过 -->
  <button type="submit">提交</button>
</form>

url 的核心特征

特征	说明
输入方式	键盘输入
数据类型	URL 字符串
自动验证	是（检查是否为合法 URL 格式）
移动端键盘	URL 键盘（含 `/`、`.com` 快捷键）
输入过滤	无（允许输入任意字符）

语法

基本语法

html

<input
  type="url"
  name="website"
  id="website"
  placeholder="https://example.com"
  required
  pattern="https?://.+"
  autocomplete="url"
  list="urlSuggestions"
>

常用属性

属性	值	说明
`type`	`"url"`	指定为 URL 输入
`pattern`	正则表达式	自定义 URL 格式验证
`placeholder`	字符串	提示 URL 格式
`autocomplete`	`"url"`	自动补全类型
`list`	datalist id	URL 建议列表

详细说明

浏览器自动验证规则

浏览器对 type="url" 的验证要求：输入值必须是有效的绝对 URL，即必须包含协议（scheme）部分。

验证通过的示例：

输入值	说明
`https://example.com`	HTTPS 协议
`http://example.com`	HTTP 协议
`ftp://ftp.example.com`	FTP 协议
`file:///path/to/file`	本地文件协议
`https://example.com/path?query=1#hash`	完整 URL

验证失败的示例：

输入值	失败原因
`example.com`	缺少协议（缺少 `https://`）
`www.example.com`	缺少协议
`https://`	协议后缺少内容
`://example.com`	协议部分为空
`hello world`	不是有效 URL

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>url 自动验证</title>
  <style>
    .form-group { margin-bottom: 20px; }
    label { display: block; font-weight: 500; margin-bottom: 6px; }
    input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; width: 350px; }
    .demo { padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 16px; }
  </style>
</head>
<body>
  <h2>URL 验证演示</h2>

  <div class="demo">
    <p>浏览器验证 URL 时<strong>要求包含协议</strong>（如 https://）：</p>
    <form>
      <label for="url1">输入 URL 后提交：</label>
      <input type="url" id="url1" name="url" required>
      <button type="submit">验证</button>
    </form>
    <p style="color: #999; font-size: 13px; margin-top: 8px;">
      试试输入 "example.com"（失败）和 "https://example.com"（成功）
    </p>
  </div>
</body>
</html>

协议要求

最常见的用户错误

大多数用户输入网址时不会加 https:// 前缀，只输入 example.com 或 www.example.com。这会导致 type="url" 验证失败。有两种解决方案：

在 placeholder 中明确提示格式
用 JavaScript 自动补全协议

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>URL 协议处理</title>
  <style>
    .form-group { margin-bottom: 20px; }
    label { display: block; font-weight: 500; margin-bottom: 6px; }
    input { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
  </style>
</head>
<body>
  <h2>URL 输入</h2>
  <form id="urlForm" action="/submit" method="post">
    <!--
      方案一：placeholder 明确提示
      让用户知道需要输入完整 URL
    -->
    <div class="form-group">
      <label for="url1">方案一：明确提示</label>
      <input type="url"
             id="url1"
             name="url1"
             placeholder="https://example.com"
             required>
      <p style="font-size: 13px; color: #999;">请输入完整的网址，包含 https://</p>
    </div>

    <!--
      方案二：JavaScript 自动补全协议
      提交时如果没有协议，自动加上 https://
    -->
    <div class="form-group">
      <label for="url2">方案二：自动补全协议</label>
      <input type="url"
             id="url2"
             name="url2"
             placeholder="example.com"
             required>
      <p style="font-size: 13px; color: #999;">输入域名即可，系统自动补全 https://</p>
    </div>

    <button type="submit">提交</button>
  </form>

  <script>
    const urlInput = document.getElementById('url2');
    const form = document.getElementById('urlForm');

    // 失去焦点时自动补全协议
    urlInput.addEventListener('blur', function() {
      let value = this.value.trim();
      if (value && !/^[a-zA-Z]+:\/\//.test(value)) {
        // 没有协议，自动加上 https://
        this.value = 'https://' + value;
      }
    });

    // 提交时也检查一次
    form.addEventListener('submit', function(e) {
      let url = urlInput.value.trim();
      if (url && !/^[a-zA-Z]+:\/\//.test(url)) {
        urlInput.value = 'https://' + url;
      }
    });
  </script>
</body>
</html>

使用 pattern 限制特定协议

如果只允许 HTTPS 或特定的 URL 格式，可以使用 pattern 属性：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>URL pattern 限制</title>
  <style>
    .form-group { margin-bottom: 20px; }
    label { display: block; font-weight: 500; margin-bottom: 6px; }
    input { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
    .hint { font-size: 13px; color: #999; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/submit" method="post">
    <!-- 只允许 HTTPS -->
    <div class="form-group">
      <label for="httpsUrl">仅 HTTPS 网址</label>
      <input type="url"
             id="httpsUrl"
             name="website"
             pattern="^https://.+"
             title="请输入以 https:// 开头的网址"
             placeholder="https://example.com">
      <p class="hint">只允许 HTTPS 协议</p>
    </div>

    <!-- 限制为特定域名 -->
    <div class="form-group">
      <label for="repoUrl">GitHub 仓库地址</label>
      <input type="url"
             id="repoUrl"
             name="repo_url"
             pattern="^https://github\.com/[\w\-]+/[\w\-]+"
             title="请输入 GitHub 仓库地址"
             placeholder="https://github.com/user/repo">
      <p class="hint">格式：https://github.com/用户名/仓库名</p>
    </div>

    <!-- 允许 http 或 https -->
    <div class="form-group">
      <label for="anyUrl">HTTP/HTTPS 网址</label>
      <input type="url"
             id="anyUrl"
             name="url"
             pattern="^https?://.+"
             title="请输入以 http:// 或 https:// 开头的网址"
             placeholder="https://example.com">
      <p class="hint">允许 HTTP 和 HTTPS 协议</p>
    </div>

    <button type="submit">提交</button>
  </form>
</body>
</html>

与 datalist 配合

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>URL datalist</title>
</head>
<body>
  <h2>常用网站快捷输入</h2>
  <form action="/go" method="get">
    <label for="website">网站地址：</label>
    <input type="url"
           id="website"
           name="url"
           list="popularSites"
           placeholder="输入或选择网站">

    <datalist id="popularSites">
      <option value="https://www.baidu.com">
      <option value="https://www.google.com">
      <option value="https://github.com">
      <option value="https://stackoverflow.com">
      <option value="https://developer.mozilla.org">
      <option value="https://www.zhihu.com">
    </datalist>

    <button type="submit">前往</button>
  </form>
</body>
</html>

实战示例

社交资料填写表单

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>社交资料</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 500px;
      margin: 40px auto;
      padding: 20px;
    }

    .form-card {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    h2 {
      text-align: center;
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    label {
      display: block;
      font-weight: 500;
      margin-bottom: 6px;
    }

    input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 14px;
    }

    input:focus {
      outline: none;
      border-color: #4a90d9;
    }

    .hint {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }

    .btn-submit {
      width: 100%;
      padding: 12px;
      background-color: #4a90d9;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="form-card">
    <h2>社交资料</h2>
    <form id="profileForm" action="/api/profile" method="post" novalidate>
      <!-- 个人网站 -->
      <div class="form-group">
        <label for="website">个人网站</label>
        <input type="url"
               id="website"
               name="website"
               placeholder="https://yoursite.com"
               autocomplete="url">
        <p class="hint">可选，请输入完整的网址</p>
      </div>

      <!-- GitHub -->
      <div class="form-group">
        <label for="github">GitHub 地址</label>
        <input type="url"
               id="github"
               name="github"
               placeholder="https://github.com/username"
               pattern="^https://github\.com/[\w\-]+"
               list="githubPrefix">
        <datalist id="githubPrefix">
          <option value="https://github.com/">
        </datalist>
        <p class="hint">格式：https://github.com/用户名</p>
      </div>

      <!-- 微博 -->
      <div class="form-group">
        <label for="weibo">微博链接</label>
        <input type="url"
               id="weibo"
               name="weibo"
               placeholder="https://weibo.com/username"
               pattern="^https://(weibo\.com|weibo\.cn)/.+">
        <p class="hint">格式：https://weibo.com/用户名</p>
      </div>

      <button type="submit" class="btn-submit">保存资料</button>
    </form>
  </div>

  <script>
    const form = document.getElementById('profileForm');

    // 自动补全协议（blur 时）
    form.querySelectorAll('input[type="url"]').forEach(input => {
      input.addEventListener('blur', function() {
        let val = this.value.trim();
        if (val && !/^[a-zA-Z]+:\/\//.test(val)) {
          this.value = 'https://' + val;
        }
      });
    });
  </script>
</body>
</html>

注意事项

URL 验证要求包含协议：这是用户最容易踩的坑。用户经常输入 example.com 而不包含 https://，导致验证失败。
浏览器验证基于 URL 标准：浏览器使用 URL Standard（WHATWG）进行验证，规则比简单的正则更准确。
空值通过验证：如果未设置 required，空输入会通过验证。只有非空值才会被检查 URL 格式。
relative URL 不被接受：type="url" 只接受绝对 URL（包含协议），相对路径（如 /page.html）会验证失败。
不要用 type="url" 收集域名：如果只需要域名（如 example.com），应使用 type="text" 配合适当的 pattern。

最佳实践

在 placeholder 中包含协议前缀：如 placeholder="https://example.com"，引导用户输入完整格式。
用 JavaScript 自动补全协议：在 blur 事件中检测并自动添加 https://，提升用户体验。
使用 autocomplete="url"：帮助浏览器正确保存和填充网址。
对特定平台使用 pattern：如 GitHub、微博等平台 URL 有固定格式，使用 pattern 进行额外验证。
服务器端验证 URL：客户端验证可以被绕过，应在服务器端验证 URL 格式，甚至可以尝试发起 HTTP 请求验证 URL 是否可达。

继续学习：search 搜索输入

url 网址输入 ​

基础概念 ​

什么是 url 输入 ​

url 的核心特征 ​

语法 ​

基本语法 ​

常用属性 ​

详细说明 ​

浏览器自动验证规则 ​

协议要求 ​

使用 pattern 限制特定协议 ​

与 datalist 配合 ​

实战示例 ​

社交资料填写表单 ​

注意事项 ​

最佳实践 ​

参考链接 ​

url 网址输入

基础概念

什么是 url 输入

url 的核心特征

语法

基本语法

常用属性

详细说明

浏览器自动验证规则

协议要求

使用 pattern 限制特定协议

与 datalist 配合

实战示例

社交资料填写表单

注意事项

最佳实践

参考链接