By GokiSoft.com| 17:01 14/01/2022|
Học JS

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

[Examination] Bài Thi Thực Hành HTML/CSS/JS


#index.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<h2>DANG NHAP HE THONG</h2>
	<div class="row">
		<div class="logo">
			<img src="photos/login.png">
		</div>
		<div class="main">
			<form method="post" onsubmit="return login()">
				<div class="row">
					<label>Tai Khoan: </label>
					<input type="text" name="username" placeholder="Enter username" id="username_id">
				</div>
				<div class="row">
					<label>Mat Khau: </label>
					<input type="password" name="password" placeholder="Enter password" id="password_id">
				</div>
				<div class="row">
					<label></label>
					<!-- Y nghia type: submit -> day du lieu len server -> load lai trang web -->
					<!-- Uu diem -> type:submit -> validate input form truoc khi day len server -->
					<button type="submit">Submit</button>
					<button type="reset">Reset</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Thiet ke dialog -->
<div class="dialog" id="dialog_id">
	<div class="dialog-body">
		<div class="dialog-message" id="dialog_msg_id">
			Dang nhap thanh cong
		</div>
		<div class="dialog-footer">
			<button onclick="dismissDialog()">OK</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	// lam viec js -> validate du lieu trc khi day len server.
	function login() {
		//mapping input (username, password) -> object js
		uTag = document.getElementById('username_id')
		pTag = document.getElementById('password_id')

		dTag = document.getElementById('dialog_id')
		mTag = document.getElementById('dialog_msg_id')

		if(uTag.value == '' || pTag.value == '') {
			mTag.innerHTML = 'Khong dc de trong ten tai khoan hoac mat khau.'
			dTag.style.display = 'block'
			// alert('Khong dc de trong ten tai khoan hoac mat khau.')
			return false
		}

		mTag.innerHTML = 'Dang nhap thanh cong'
		// alert('Dang nhap thanh cong')
		dTag.style.display = 'block'
		return false
	}

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


#style.css


.container {
	width: 600px;
	margin: 0px auto;
	background-color: #ffffcc;
	padding: 15px;
}

.container h2 {
	text-align: center;
	color: #0000cc;
	text-transform: uppercase;
}

.row {
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}

.logo {
	width: 20%;
}

.main {
	width: 80%;
}

.logo img {
	width: 80px;
}

.row label, .row input {
	color: #000066;
}

.row input {
	width: 70%;
}

.row label {
	width: 20%;
	margin-right: 20px;
}

button {
	margin-right: 8px;
}

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

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

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

.dialog-message {
	padding: 20px;
	text-align: center;
}

.dialog-footer {
	width: 100%;
	background-color: #f5f3f3;
	height: 30px;
	padding-top: 20px;
	padding-bottom: 10px;
}

.dialog-footer button {
	float: right;
}


#login.png


https://gokisoft.com/uploads/stores/49/2022/01/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 đó