响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-9 HTML5 表单验证

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 表单验证</title>
</head><body>
<form action="#" method="get">请输入您的邮箱:<input type="email" name="formmail" required /><br><br>输入个人网址:<input type="url" name="user_url" required /><br><br><input type="submit" value="提交" />
</form>
</body>
</html>

上述代码中,
当设置type的值为email时,表示验证邮箱;type的值为url时,表示验证URL地址。

运行效果

在这里插入图片描述表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,让Web应用更快地抛出错误,优化了用户体验。为了更方便地进行表单页面的开发,HTML5还提供了强大的内置相关正则表达式,当type为email或url等类型的< input >标签时,如果value的值不符合其正则表达式,那表单将不通过验证,无法提交。
在这里插入图片描述注意:通过required属性校验输入框,输入框的内容不能为空,如果为空,将弹出提示框,并阻止表单提交。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/433466.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在ubuntu上在安装Squid代理服务器

Squid 是一个代理和缓存服务器&#xff0c;它将请求转发到所需的目的地&#xff0c;同时保存请求的内容&#xff0c;当你再次请求相同内容时&#xff0c;他可以向你提供缓冲内容&#xff0c;从而提高访问速度。Squid代理服务器目前支持的协议有&#xff1a;http、SSL、DNS、FTP…

深度视觉目标跟踪进展综述-论文笔记

中科大学报上的一篇综述&#xff0c;总结得很详细&#xff0c;整理了相关笔记。 1 引言 目标跟踪旨在基于初始帧中指定的感兴趣目标( 一般用矩形框表示) &#xff0c;在后续帧中对该目标进行持续的定位。 基于深度学习的跟踪算法&#xff0c;采用的框架包括相关滤波器、分类…

Python Flask与APScheduler构建简易任务监控

1. Flask Web Flask诞生于2010年&#xff0c;是用Python语言&#xff0c;基于Werkzeug工具箱编写的轻量级、灵活的Web开发框架&#xff0c;非常适合初学者或小型到中型的 Web 项目。 Flask本身相当于一个内核&#xff0c;其他几乎所有的功能都要用到扩展&#xff08;邮件扩展…

Java基本数据类型-数值型

数据类型 Java是一种强类型语言&#xff0c;每个变量都必须声明其数据类型。Java的数据类型可分为两大类&#xff1a;基本数据类型&#xff08;primitive data type&#xff09;和引用数据类型&#xff08;reference data type&#xff09;。 完整代码 public class JavaTy…

IS-IS:04 DIS

IS-IS 协议只支持两种网络类型&#xff0c;即广播网络和点到点网络。与 OSPF 协议相同&#xff0c; IS-IS 协议在广播网络中会将网络视为一个伪节点 &#xff08; Pesudonde&#xff0c;简称 PSN&#xff09;&#xff0c;并选举出一台DIS &#xff08;Designated IS&#xff09…

架构篇27:如何设计计算高可用架构?

文章目录 主备主从集群小结计算高可用的主要设计目标是:当出现部分硬件损坏时,计算任务能够继续正常运行。因此计算高可用的本质是通过冗余来规避部分故障的风险,单台服务器是无论如何都达不到这个目标的。所以计算高可用的设计思想很简单:通过增加更多服务器来达到计算高可…

不吸烟不喝酒的男人是怎么样的?

一谈到女人&#xff0c;我们会想到香水和包包&#xff0c;这是她们的标配物。而一谈到男性&#xff0c;我们想到的&#xff0c;其实就是烟和酒了。 男人喜欢抽烟喝酒&#xff0c;女人喜欢逛街购物。性别不同&#xff0c;喜欢做的事儿就不一样。这&#xff0c;就跟社会习俗以及人…

HCIP:RIP环境下的MGRE实验

一、IP的划分和拓扑的建立 根据图中的划分的IP来进行配置 二 、使用ppp认证和HDLC封装 1、R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方&#xff1b; ISP-aaa]local-user xsl password cipher 123456 [ISP-aaa]local-user xsl service-type ppp [ISP-aaa]q [ISP]in…

万物简单AIoT 端云一体实战案例学习 之 空气质量检测系统

学物联网,来万物简单IoT物联网!! 下图是本案的3步导学,每个步骤中实现的功能请参考图中的说明。 1、简介 环境污染、空气污染是人类一直所关心并且讨论的永恒话题,人们对优质的环境和健康的身体非常向往。因此,如果有一种可以检测周围环境的空气质量的设备并且环境数据…

VMware安装RHEL-磁盘划分和分区

本文探讨了在VMware虚拟机上安装RHEL时遇到的磁盘划分和分区问题。文章详细介绍了磁盘划分过程中可能出现的问题&#xff0c;特别是在选择磁盘类型时可能导致找不到磁盘的情况。通过清晰的步骤和解决方法&#xff0c;读者可以更好地理解如何正确进行磁盘划分以及如何解决磁盘无…

勤学苦练“prompts“,如沐春风“CodeArts Snap“

前言 CodeArts Snap 上手一段时间了&#xff0c;对编程很有帮助。但是&#xff0c;感觉代码编写的不尽人意。 我因此也感到困惑&#xff0c;想要一份完整的 CodeArts Snap 手册看看。 就在我感觉仿佛"独自彷徨在这条悠长、悠长又寂寥的雨巷"时&#xff0c;我听了大…

windows版java版本管理器

概述&#xff1a;大家都知道&#xff0c;身为搞java的&#xff0c;肯定不止一个java版本&#xff0c;这里我将讲解用一个工具来解决切换版本问题。至于linux管理java版本的&#xff0c;我也有一篇文章专门讲这个的。 用sdkman在linux上管理多个java版本-CSDN博客 官网&#x…