HTML | DOM 输入 URL 表单属性

输入 URL 表单属性是一个用于 <form> 元素的 URL 输入字段。它可以让用户在表单中输入一个 URL，并将其提交到服务器或用 JavaScript 处理。

HTML 代码示例

<form>
  <label for="url-input">输入 URL：</label>
  <input type="url" id="url-input" name="url" required>
  <button type="submit">提交</button>
</form>

在这个示例中，我们使用了 <input> 元素的 type 属性来创建一个 URL 输入字段。我们还使用了 required 属性来指定这个字段是必填的。

DOM 属性

URL 输入字段具有与其他 <input> 元素相同的属性和方法。以下是一些常见的属性和方法：

• value：获取或设置输入字段的当前值。

• defaultValue：获取或设置输入字段的默认值。

• checkValidity()：检查输入字段的值是否有效。

对于 URL 输入字段，还有以下属性和方法可用：

• validationMessage：获取输入字段的验证消息。如果输入字段的值不是有效的 URL，它会返回包含有关错误的消息字符串。

• formAction：获取或设置表单提交的 URL。

• formEnctype：获取或设置表单提交时使用的编码类型。

• formMethod：获取或设置表单的提交方法（例如 GET 或 POST）。

• formNoValidate：获取或设置表单是否应该被验证。

• formTarget：获取或设置表单提交结果显示的目标（例如 _blank）。

JavaScript 示例

以下示例演示如何使用 JavaScript 获取输入字段的值：

const urlInput = document.getElementById('url-input');
const url = urlInput.value;
console.log(url);

这将输出输入字段中的 URL 到控制台。

结论

URL 输入字段是一个方便的表单元素，可以让用户轻松地输入和提交 URL。在使用它时，请确保你对用户输入进行了适当的验证和安全性检查。