HTML | DOM 输入 URL 类型属性

在 HTML / DOM 中，URL 输入类型属性（<input type="url">）用于输入 URL（统一资源定位符）。

这个输入类型可以用于验证用户输入的 URL 是否为有效的 URL。如果用户输入的不是有效的 URL，浏览器会在提交表单时验证不通过。

语法

<input type="url">

属性

下面列出了一些此输入类型的最常见属性：

• autofocus: 规定当页面加载时输入字段应自动聚焦
• disabled: 规定输入字段应该被禁用
• maxlength: 规定输入字段的最大长度（以字符数为单位）
• name: 规定输入字段的名称（用于表单提交时标识输入字段）
• placeholder: 规定输入字段的预期值格式
• required: 规定输入字段为必填字段
• size: 规定输入字段应该显示的字符宽度

JavaScript 中的属性和方法

可以使用 JavaScript 操作和验证 url 类型的输入字段。

以下是一些常用的属性和方法：

• checkValidity(): 检查输入字段是否有效
• validationMessage: 如果输入检查失败，则返回显示验证消息

示例

<form>
  <label for="website">输入网址：</label>
  <input type="url" id="website" name="website" placeholder="https://www.example.com" required>
  <br><br>
  <input type="submit" value="提交">
</form>

以上代码将创建一个输入类型为 url 的输入字段，要求用户输入以协议开头的 URL，然后在用户尝试提交表单之前验证数据是否有效。如果没有在输入字段中输入任何东西，表单将无法成功提交。

结论

在 HTML / DOM 中，url 输入类型可用于验证用户输入的 URL 是否为有效 URL。JavaScript 中提供了一些有用的属性和方法，以操作和验证输入字段。