HTML5 新标签和属性（表单验证）最近，博主项目中遇到一些需要涉及到H5新标签支持的项目，所以在这儿写出来，给大家看看

最近，博主项目中遇到一些需要涉及到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>

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

当符合或时显示效果