<input type="url">

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

¥The input value is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. The :valid and :invalid CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid URL or not.

在不支持 url 类型输入的浏览器上，url 输入将回退为标准 text 输入。

¥On browsers that don't support inputs of type url, a url input falls back to being a standard text input.

¥Value

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

¥The <input> element's value attribute contains a string which is automatically validated as conforming to URL syntax. More specifically, there are two possible value formats that will pass validation:

1. 空字符串 ("") 指示用户未输入值或该值已被删除。
2. 单个格式正确的绝对 URL。这并不一定意味着 URL 地址存在，但至少格式正确。简单来说，这意味着 urlscheme://restofurl。

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

¥See Validation for details on how URLs are validated to ensure that they're formatted properly.

¥Additional attributes

除了对所有 <input> 元素（无论其类型如何）进行操作的属性之外，url 输入还支持以下属性。

¥In addition to the attributes that operate on all <input> elements regardless of their type, url inputs support the following attributes.

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

¥The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

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

¥The maximum string length (measured in UTF-16 code units) that the user can enter into the url input. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the url input has no maximum length. This value must also be greater than or equal to the value of minlength.

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

¥The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

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

¥The minimum string length (measured in UTF-16 code units) that the user can enter into the url input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the url input has no minimum length.

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

¥The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

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

¥The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

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

¥If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

注意：使用 title 属性指定大多数浏览器将显示为工具提示的文本，以解释匹配模式的要求。你还应该在附近添加其他解释性文字。

¥Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

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

¥See the section Pattern validation for details and an example.

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

¥The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

如果控件的内容具有一个方向性（LTR 或 RTL），但需要以相反的方向性呈现占位符，则可以使用 Unicode 双向算法格式化字符来覆盖占位符内的方向性；请参阅 如何使用 Bidi 文本的 Unicode 控件 了解更多信息。

¥If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

注意：如果可以的话，请避免使用 placeholder 属性。它在语义上不如解释表单的其他方法那么有用，并且可能会导致内容出现意外的技术问题。请参阅 <input> 标签 了解更多信息。

¥Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

布尔属性，如果存在，则意味着用户无法编辑该字段。然而，它的 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。

¥A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

注意：由于只读字段不能有值，因此 required 对同时指定了 readonly 属性的输入没有任何影响。

¥Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

size 属性是一个数值，指示输入字段应有多少个字符宽。该值必须是大于零的数字，默认值为 20。由于字符宽度各不相同，因此这可能准确，也可能不准确，因此不应依赖于此；结果输入可能比指定的字符数更窄或更宽，具体取决于字符和字体（使用的 font 设置）。

¥The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

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

¥This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

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

¥spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. The permitted values for spellcheck are:

false

禁用该元素的拼写检查。

true

对此元素启用拼写检查。

""（空字符串）或无值

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

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

¥An input field can have spell checking enabled if it doesn't have the readonly attribute set and is not disabled.

如果 user agent's 首选项覆盖该设置，则读取 spellcheck 返回的值可能不会反映控件内拼写检查的实际状态。

¥The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the user agent's preferences override the setting.

¥Non-standard attributes

以下非标准属性在某些浏览器上也可用。一般来说，除非没有办法，否则应避免使用它们。

¥The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.

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

¥A Safari extension, the autocorrect attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

on

启用自动更正拼写错误，以及处理文本替换（如果配置了）。

off

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

¥mozactionhint {{deprecated\_inline}}

一个 Mozilla 扩展，它提供有关如果用户在编辑字段时按 Enter 或 Return 键将采取何种操作的提示。

¥A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field.

已弃用：请改用 enterkeyhint。

¥Deprecated: Use enterkeyhint instead.

¥Using URL inputs

当你使用正确的 type 值 url 创建 URL 输入时，你会自动验证输入的文本至少采用正确的形式，可能是合法的 URL。这有助于避免用户错误输入其网站地址或提供无效地址的情况。

¥When you create a URL input with the proper type value, url, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mistypes their website's address, or provides an invalid one.

然而，值得注意的是，这并不足以确保指定的文本是实际存在的、与站点用户相对应的、或者以任何其他方式可接受的 URL。它确保字段值的格式正确为 URL。

¥It's important, however, to note that this is not enough to ensure that the specified text is a URL which actually exists, corresponds to the user of the site, or is acceptable in any other way. It ensures that the value of the field is properly formatted to be a URL.

注意：用户可以在幕后修改你的 HTML，因此你的网站不得出于任何安全目的使用此验证。你必须在任何事务的服务器端验证 URL，其中所提供的文本可能具有任何类型的安全隐患。

¥Note: A user can tinker with your HTML behind the scenes, so your site must not use this validation for any security purposes. You must verify the URL on the server-side of any transaction in which the provided text may have any security implications of any kind.

¥A simple URL input

目前，所有实现此元素的浏览器都将其实现为具有基本验证功能的标准文本输入字段。在最基本的形式中，URL 输入可以这样实现：

¥Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:

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

请注意，当为空且输入单个格式有效的 URL 地址时，它被视为有效，但在其他情况下则不被视为有效。通过添加 required 属性，仅允许格式正确的 URL；输入为空时不再被视为有效。

¥Notice that it's considered valid when empty and when a single validly-formatted URL address is entered, but is otherwise not considered valid. By adding the required attribute, only properly-formed URLs are allowed; the input is no longer considered valid when empty.

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

¥There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: myURL=http%3A%2F%2Fwww.example.com. Note how characters are escaped as necessary.

¥Placeholders

有时，提供有关输入数据应采用什么形式的上下文提示会很有帮助。如果页面设计没有为每个 <input> 提供描述性标签，这一点尤其重要。这就是占位符发挥作用的地方。占位符是一个值，通过提供有效值的示例来演示 value 应采用的形式，当元素的 value 为 "" 时，该值将显示在编辑框中。一旦数据输入到框中，占位符就会消失；如果该框被清空，则占位符会重新出现。

¥Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input>. This is where placeholders come in. A placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

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

¥Here, we have a url input with the placeholder http://www.example.com. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

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

¥Controlling the input size

你不仅可以控制输入框的物理长度，还可以控制输入文本本身允许的最小和最大长度。

¥You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.

物理输入元素大小

¥Physical input element size

输入框的物理尺寸可以使用 size 属性来控制。使用它，你可以指定输入框一次可以显示的字符数。例如，在此示例中，url 编辑框的宽度为 30 个字符：

¥The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the url edit box is 30 characters wide:

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

元素值长度

¥Element value length

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

¥The size is separate from the length limitation on the entered URL itself. You can specify a minimum length, in characters, for the entered URL using the minlength attribute; similarly, use maxlength to set the maximum length of the entered URL. If maxLength exceeds size, the input box's contents will scroll as needed to show the current selection or insertion point as the content is manipulated.

下面的例子创建了一个 30 个字符宽的 URL 地址输入框，要求内容不少于 10 个字符且不超过 80 个字符。

¥The example below creates a 30-character wide URL address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.

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

注意：这些属性也会影响验证；短于或长于指定最小/最大长度的值将被归类为无效；此外，大多数浏览器将拒绝让用户输入长于指定最大长度的值。

¥Note: These attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will refuse to let the user enter a value longer than the specified maximum length.

¥Providing default options

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

¥Providing a single default using the value attribute

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

¥As always, you can provide a default value for a url input box by setting its value attribute:

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

提供建议值

¥Offering suggested values

更进一步，你可以提供默认选项列表，用户可以通过指定 list 属性从中进行选择。这并不限制用户只能使用这些选项，而是允许他们更快地选择常用的 URL。这也给 autocomplete 提供了提示。list 属性指定 <datalist> 的 ID，而 <datalist> 又包含每个建议值一个 <option> 元素；每个 option 的 value 是 URL 输入框对应的建议值。

¥Taking it a step further, you can provide a list of default options from which the user can select by specifying the list attribute. This doesn't limit the user to those options, but does allow them to select commonly-used URLs more quickly. This also offers hints to autocomplete. The list attribute specifies the ID of a <datalist>, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the URL entry box.

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

<datalist id="defaultURLs">
  <option value="https://web.nodejs.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 的下拉菜单。然后，当用户键入时，列表会调整为仅显示匹配的值。每个键入的字符都会缩小列表范围，直到用户做出选择或键入自定义值。

¥With the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the URL; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested URLs. Then, as the user types, the list is adjusted to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.

使用标签作为建议值

¥Using labels for suggested values

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

¥You can opt to include the label attribute on one or all of your <option> elements to provide textual labels. Some browsers may display only the labels, while others may display both the label and the URL.

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

<datalist id="defaultURLs">
  <option value="https://web.nodejs.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>

¥Validation

url 输入可使用两个级别的内容验证。首先，向所有 <input> 提供标准级别的验证，自动确保内容满足有效 URL 的要求。但还可以选择添加额外的过滤，以确保满足你自己的特殊需求（如果有）。

¥There are two levels of content validation available for url inputs. First, there's the standard level of validation offered to all <input>s, which automatically ensures that the contents meet the requirements to be a valid URL. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.

警告：HTML 表单验证不能替代确保输入数据格式正确的脚本。对于某人来说，对 HTML 进行调整以绕过验证或完全删除它太容易了。其他人也有可能完全绕过你的 HTML 并将数据直接提交到你的服务器。如果你的服务器端代码无法验证其接收到的数据，则当格式不正确的数据（或数据太大、类型错误等）输入数据库时，可能会发生灾难。

¥Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

¥Basic validation

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

¥Browsers that support the url input type automatically provide validation to ensure that only text that matches the standard format for URLs is entered into the input box.

URL 的语法相当复杂。它由 WHATWG 的 网址生活标准 定义，并在我们的文章 什么是网址？ 中为新手进行了描述

¥The syntax of a URL is fairly intricate. It's defined by WHATWG's URL Living Standard and is described for newcomers in our article What is a URL?

¥Making a URL required

如前所述，要在提交表单之前需要输入 URL 条目（不能将该字段留空），只需在输入中包含 required 属性即可。

¥As mentioned earlier, to make a URL entry required before the form can be submitted (you can't leave the field blank), you just need to include the required attribute on the input.

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

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

¥Try submitting the above form with no value entered to see what happens.

¥Pattern validation

如果你需要对输入的 URL 进行进一步限制，而不仅仅是 "任何看起来像 URL 的字符串，"，则可以使用 pattern 属性来指定 regular expression，该值必须匹配才能使该值有效。

¥If you need the entered URL to be restricted further than just "any string that looks like a URL," you can use the pattern attribute to specify a regular expression the value must match for the value to be valid.

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

¥For example, let's say you're building a support page for employees of Myco, Inc. which will let them contact their IT department for help if one of their pages has a problem. In our simplified form, the user needs to enter the URL of the page that has a problem, and a message describing what is wrong. But we want the URL to only successfully validate if the entered URL is in a Myco domain.

由于 url 类型的输入会根据标准 URL 验证和指定的 pattern 进行验证，因此你可以轻松实现这一点。让我们看看如何：

¥Since inputs of type url validate against both the standard URL validation and the specified pattern, you can implement this easily. Let's see how:

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。

¥First of all, the required attribute is specified, making it mandatory that a valid URL be provided.

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

¥Second, in the url input we set pattern to ".*\.myco\..*". This simple regular expression requests a string that has any number of characters, followed by a dot, followed by "myco", followed by a dot, followed by any number of characters. And because the browser runs both the standard URL filter and our custom pattern against the specified text, we wind up with a validation which says "make sure this is a valid URL, and also in a Myco domain."

这并不完美，但足以满足这个简单演示的要求。

¥This isn't perfect, but it is good enough for this simple demo's requirements.

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

¥It's advisable to use the title attribute along with pattern. If you do, the title must describe the pattern; it should explain what format the data should take on, rather than any other information. That's because the title may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified title. If your title is something like "URL", the result would be the message "The entered text doesn't match the required pattern. URL", which is not a good user experience.

这就是为什么我们指定字符串 "URL 必须位于 myco 域中"。通过这样做，生成的完整错误消息可能类似于“输入的文本与所需的模式不匹配。该 URL 应该位于 myco 域中。”

¥That's why, instead, we specify the string "The URL must be in a myco domain". By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. The URL should be in a myco domain."

注意：如果你在编写验证正则表达式时遇到麻烦并且它们无法正常工作，请检查浏览器的控制台；那里可能有有用的错误消息来帮助你解决问题。

¥Note: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.

¥Examples

关于 url 型输入没有太多可说的；检查 模式验证 和 使用 URL 输入 部分以获取大量示例。

¥There's not much else to say about url type inputs; check the Pattern validation and Using URL inputs sections for numerous examples.

你还可以找到我们的 GitHub 上的模式验证示例（参见 也实时运行）。

¥You can also find our pattern validation example on GitHub (see it running live also).

¥Technical summary

¥See also

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