使用HTML5的<input type="url">验证URL输入

翻滚的胖子
2023-09-01 11:13:10
前端技术
JavaScript 图片处理

HTML5的验证URL输入

在HTML5中，我们可以使用标签来验证URL输入的格式，以确保用户输入的网址是合法的。

使用标签

要使用标签，只需在HTML表单中添加如下代码：

<form>
  <label for="urlInput">URL输入:</label>
  <input type="url" id="urlInput" name="urlInput">
  <input type="submit" value="提交">
</form>

在上面的代码中，我们创建了一个包含一个URL输入框和一个提交按钮的简单表单。输入框的类型被设置为"url"，这样浏览器就会自动验证用户输入的URL格式。

验证URL输入的格式

当用户提交表单时，浏览器会自动验证输入框中的URL格式。如果用户输入的URL不符合规定的格式，浏览器会显示一个错误提示信息。

例如，如果用户输入的URL缺少"http://"或"https://"前缀，浏览器会显示以下错误信息：

请输入以“http://”或“https://”开头的有效URL。

如果用户输入的URL格式正确，则表单会正常提交。

示例代码

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>验证URL输入</title>
</head>
<body>

  <h2>验证URL输入</h2>

  <form>
    <label for="urlInput">URL输入:</label>
    <input type="url" id="urlInput" name="urlInput">
    <input type="submit" value="提交">
  </form>

</body>
</html>

将以上代码保存为HTML文件，然后在浏览器中打开该文件，您将看到一个包含URL输入框和提交按钮的页面。尝试输入不同的URL并提交表单，您将看到浏览器对URL格式验证的效果。

希望本教程对你有所帮助！

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com