<input type="url">
url
类型的 <input>
元素用来让用户输入和编辑 URL。
尝试一下
所输入的值在表单提交前会自动经过验证,以确认它为空,或为一个合法的 URL 格式。:valid
和 :invalid
CSS 伪类会适当地自动应用,以在视觉上表示当前值是否为一个合法的 URL 值。
对于不支持类型为 url
的输入框的浏览器,它会回退为标准的 text 输入框。
值 | 代表 URL 的字符串,或为空 |
事件 | change 和 input |
支持的通用属性 | autocomplete 、list 、maxlength 、minlength 、pattern 、placeholder 、readonly 、required 和 size |
IDL 属性 | list 、value 、selectionEnd 和 selectionDirection |
DOM 接口 | |
方法 | select() 、setRangeText() 和 setSelectionRange() 。 |
值
附加属性
除了所有 <input>
元素上共有的可操作的属性外,url
输入框还支持以下属性:
list
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
placeholder
placeholder
属性是一个字符串,可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是一个单词或短语来说明预期的数据类型,而不是说明性消息。文本中不得包含回车符或换行符。
如果控件的内容具有方向(LTR 或 RTL),但需要以相反的方向显示占位符,则可以使用 Unicode 双向算法来格式化字符,从而覆盖原有占位符的方向;请参见如何针对双向文本使用 Unicode 控制符获取更多信息。
备注:尽可能避免使用 placeholder
属性。它在语义上没有其他解释表单的方式有用,并且可能导致内容出现意外的问题。请参见 <input>
标签以获取更多信息。
readonly
一个布尔属性,如果存在,则表示该字段不能由用户编辑。但是,仍可以通过 JavaScript 代码直接设置 HTMLInputElement
的 value
属性来更改。
备注:因为只读字段不能有值,所以 required
对指定了 readonly
属性的输入没有任何影响。
size
spellcheck
非标准属性
以下非标准属性在某些浏览器上也可用。一般来说,除非万不得已,否则你应该避免使用它们。
autocorrect
mozactionhint
Mozilla 扩展,它提供了一个提示,提示用户在编辑字段时按 Enter 或 Return 键将采取何种操作。
此属性已经废弃:请使用全局属性 enterkeyhint
作为替代。
使用 URL 输入框
当你用适当的 type
值 url
创建一个 URL 输入时,所输入的文本会得到自动验证,它们至少可以形成一个合法的 URL。可以避免用户输入错误的网站地址,或者提供一个无效的地址。
然而,重要的是,这并不足以确保指定的文本是一个实际存在与网站的用户相对应的 URL,或在任何其他方面可以接受。它只是确保该字段的值被正确格式化为一个 URL。
备注:用户可以在背后改动你的 HTML 代码,所以你的站点不能依赖此验证提供安全性。必须在服务端验证用户所输入的 URL,以确认用户提供的文本不会产生任何额外的安全隐患。
简单的 URL 输入框
目前,所有浏览器都将此元素实现为带有基本认证特性的标准文本输入框。对于其最基本的形式,一个 URL 输入框看起来像这样:
<input id="myURL" name="myURL" type="url" />
请注意,当输入为空或输入一个有效格式的 URL 地址时,认为输入是有效的,但在其他情况下则不认为有效。通过添加 required
属性,只允许正确格式的 URL;当输入为空时不再被视为有效。
这里没什么特别的,提交这个表单会将 myURL=https%3A%2F%2F1.800.gay%3A443%2Fhttp%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 属性提供单个默认值
你总是可以通过设置 value
属性来为 url
输入框提供一个默认值:
<input id="myURL" name="myURL" type="url" value="http://www.example.com" />
提供一系列建议的值
让我们更进一步,你可以通过指定 list
属性来为用户提供一系列默认的选项。这并不使得用户限制在这些选项中,且允许他们更快选择常用的 URL 地址。它也为 autocomplete
提供提示。list
属性指定了 <datalist>
的 ID,对于每个可用的选项,包含一个 <option>
元素;每个 option
的 value
是 URL 输入框的相应建议值。
<input id="myURL" name="myURL" type="url" list="defaultURLs" />
<datalist id="defaultURLs">
<option value="https://developer.mozilla.org/"></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。然后,随着用户的输入,列表被调整为只显示匹配的值。每个键入的字符都会缩小列表的范围,直到用户做出选择或键入一个自定义值。
为建议值使用 label
你可以选择在一个或所有的 <option>
元素上包含 label
属性来提供文本标签。一些浏览器可能只显示标签,而其他浏览器可能同时显示标签和 URL。
<input id="myURL" name="myURL" type="url" list="defaultURLs" />
<datalist id="defaultURLs">
<option value="https://developer.mozilla.org/" 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。其次,你也可以额外添加一些过滤器,来满足自己的需求。
警告:HTML 表单验证不能替代服务端代码,以确保输入的数据格式正确。对于某人来说,对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。有人也可以完全绕开你的 HTML 并将数据直接提交到你的服务器。如果服务器端代码无法验证接收到的数据,则当将格式不正确的数据(或太大、类型错误的数据等等)输入数据库时,灾难可能会发生。
基本验证
使 URL 必填
如前所述,要使一个 URL 表单项在表单提交前成为必填项(不能让该字段空白),只需要在输入项上包含 required
属性即可。
<form>
<input id="myURL" name="myURL" type="url" required />
<button>提交</button>
</form>
试试看,不输入任何值的时候提交上面的表单会发生什么。
模式验证
如果你需要进一步限制输入的 URL,不仅仅需要“任何看起来像 URL 的字符串”,你可以使用 pattern
属性来指定一个正则表达式,该值必须与之匹配才有效。
例如,假设你正在为 Myco 公司的员工建立一个支持页面,如果他们的某个页面出现问题,他们可以联系 IT 部门寻求帮助。在我们的简化表单中,用户需要输入出现问题的页面的 URL,以及描述问题所在的信息。但我们希望只有当输入的 URL 在 Myco 域中时,才能成功地验证该 URL。
由于 url
类型的输入可同时进行标准的 URL 和指定的 pattern
进行验证,你可以轻松实现。让我们来看看怎么做:
<form>
<div>
<label for="myURL">输入出问题的网址:</label>
<input
id="myURL"
name="myURL"
type="url"
required
pattern=".*\.myco\..*"
title="URL 必须属于 myco 域" />
<span class="validity"></span>
</div>
<div>
<label for="myComment">出了什么问题?</label>
<input id="myComment" name="myComment" type="text" required />
<span class="validity"></span>
</div>
<div>
<button>提交</button>
</div>
</form>
首先,表单指定了 required
属性,这意味着必须输入合法的 URL 地址。
其次,我们设定 url
输入框必须满足的 pattern
为 ".*\.myco\..*"
,这个简单的正则表达式要求任意长度的字符串,跟随一个点号,再跟随“myco”,再跟随一个点号,再跟随任意长度的字符串。由于浏览器对给定文字同时运行标准的 URL 过滤器和我们自定义的模式文字过滤器,以上两层认证方法可合并为“确保这是一个合法的 Myco 域 URL”。
这并不完美,但足以满足演示场景的需求。
建议在使用 pattern
属性的同时使用 title
。如果你这样做,title
必须描述模式;它应该解释数据应该采取什么格式,而不是任何其他信息。这是因为 title
可以作为验证错误信息的一部分被显示或读出。例如,浏览器可能会显示”请与请求的格式相匹配。“然后跟随指定的 title
。如果你的 title
是类似于”URL“的东西,结果就是“请与请求的格式相匹配。URL”,用户体验并不好。
这就是为什么我们要指定字符串“URL 必须属于 myco 域”的原因。通过这样做,产生的完整错误信息可能是这样的:“请与请求的格式匹配。URL 必须属于 myco 域”。
备注:如果你在编写验证正则表达式时遇到麻烦,它们不能正常工作,请检查你的浏览器控制台;那里可能有有用的错误信息来帮助你解决问题。
示例
关于 url
类型的输入没有太多可说的地方了;请查看模式验证和使用 URL 输入框部分的大量例子。
你也可以找到我们的 GitHub 上的模式验证例子(试试在线运行它)。
规范
Specification |
---|
HTML Standard # url-state-(type=url) |
浏览器兼容性
BCD tables only load in the browser