By GokiSoft.com| 20:47 19/09/2022|
Học HTML5 - CSS3

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

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


#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>
<form method="post" onsubmit="return login()">
<div class="container">
	<h2>DANG NHAP HE THONG</h2>
	<div class="row">
		<div class="col-md-3">
			<img src="photos/login.png" style="width: 60%;">
		</div>
		<div class="col-md-9">
			<div class="form-group">
				<label>Tai Khoan</label>
				<input type="text" name="fullname" id="fullname">
			</div>
			<div class="form-group">
				<label>Mat Khau</label>
				<input type="password" name="pwd" id="pwd">
			</div>
			<div class="form-group">
				<label></label>
				<button>Dang Nhap</button>
				<button type="reset">Nhap Lai</button>
			</div>
		</div>
	</div>
</div>
</form>

<div class="modal" id="MyModal">
	<div class="modal-body">
		<div class="content-body" id="msg_id">
			Dang Nhap Thanh Cong
		</div>
		<div class="content-footer">
			<button onclick="dismissModal()">OK</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	var fullnameTag = document.getElementById('fullname')
	var pwdTag = document.getElementById('pwd')
	var msgTag = document.getElementById('msg_id')
	var modalTag = document.getElementById('MyModal')


	function login() {
		if(fullnameTag.value == "") {
			// alert("Tai khoan khong dc de rong")
			msgTag.innerHTML = "Tai khoan khong dc de rong"
			modalTag.style.display = "block"
			return false
		}

		if(pwdTag.value == "") {
			// alert("Mat khau khong dc de rong")
			msgTag.innerHTML = "Mat khau khong dc de rong"
			modalTag.style.display = "block"
			return false
		}

		// alert("Dang nhap thanh cong")
		msgTag.innerHTML = "Dang nhap thanh cong"
		modalTag.style.display = "block"
		return false
	}

	function dismissModal() {
		modalTag.style.display = "none"
	}
</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>
<form method="post" onsubmit="return login()">
<div class="container">
	<h2>Phieu Muon Sach</h2>
	<div class="form-group">
		<label>Tai Khoan</label>
		<input type="text" name="fullname" id="fullname">
	</div>
	<div class="form-group">
		<label>Mat Khau</label>
		<input type="password" name="pwd" id="pwd">
	</div>
	<div class="form-group">
		<label>Tai Khoan</label>
		<input type="text" name="fullname" id="fullname">
	</div>
	<div class="form-group">
		<label>Tai Khoan</label>
		<input type="text" name="fullname" id="fullname">
	</div>
	<div class="form-group">
		<label>Tai Khoan</label>
		<input type="text" name="fullname" id="fullname">
	</div>
	<div class="form-group">
		<label>Tai Khoan</label>
		<input type="text" name="fullname" id="fullname">
	</div>
	<div class="form-group">
		<label></label>
		<button><img src="photos/log_in.png" style="margin-right: 6px;">Dang Nhap</button>
		<button type="reset">Nhap Lai</button>
	</div>
</div>
</form>
</body>
</html>


#style.css


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

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

h2 {
	text-align: center;
	color: #0000cc;
}

.row .col-md-3 {
	width: 25%;
	text-align: center;
}

.row .col-md-9 {
	width: 75%;
}

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

.form-group label {
	width: 20%;
}

.form-group input {
	width: 80%;
}

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

/* Modal */
.modal {
	background-color: #00000080;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	display: table-cell;
	display: none;
}

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

.modal .content-body {
	padding: 40px 20px;
	font-size: 20px;
	text-align: center;
}

.modal .content-footer {
	background-color: #dedada;
	padding: 15px;
	height: 30px;
}

.modal .content-footer button {
	float: right;
	font-size: 20px;
}


#cancel.png


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


#log_in.png


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


#login.png


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


#regis.png


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