By GokiSoft.com| 23:34 02/01/2022|
Học JS

[Video] Bài Thi Thực Hành HTML/CSS/JS - C2108G3


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<style type="text/css">
		.container {
			width: 500px;
			background-color: #FFFFCC;
			margin: 0px auto;
			padding: 10px;
		}

		h1 {
			text-transform: uppercase;
			text-align: center;
			font-family: arial;
		}

		.content {
			display: flex;
			width: 100%;
		}

		.content img {
			height: 100px;
		}

		.main {
			width: 100%;
		}

		.group {
			width: 100%;
			display: flex;
			margin-bottom: 15px;
		}

		.group label {
			width: 25%;
			text-align: right;
			padding-right: 10px;
			font-weight: bold;
			color: #000066;
			font-family: arial;
		}

		.group input {
			width: 70%;
		}

		.group button {
			margin-right: 10px;
		}

		/*dialog*/
		body {
			padding: 0px;
			margin: 0px;
		}

		.dialog {
			width: 100%;
			height: 100%;
			background-color: rgb(0, 0, 0, 0.25);
			position: fixed;
			top: 0px;
			z-index: 99999;
			display: none;
		}

		.dialog .body {
			width: 250px;
			margin: 0px auto;
			background-color: white;
			margin-top: 15%;
		}

		.dialog .body h3 {
			text-align: center;
			padding: 15px;
		}

		.dialog .body .footer {
			width: 100%;
			background-color: #9c9b9a;
			text-align: right;
		}

		.dialog .body .footer button {
			margin: 20px;
			font-size: 16px;
		}
	</style>
</head>
<body>
<div class="container">
	<h1>dang nhap he thong</h1>
	<div class="content">
		<img src="photos/login.png">
		<div class="main">
			<form method="post" onsubmit="return processLogin()">
				<div class="group">
					<label>Tai Khoan: </label>
					<input type="text" name="username" id="username_id">
				</div>
				<div class="group">
					<label>Mat Khau: </label>
					<input type="password" name="pwd" id="pwd_id">
				</div>
				<div class="group">
					<label></label>
					<button type="submit">Dang Nhap</button>
					<button type="reset">Nhap Lai</button>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="dialog" id="dialog">
	<div class="body">
		<h3>Dang Nhap Thanh Cong</h3>
		<div class="footer">
			<button onclick="dismissDialog()">OK</button>
		</div>
	</div>
</div>
<script type="text/javascript">
	function processLogin() {
		//B1. Mapping the username & pwd
		var uTag = document.getElementById('username_id')
		var pTag = document.getElementById('pwd_id')

		var username = uTag.value 
		var pwd = pTag.value

		if(username == '' || pwd == '') {
			alert('Khong dc de trong ten tai khoan hoac mat khau')
			return false
		}
		//alert('Dang nhap thanh cong')
		var dialogTag = document.getElementById('dialog')
		dialogTag.style.display = 'block'

		return false
	}

	function dismissDialog() {
		var dialogTag = document.getElementById('dialog')
		dialogTag.style.display = 'none'
	}
</script>
</body>
</html>


#login.png


https://gokisoft.com/uploads/stores/49/2021/12/login.png


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó