input type="url"

<input type="url">

"url"类型的<input>元素 用于让用户输入和编辑URL。在提交表单之前，会自动验证输入值以确保其为空或正确格式的URL。在:valid与:invalidCSS伪类为适当的自动应用。

不支持类型的浏览器会"url"回退为标准"text"输入。

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

值

该<input>元素的value属性的值中包含DOMString这是自动确认为符合URL语法。更具体地说，有三种可能的值格式将通过验证：

• 一个空字符串（“”），表示用户没有输入值或者该值已被删除。

• 一个正确的URL。这并不一定意味着URL地址存在，但它至少格式正确。简而言之，这意味着"urlscheme://restofurl"。

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

使用网址输入

当您使用正确的type值创建URL输入时"url"，您将自动验证输入的文本是否至少以正确的格式显示，以便可能是合法的URL。这有助于避免用户错误输入网址或提供无效网址的情况。

但是，重要的是要注意，这不足以确保指定的文本是实际存在的URL，与网站的用户相对应，或以任何其他方式可接受。它只是确保该字段的值被正确格式化为一个URL。

注意：记住用户可以在幕后调用HTML也是至关重要的，所以你的站点不能用于任何安全目的的验证。您必须在提供的文本可能有任何安全含义的任何事务的服务器端验证URL。

一个简单的URL输入

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

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

请注意，如果输入一个有效格式的URL地址，且该地址被认为是有效的，则认为它是有效的。通过添加required属性，只允许有效格式的URL; 输入在空时不再被认为是有效的。

这里没有什么不可思议的事情发生。提交这个表单会导致以下数据被发送到服务器 - myURL=http%3A%2F%2Fwww.example.com。注意如何根据需要转义字符。

Placeholders 占位符

有时，提供关于输入数据应该采取何种形式的上下文提示是有帮助的。如果页面设计不为每个页面提供描述性标签，这可能尤其重要<input>。因此我们需要占位符 placeholders。占位符是演示的形式的值value应采取通过呈现一个有效的值，这被显示在编辑框内部时，该元件的一个例子value是""。一旦数据输入框中，占位符消失; 如果该框被清空，占位符重新出现。

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

<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的最大长度。

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

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

注：这些属性也影响验证 - 比最小/最大长度更短或更长的值将被分类为无效; 另外大多数浏览器不会让你输入比指定的最大长度更长的值。

提供默认选项

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

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

提供建议值

再往前走一步，您可以提供一个默认选项列表，用户可以通过指定该list属性来进行选择。这不会限制用户使用这些选项，但可以让他们更快地选择常用URL。这也提供了一些提示autocomplete。该list属性指定a的ID <datalist>，而<option>每个建议值又包含一个元素; 每个option的value是网址输入框相应的建议值。

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

<datalist id="defaultURLs">
  <option value="http://www.example.com">
  <option value="https://www.example.com">
  <option value="http://www.example.org">
  <option value="https://www.example.org">
</datalist>

使用<datalist>元素及其<option>位置，浏览器将提供指定的值作为URL的潜在值; 这通常以包含建议的弹出菜单或下拉菜单的形式呈现。虽然特定的用户体验可能因浏览器而异，但通常在编辑框中单击可呈现建议URL的下拉列表。然后，当用户键入时，列表被调整为仅显示匹配的值。每个输入的字符都会缩小列表直到用户进行选择或输入自定义值。

验证

有两个级别的内容验证可用于"url"输入。首先，向所有人提供标准的验证级别<input>，从而自动确保内容符合要求，成为有效的URL。但也可以选择添加额外的过滤功能，以确保您的专业需求得到满足（如果有的话）。

重要说明：HTML表单验证 不能 取代服务器端脚本，以在被允许进入数据库之前确保输入的数据格式正确。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

基本验证

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

已知的与国际域名有关的规范问题以及HTML中的电子邮件地址的验证。有关详细信息，请参阅W3C错误15489。

要求输入URL

正如前面所提到的，在提交表单之前要做一个URL输入（你不能把这个字段留空），你只需要在输入中包含 required 属性

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

尝试提交没有输入值的上述表单，看看会发生什么。

格式验证

如果要进一步限制输入的数字以使其必须符合指定的模式才是有效的，则可以使用该pattern属性，该属性将必须匹配的正则表达式的输入值作为其值。

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

由于类型的输入"url"同时针对标准URL验证和指定的验证，所以pattern可以轻松实现。让我们看看如何：

<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input id="myURL" name="myURL" type="url"
           required pattern=".*\.myco\..*"
           title="URL should 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输入我们设置pattern到".*\.myco\..*"。这个简单的正则表达式请求一个字符串，其中包含任意数量的字符，后跟一个点，后跟“myco”，后跟一个点，后跟任意数量的字符。而且，由于浏览器中运行这两个标准的电子邮件地址过滤和我们对指定的文本，我们风与它说验证自定义模式“确保这是一个有效的URL，并在MYCO领域。”

这并不完美，但对于这个简单演示的要求来说已经足够了。

建议使用该title属性pattern。如果你这样做，title 必须描述模式 - 它应该解释数据应该采取什么格式，而不是任何其他信息。这是因为title可能会显示或说出作为验证错误消息的一部分。例如，浏览器可能会显示消息“输入的文本与所需的模式不匹配”​​。其次是你指定的title。如果您的title网址类似“网址”，则会显示“输入的文本与所需的模式URL不匹配”的消息，这不是很好。

这就是为什么我们需要指定字符串“URL应该位于myco域”。通过这样做，得到的完整的错误信息可能类似于“输入的文本不符合要求的模式。URL应该在myco域。

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

例子

关于url类型输入没有太多的说法。检查模式验证和使用URL输入部分的许多例子。

您也可以在GitHub上找到我们的模式验证示例（也可以参看它现场运行）。

规范

浏览器兼容性