HTML5 新标签和属性（表单验证）

最新推荐文章于 2022-08-17 14:57:49 发布

Awen_liang1002

最新推荐文章于 2022-08-17 14:57:49 发布

阅读量883

点赞数

分类专栏： HTML5 文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_37615202/article/details/75070795

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近，博主项目中遇到一些需要涉及到H5新标签支持的项目，所以在这儿写出来，给大家看看你，也顺便学习学习，大神可以忽略。

首先是表单的一些属性，必填和非必填，当符合正则的时候背景颜色会改变。适合简单的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*required是必填内容，optional是选填内容,如果不填写optional和required关键字，那么就默认为optional*/
		input:required{
			background: transparent;
		}
		input:optional{
			background: transparent;
		}
		/*invalid就是不符合规则的，valid则是符合规则的*/
		input:required:invalid{
			background: red;
		}
	</style>
</head>
<body>
	<form action="#">
		<input type="text" required pattern="[A-Z]{4}">
		<input type="text" optional>
	</form>
</body>
</html>

当不符合或者没有填写时显示效果