HTML input type url 类型
功能介绍
<input>类型的元素url用于让用户输入和编辑URL。
在提交表单之前，将自动验证输入值，以确保其为空或格式正确的URL。的:valid和:invalidCSS伪类适当自动应用到视觉表示字段的当前值是否是一个有效的URL或没有。
在不支持type输入的浏览器中url，url输入回落为标准文本输入。
值
该<input>元素的value属性包含DOMString其自动验证为符合URL语法。更具体地说，有两种可能会通过验证的值格式：
- 空字符串（“”），表示用户未输入值或该值已删除。
- 单个格式正确的绝对URL。这不一定意味着URL地址存在，但至少已正确设置了格式。简而言之，这意味着urlscheme://restofurl。
有关如何验证URL以确保其格式正确的详细信息，请参见验证。
其他属性
除了对所有<input>元素（无论其类型如何）都起作用的属性外，url输入还支持以下属性：
| 属性 | 描述 |
|---|---|
| list | <datalist>元素的ID，其中包含可选的预定义自动完成选项 |
| maxlength | 输入应接受的最大字符数 |
| minlength | 输入可以且仍被视为有效的最小字符数 |
| pattern | 输入内容必须匹配的正则表达式才能有效 |
| placeholder | 空时在输入字段中显示的示例值 |
| readonly | 一个布尔属性，指示输入的内容是否应为只读 |
| size | 一个数字，指示输入字段应宽多少个字符 |
| spellcheck | 控制是否对输入字段启用拼写检查，或者是否应使用默认拼写检查配置 |
list
list属性的值是位于同一文档id中的<datalist>元素的。会<datalist>提供预定义值的列表，以建议用户进行此输入。
type建议选项中不包括列表中与兼容的所有值。提供的值是建议而不是要求：用户可以从此预定义列表中选择或提供其他值。
maxlength
用户可以输入到url输入中的最大字符数（以UTF-16代码为单位）。必须为0或更高的整数。如果未maxlength指定no ，或者指定了无效值，则url输入没有最大长度。此值还必须大于或等于的值minlength。
如果字段的文本值的长度大于UTF-16代码单元的长度，则输入将无法通过约束验证maxlength。约束验证仅在用户更改值时应用。
minlength
用户可以输入到url输入中的最小字符数（以UTF-16代码为单位）。该值必须是小于或等于由所指定的值的非负整数值maxlength。如果未minlength指定no 或指定了无效值，则url输入没有最小长度。
如果输入到字段中的文本的长度小于UTF-16代码单元的长度，则输入将无法通过约束验证minlength。约束验证仅在用户更改值时应用。
pattern
pattern指定属性后，该属性是输入value必须匹配的正则表达式，以使值通过约束验证。该类型必须是有效的JavaScript正则表达式，该正则表达式已由RegExp类型使用，并且已在我们的正则表达式指南中进行了说明；该’u’标志在编译正则表达式时指定，因此该模式被视为Unicode代码点的序列，而不是ASCII。模式文本周围不能指定正斜杠。
如果未指定指定的模式或该模式无效，则不应用任何正则表达式，并且将完全忽略此属性。
提示：使用title属性可以指定大多数浏览器将显示为提示的文本，以说明与模式匹配的要求。您还应该在附近添加其他说明性文字。
有关详细信息和示例，请参见模式验证部分。
placeholder
该placeholder属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。文字不得包含回车符或换行符。
如果控件的内容具有一个方向性（LTR或RTL），但需要以相反的方向性显示占位符，则可以使用Unicode双向算法格式化字符来覆盖占位符中的方向性；请参见“ Unicode双向文本算法”中的使用Unicode控制字符覆盖BiDi。
注意：placeholder如果可以，请避免使用该属性。它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意料之外的技术问题。看到标签和占位符在<输入>：输入（表格输入）元件获得更多信息。
readonly
一个布尔属性，如果存在，则表示该字段不能由用户编辑。它value可以，但是，仍然可以通过JavaScript代码直接设置改变HTMLInputElement.value属性。
注意：因为只读字段不能有值，required所以对readonly也指定了属性的输入没有任何影响。
size
该size属性是一个数值，指示输入字段应有多少个字符宽。该值必须是一个大于零的数字，默认值是20。由于字符宽度各不相同，因此这可能是正确的，也可能是不正确的，因此不应以此为准。根据字符和字体（font使用中的设置）的不同，输入的结果可能比指定的字符数窄或宽。
这并没有设置多少个字符，用户可以进入该领域的限制。它仅指定一次可以看到多少个。要设置输入数据长度的上限，请使用maxlength属性。
spellcheck
spellcheck是一个全局属性，用于指示是否启用元素的拼写检查。
它可以用于任何可编辑的内容，但是在这里我们考虑与spellcheckon <input>元素的使用有关的细节。
允许的值为spellcheck：
false
禁用此元素的拼写检查。
true
对此元素启用拼写检查。
“”（空字符串）或无值
遵循元素的默认行为进行拼写检查。这可能基于父母的spellcheck设置或其他因素。
如果输入字段未设置readonly属性且未禁用，则可以启用拼写检查。
spellcheck如果用户代理的首选项覆盖了设置，则读取返回的值可能无法反映控件中拼写检查的实际状态。
非标准属性
以下非标准属性在某些浏览器上也可用。通常，除非没有帮助，否则应避免使用它们。
| 属性 | 描述 |
|---|---|
| autocorrect | 指示是否自动更正字符串on或off。仅限Safari。 |
| mozactionhint | 字符串，指示用户在编辑字段时按Enter或Return键时将采取的操作类型；用于确定虚拟键盘上该键的适当标签。仅适用于Android的Firefox。 |
autocorrect
Safari扩展，该autocorrect属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。允许的值为：
on
启用拼写错误的自动更正，以及配置文本替换（如果已配置）的处理。
off
禁用自动更正和文本替换。
mozactionhint
一个Mozilla扩展程序，由Firefox for Android支持，它提供了一个提示，提示用户在编辑字段时按Enter或Return键将采取何种操作。此信息用于确定Enter在虚拟键盘上的键上使用哪种标签。
注意：这已被标准化为全局属性enterkeyhint，但尚未广泛实施。要查看正在Firefox中实施的更改的状态，请参见错误1490661。
允许的值是：go，done，next，search，和send。浏览器使用此提示来决定在回车键上放置什么标签。
使用URL输入
当您创建具有正确type值的URL输入时url，您将自动验证输入的文本至少具有正确的格式以可能是合法的URL。这可以避免用户输入错误的网站地址或提供无效地址的情况。
但是，重要的是要注意，这还不足以确保指定的文本是一个实际存在的URL，对应于该站点的用户或以其他任何方式可以接受的URL。它只是确保将字段的值正确格式化为URL。
注意：记住用户可以在后台修改HTML也是至关重要的，因此您的网站不得出于任何安全目的使用此验证。您必须在任何事务的服务器端验证URL，其中所提供的文本可能具有任何类型的安全隐患。
一个简单的URL输入
当前，所有实现此元素的浏览器都将其实现为具有基本验证功能的标准文本输入字段。以最基本的形式，URL输入可以这样实现：
<input id="myURL" name="myURL" type="url">
请注意，当为空且输入单个有效格式的URL地址时，该地址被视为有效，但否则被认为无效。通过添加required属性，仅允许使用格式正确的URL；否则，请参见图4。输入为空时不再被视为有效。
这里没有神奇的事情发生。提交此表单将导致以下数据发送到服务器：myURL=http%3A%2F%2Fwww.example.com。注意如何根据需要对字符进行转义。
占位符
有时，在上下文中提示输入数据应采用什么形式会有所帮助。如果页面设计没有为每个页面提供描述性标签，则这一点尤其重要<input>。
这是占位符出现的地方。占位符是一个值，它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的最大长度。如果maxLength超过size，则输入框的内容将根据需要滚动，以在操作内容时显示当前选择或插入点。
下面的示例创建一个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="https://developer.mozilla.org/">
<option value="http://www.google.com/">
<option value="http://www.microsoft.com/">
<option value="https://www.mozilla.org/">
<option value="http://w3.org/">
</datalist>
有了<datalist>元素及其<option>，浏览器将提供指定的值作为URL的潜在值。通常以包含建议的弹出菜单或下拉菜单显示。尽管特定的用户体验可能因浏览器而异，但通常在编辑框中单击会显示建议URL的下拉列表。然后，随着用户的输入，列表被调整为仅显示匹配的值。每个键入的字符都会缩小列表的范围，直到用户进行选择或键入自定义值为止。
使用标签获取建议值
您可以选择label在一个或所有<option>元素上包括该属性以提供文本标签。
某些浏览器可能仅显示标签，而其他浏览器可能同时显示标签和URL。
<input id="myURL" name="myURL" type="url"
list="defaultURLs">
<datalist id="defaultURLs">
<option value="https://developer.mozilla.org/" label="MDN Web Docs">
<option value="http://www.google.com/" label="Google">
<option value="http://www.microsoft.com/" label="Microsoft">
<option value="https://www.mozilla.org/" label="Mozilla">
<option value="http://w3.org/" label="W3C">
</datalist>
验证方式
有两种级别的内容验证可用于url输入。首先，为all提供了标准的验证级别<input>，它可以自动确保内容符合有效URL的要求。
但也可以选择添加其他过滤，以确保满足您自己的特殊需求（如果有）。
重要说明：HTML表单验证不能代替脚本来确保输入的数据采用正确的格式。对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。
有人也可以完全绕过HTML并将数据直接提交到服务器。如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。
基本验证
支持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您可以轻松实现此目的。让我们看看如何：
<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输入中我们将设置pattern为"..myco.."。这个简单的正则表达式请求一个字符串，该字符串包含任意数量的字符，后跟一个点，然后是“ myco”，然后是一个点，然后是任意数量的字符。并且由于浏览器针对指定的文本同时运行标准URL过滤器和我们的自定义模式，因此我们得到了一个验证，表明“确保这是一个有效的URL，并且在Myco域中”。
这不是完美的，但足以满足此简单演示的要求。
最好将title属性与一起使用pattern。如果这样做，则title 必须描述模式；它应该说明数据应采用的格式，而不是其他任何信息。那是因为title可能会在验证错误消息中显示或说出。例如，浏览器可能会显示消息“输入的文本与所需的模式不匹配”。其次是您指定的title。如果您输入的title是“ URL”之类的内容，则结果将是“输入的文本与所需的模式URL不匹配”消息，这不是良好的用户体验。
因此，我们指定字符串“ URL必须在myco域中”。这样，产生的完整错误消息可能类似于“输入的文本与所需的模式不匹配。URL应该在myco域中。”
注意：如果在编写验证正则表达式时遇到麻烦，但它们不能正常工作，请检查浏览器的控制台；否则，请执行以下步骤。那里可能会有有用的错误消息，以帮助您解决问题。
例子
关于url类型输入，没有什么可说的了。请查看“ 模式验证”和“ 使用URL输入”部分中的大量示例。
您还可以在GitHub上找到我们的模式验证示例（也可以实时查看）。
