html5 required属性实现表单验证效果

最新推荐文章于 2024-07-08 18:14:28 发布

Supreme_lwl

最新推荐文章于 2024-07-08 18:14:28 发布

阅读量1.3k

点赞数

分类专栏： html5 前端

本文链接：https://blog.csdn.net/qq_42515626/article/details/104809109

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

界面：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<title>注册</title>
	<style type="text/css">
		.login-form{
			width: 400px;
			height: 300px;
			margin:100px auto;
			border:1px solid #00aaff;
			position: relative;
		}
		.form-content{
			/*position: absolute;*/
			text-align: center;
		}
		input{
			width:170px;
			margin-left: 20px;
			margin-top: 20px;
			height: 25px;
			border: 1px solid #00aaff;
		}
		input[type="submit"]{
			background-color: #00aaff;
			color: white;
			width: 220px;
			height: 27px;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<form class="login-form">
		<div class="form-content">
			<h2>注册</h2>
			<div>
				<span>账号:</span><input type="text" name="用户名" pattern="[A-z]{5,}" required title="只能是5位以上的英文字符">
			</div>
			<div>
				<span>密码:</span><input type="password" name="密码">
			</div>
			<div>
				<span style="margin-left: -29px">确认密码:</span><input type="password" name="密码">
			</div>
			<input type="submit" name="注册">
		</div>
	</form>
</body>
</html>