<input type="url">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果控件的内容具有单一方向性（LTR 或 RTL），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法格式化字符来覆盖占位符中的方向性；有关更多信息，请参阅 如何使用 Unicode 控制字符进行双向文本处理。

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

size 属性是一个数值，指示输入字段的宽度应为多少个字符。该值必须大于零，默认值为 20。由于字符宽度各不相同，因此这可能不完全准确，并且不应依赖于此；根据字符和字体（使用中的 font 设置），生成的输入可能比指定的字符数窄或宽。

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

spellcheck 全局属性用于指示是否为元素启用拼写检查。它可以用于任何可编辑内容，但在这里我们考虑与在 <input> 元素上使用 spellcheck 相关的细节。spellcheck 的允许值为

false

禁用此元素的拼写检查。

true

启用此元素的拼写检查。

""（空字符串）或无值

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

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

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

某些浏览器还提供以下非标准属性。一般来说，除非迫不得已，否则应避免使用它们。

autocorrect 属性是 Safari 的扩展，它是一个字符串，指示在用户编辑此字段时是否激活自动更正。允许的值为

on

启用自动更正错别字，以及处理任何已配置的文本替换。

off

禁用自动更正和文本替换。

当使用正确的 type 值 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 输入框的 value 属性来为其提供默认值

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

提供建议值

更进一步，您可以通过指定 list 属性提供用户可以选择的一系列默认选项。这不会限制用户只能选择这些选项，但允许他们更快地选择常用 URL。这也会为 autocomplete 提供提示。list 属性指定 <datalist> 的 ID，而 <datalist> 又包含每个建议值的 <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 输入在表单提交前成为必填项（您不能将字段留空），您只需要在输入中包含 required 属性即可。

<form>
  <input id="myURL" name="myURL" type="url" required />
  <button>Submit</button>
</form>

尝试提交上面表单，不输入任何值，看看会发生什么。

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

例如，假设您正在为 Myco, Inc. 的员工构建一个支持页面，如果其中一个页面出现问题，该页面将允许他们联系其 IT 部门寻求帮助。在我们简化的表单中，用户需要输入出现问题的页面的 URL 和描述错误内容的消息。但我们希望 URL 只有在输入的 URL 位于 Myco 域中时才能成功验证。

由于 url 类型的输入会根据标准 URL 验证和指定的 pattern 进行验证，因此您可以使用正则表达式来实现此功能。让我们看看如何实现

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.myco\..*"
      title="The URL must be in a Myco domain" />
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">What is the problem?</label>
    <input id="myComment" name="myComment" type="text" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

首先，指定了 required 属性，这使得必须提供有效的 URL。

其次，在 url 输入中，我们将 pattern 设置为 ".*\.myco\..*"。此正则表达式请求一个字符串，该字符串包含任意数量的字符，后跟一个点，后跟“myco”，后跟一个点，后跟任意数量的字符。因为浏览器会同时对指定的文本运行标准 URL 过滤器和我们的自定义模式，所以我们最终得到了一个验证，即“确保这是一个有效的 URL，并且也在 Myco 域中”。

这并不完美，但对于此基本演示的要求来说已经足够了。

建议将 title 属性与 pattern 一起使用。如果这样做，title 必须描述模式；它应该解释数据应采用什么格式，而不是任何其他信息。这是因为 title 可能会显示或作为验证错误消息的一部分被朗读。例如，浏览器可能会显示消息“输入的文本与所需模式不匹配。”，后跟您指定的 title。如果您的 title 是“URL”之类的内容，则结果消息将是“输入的文本与所需模式不匹配。URL”，这不是良好的用户体验。

因此，我们改为指定字符串“URL 必须在 myco 域中”。通过这样做，生成的完整错误消息可能是“输入的文本与所需模式不匹配。URL 应在 myco 域中”。

关于 url 类型输入没有太多其他内容需要说明；请查看 模式验证 和 使用 URL 输入 部分以获取大量示例。

您还可以找到我们在 GitHub 上的模式验证示例（请参阅 正在运行的示例）。

• HTML 表单指南
• <input>
• <input type="tel">
• <input type="email">
• CSS 属性的兼容性