<input type="url">

试一试

<form>
  <label for="url">Enter an https:// URL:</label>
  <input
    type="url"
    name="url"
    id="url"
    placeholder="https://example.com"
    pattern="https://.*"
    size="30"
    required />
</form>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

在表单提交之前，输入值会自动进行验证，以确保其为空或格式正确的 URL。 :valid 和 :invalid CSS 伪类会自动应用，以直观地表示字段的当前值是否为有效的 URL。

值

<input> 元素的 value 属性包含一个字符串，该字符串会自动验证为符合 URL 语法。更具体地说，有两种可能的值格式可以通过验证：

1. 空字符串 ("") 表示用户未输入值，或者值已被删除。
2. 一个格式正确的绝对 URL。这并不一定意味着 URL 地址实际存在，但它至少格式正确。即使输入的 urlscheme 不存在，匹配 urlscheme://rest-of-url 的条目也可以是有效的。

有关 URL 如何验证以确保格式正确的详细信息，请参阅 验证 部分。

附加属性

除了 全局属性 以及与所有 <input> 元素（无论其类型如何）通用的属性外，url 输入还支持以下属性。

list

列表属性的值是位于同一文档中的 <datalist> 元素的 id。<datalist> 为此输入提供了一个预定义值列表，以供用户建议。列表中与 type 不兼容的任何值都不会包含在建议选项中。提供的值是建议，而不是要求：用户可以从这个预定义列表中选择，也可以提供不同的值。

maxlength

用户可以在 url 输入中输入的最大字符串长度（以 UTF-16 码元为单位）。这必须是 0 或更高的整数值。如果未指定 maxlength，或指定了无效值，则 url 输入没有最大长度。此值还必须大于或等于 minlength 的值。

如果字段的文本值长度大于 maxlength UTF-16 代码单元长，则输入将无法通过约束验证。约束验证仅在用户更改值时应用。

minlength

用户可以在 url 输入中输入的最小字符串长度（以 UTF-16 码元为单位）。这必须是一个小于或等于 maxlength 指定值的非负整数值。如果未指定 minlength，或指定了无效值，则 url 输入没有最小长度。

如果字段中输入的文本长度少于 minlength UTF-16 代码单元长，则输入将无法通过约束验证。约束验证仅在用户更改值时应用。

pattern

当指定 pattern 属性时，它是一个正则表达式，输入框的 value 必须与该正则表达式匹配才能通过 约束验证。它必须是有效的 JavaScript 正则表达式，如 RegExp 类型所使用，并记录在我们的正则表达式指南中；在编译正则表达式时指定 'u' 标志，以便将模式视为 Unicode 码点序列，而不是 ASCII。模式文本周围不应指定正斜杠。

如果未指定或指定的模式无效，则不应用正则表达式，并且此属性将完全被忽略。

有关详细信息和示例，请参阅 模式验证 部分。

placeholder

placeholder 属性是一个字符串，它向用户提供一个简短的提示，说明字段中预期哪种信息。它应该是一个词或短语，演示预期的数据类型，而不是解释性消息。文本不能包含回车或换行符。

如果控件的内容具有单一方向性（从左到右或从右到左），但需要以相反的方向性呈现占位符，您可以使用 Unicode 双向算法格式字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用 Unicode 控件处理双向文本。

readonly

如果存在 readonly 布尔属性，则表示此字段不能由用户编辑。但是，其 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。

size

size 属性是一个数字值，表示输入字段应该有多宽（以字符为单位）。该值必须是一个大于零的数字，默认值为 20。由于字符宽度不同，这可能不完全精确，不应依赖于此；最终的输入可能比指定的字符数更窄或更宽，具体取决于字符和正在使用的字体（font 设置）。

这不限制用户可以在字段中输入的字符数。它只指定一次大约可以看到多少个字符。要对输入数据的长度设置上限，请使用maxlength 属性。

spellcheck

spellcheck 全局属性用于指示是否为元素启用拼写检查。它可以用于任何可编辑的内容，但在此我们重点讨论 spellcheck 在 <input> 元素上的具体用法。spellcheck 的允许值包括：

false

禁用此元素的拼写检查。

true

启用此元素的拼写检查。

"" (空字符串) 或无值

遵循元素的拼写检查默认行为。这可能基于父元素的 spellcheck 设置或其他因素。

如果输入字段未设置 readonly 属性且未禁用，则可以启用拼写检查。

如果 用户代理 的首选项覆盖了设置，则读取 spellcheck 时返回的值可能无法反映控件内拼写检查的实际状态。

使用 URL 输入

当您使用正确的 type 值 url 创建 URL 输入时，您将获得自动验证，以确保输入的文本至少具有作为合法 URL 的正确形式。这有助于避免用户拼错其网站地址或提供无效地址的情况。

但是，需要注意的是，这还不足以确保指定的文本是实际存在的 URL，与网站用户对应，或者在任何其他方面是可接受的。它确保字段的值格式正确，可以作为 URL。

一个基本的 URL 输入

此元素实现为标准的文本输入字段，具有基本验证功能。最基本的形式，URL 输入可以这样实现：

<input id="myURL" name="myURL" type="url" />

请注意，当字段为空且输入单个格式正确的 URL 地址时，它被认为是有效的，否则则不被认为是有效的。通过添加 required 属性，只允许格式正确的 URL；当字段为空时，它不再被认为是有效的。

这里没有什么神奇的地方。提交此表单将导致以下数据被发送到服务器： myURL=http%3A%2F%2Fwww.example.com。请注意字符如何根据需要进行转义。

占位符

有时，提供上下文提示说明输入数据的格式很重要。如果页面设计没有为每个 <input> 提供描述性标签，这一点尤其重要。这就是占位符的作用。占位符是一个值，它通过显示有效值的示例来演示 value 应采用的格式，当元素的 value 为 "" 时，该示例显示在编辑框内。一旦在框中输入数据，占位符就会消失；如果框变为空，占位符会重新出现。

在这里，我们有一个带有占位符 http://www.example.com 的 url 输入。请注意，当您操作编辑字段的内容时，占位符如何消失和重新出现。

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

控制输入大小

您可以同时控制输入框的实际长度以及输入文本允许的最小和最大长度。

物理输入元素大小

输入框的实际大小可以通过 size 属性来控制。使用它，您可以指定输入框一次可以显示的字符数。例如，在此示例中，url 编辑框的宽度为 30 个字符。

<input id="myURL" name="myURL" type="url" size="30" />

元素值长度

size 与输入的 URL 本身的长度限制是分开的。您可以使用 minlength 属性指定输入 URL 的最小字符数；同样，使用 maxlength 来设置输入 URL 的最大长度。如果 maxLength 超过 size，输入框的内容将根据需要滚动，以在操作内容时显示当前选择或插入点。

下面的示例创建了一个宽度为 30 个字符的 URL 地址输入框，要求内容最短为 10 个字符，最长为 80 个字符。

<input
  id="myURL"
  name="myURL"
  type="url"
  size="30"
  minlength="10"
  maxlength="80" />

提供默认选项

使用值属性提供单个默认值

与往常一样，您可以通过设置其 value 属性为 url 输入框提供默认值。

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

提供建议值

更进一步，您可以提供一个默认选项列表供用户选择，方法是指定 list 属性。这不会将用户限制在这些选项中，但确实允许他们更快地选择常用的 URL。这也会为 autocomplete 提供提示。list 属性指定了 <datalist> 的 ID，该 ID 包含一个 <option> 元素，每个建议值对应一个选项；每个 option 的 value 是 URL 输入框的相应建议值。

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://mdn.org.cn/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

通过 <datalist> 元素及其 <option>，浏览器将提供的值作为 URL 的潜在值；这通常显示为包含建议的弹出窗口或下拉菜单。虽然具体用户体验因浏览器而异，但通常点击编辑框会显示建议 URL 的下拉列表。然后，当用户键入时，列表会调整为仅显示匹配的值。每个键入的字符都会缩小列表范围，直到用户做出选择或键入自定义值。

为建议值使用标签

您可以选择在您一个或所有 <option> 元素上包含 label 属性以提供文本标签。某些浏览器可能只显示标签，而其他浏览器可能同时显示标签和 URL。

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://mdn.org.cn/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

验证

url 输入有两种内容验证级别。首先，所有 <input> 都提供标准的验证级别，自动确保内容符合有效 URL 的要求。但如果您有特殊需求，也可以选择添加额外的过滤来确保满足这些需求。

基本验证

支持 url 输入类型的浏览器会自动提供验证，以确保只将符合 URL 标准格式的文本输入到输入框中。

URL 的语法相当复杂。它由 WHATWG 的 URL 实时标准 定义，并在我们的文章 什么是 URL？ 中为新手进行了介绍。

使 URL 成为必填项

如前所述，要使 URL 输入在表单提交前成为必填项（您不能将字段留空），您只需在输入中包含 required 属性。

模式验证

如果您需要输入的 URL 比“任何看起来像 URL 的字符串”受到更严格的限制，您可以使用 pattern 属性指定一个 正则表达式，该值必须匹配该表达式才能被认为是有效的。

示例

URL 验证

在此示例中，我们使用 required 属性确保填写了 URL，并使用 pattern 属性将 URL 限制为 mozilla.org，以作说明。

HTML

在 url 输入中，我们将 pattern 设置为 ".*\.mozilla\.org.*"。这个正则表达式验证一个字符串，该字符串包含任意数量的字符，后跟 ".mozilla.org"，再后跟任意数量的字符。由于浏览器同时对指定文本运行标准的 URL 过滤器和我们的自定义模式，因此我们得到了一个验证，即“确保这是一个有效的 URL，并且还包含 .mozilla.org。”

请注意，像 https://developer\.mozilla\.org.* 这样的严格模式会更健壮，但在这种情况下，它会使 type="url" 属性变得多余。

title 属性还为使用辅助技术的用户描述了 pattern。

<form>
  <label for="myURL">
    Enter a url from this site:
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.mozilla\.org.*"
      title="URL should include mozilla.org" />
    <span class="validity"></span>
  </label>
  <button>Submit</button>
</form>

CSS

CSS 通过添加适当的 content 属性提供视觉线索，向用户显示内容是 :valid 还是 :invalid，并包含备用文本供有辅助技术的用户使用。

input:focus:invalid {
  outline: 2px solid red;
}

input:focus:valid {
  outline: 2px solid green;
}

input + span {
  padding: 0 0.3rem;
}

input:invalid + span::after {
  content: "✖" / "Content is not valid";
  color: red;
}

input:valid + span::after {
  content: "✓" / "Content is valid";
  color: green;
}

结果

复制此页面的 URL 并将其粘贴到输入字段中，您将看到一个绿色边框和绿色对勾。输入任何不包含 mozilla.org 的其他 URL 或无效 URL，您将看到一个红色边框和红色叉。

有关其他示例，请查看 模式验证 和 使用 URL 输入 部分。

技术摘要

规范

浏览器兼容性

另见

• HTML 表单指南
• <input>
• <input type="tel">
• <input type="email">