IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




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

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

by GokiSoft.com - 17:01 14/01/2022 1,125 Lượt Xem

[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


Bình luận



Chia sẻ từ lớp học

Tài Liệu Tham Khảo

Đã sao chép!!!