html5 required屬性實現表單驗證效果

界面:
在這裏插入圖片描述
代碼:

<!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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章