By GokiSoft.com| 19:40 24/02/2022|
Học JS

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

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


#cancel.png


https://gokisoft.com/uploads/stores/49/2022/02/cancel.png


#log_in.png


https://gokisoft.com/uploads/stores/49/2022/02/log-in.png


#login.png


https://gokisoft.com/uploads/stores/49/2022/02/login.png


#regis.png


https://gokisoft.com/uploads/stores/49/2022/02/regis.png


#login.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">
	<h1>Danh Nhap He Thong</h1>
	<div class="row">
		<div class="col3">
			<img src="photos/login.png">
		</div>
		<div class="col9">
			<form method="post" onsubmit="return login();">
				<div class="form-group">
					<label>Tai Khoan</label>
					<input type="text" name="username" id="username_id" placeholder="Nhap tai khoan" class="form-control">
				</div>
				<div class="form-group">
					<label>Mat Khau</label>
					<input type="password" name="pwd" id="pwd_id" placeholder="Nhap mat khau" class="form-control">
				</div>
				<div class="form-group">
					<label></label>
					<button type="submit">Dang Nhap</button>
					<button type="reset">Nhap Lai</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Thiet ke modal START -->
<div class="modal" id="myModal">
	<div class="modal-body">
		<div class="body" id="msg">
			DANH NHAP THANH CONG
		</div>
		<div class="footer">
			<button onclick="dismissModal()">OK</button>
		</div>
	</div>
</div>
<!-- Thiet ke modal END -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>


#register.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Register Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div class="form-group">
		<label><img src="photos/regis.png" style="height: 60px"></label>
		<h1>Phieu Muon Sach</h1>
	</div>
	<div class="form-group">
		<label>Ma sinh vien</label>
		<input type="text" name="rollno" class="form-control">
	</div>
	<div class="form-group">
		<label>Ho va ten</label>
		<input type="text" name="fullname" class="form-control">
	</div>
	<div class="form-group">
		<label>Loai sach</label>
		<select class="form-control" name="type">
			<option value="">-- Chon loai sach --</option>
		</select>
	</div>
	<div class="form-group">
		<label>Ten sach</label>
		<input type="text" name="bookname" class="form-control">
	</div>
	<div class="form-group">
		<label>Ngay muon</label>
		<input type="date" name="borrow-date" class="form-control">
	</div>
	<div class="form-group">
		<label>Ngay tra</label>
		<input type="date" name="expired-date" class="form-control">
	</div>
	<div class="form-group">
		<label></label>
		<button><img src="photos/log_in.png" style="height: 15px; margin-right: 10px;">Dang Ky</button>
		<button><img src="photos/cancel.png" style="height: 15px; margin-right: 10px;">Nhap Lai</button>
	</div>
</div>

</body>
</html>


#script.js


function login() {
	var modal = document.getElementById('myModal')
	var msgTag = document.getElementById('msg')

	var username = document.getElementById('username_id').value
	var pwd = document.getElementById('pwd_id').value

	if(username == '' || pwd == '') {
		// alert('Yeu cau nhap tai khoan & mat khau!!!')
		msgTag.innerHTML = 'Yeu cau nhap tai khoan & mat khau!'
		modal.style.display = 'block'
		return false
	}

	// alert('Dang nhap thanh cong')
	msgTag.innerHTML = 'Dang nhap thanh cong'
	modal.style.display = 'block'

	return false
}

function dismissModal() {
	var modal = document.getElementById('myModal')

	modal.style.display = 'none'
}


#style.css


body {
	font-family: arial;
	margin: 0px;
	padding: 0px;
}

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

h1 {
	text-transform: uppercase;
	text-align: center;
	color: #0000cc;
	font-size: 26px;
}

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

.col3 {
	width: calc(100% * 3 / 12);
}

.col3 img {
	width: 80px;
}

.col9 {
	width: calc(100% * 9 / 12);
}

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

.form-group label {
	width: calc(100% * 3 / 12);
	color: #000066;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
}

.form-group input {
	width: calc(100% * 8 / 12);
}

button {
	margin-right: 10px;
}

/* css:modal */
.modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	display: none;
	background-color: rgb(0, 0, 0, 0.35);
}

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

.modal .modal-body .body {
	text-align: center;
	padding-top: 30px !important;
	padding-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;
}

.modal .modal-body .footer {
	text-align: right;
	background-color: #d5d1d1;
	padding-top: 15px;
	padding-bottom: 15px;
}

.modal .modal-body .footer button {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 15px;
	padding-right: 15px;
}


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 đó