By GokiSoft.com| 09:54 05/01/2022|
Học JS

[Video] Tìm hiểu về jQuery căn bản - Khóa học 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>

	<style type="text/css">
		.container {
			width: 600px;
			background-color: #f7da8b;
			margin: 0px auto;
			padding: 20px;
		}

		/*mobile, ipad/tablet, PC (13.3, 14, 15.6, 23, ...)*/

		@media only screen and (max-width: 600px) {
		  .container {
		    width: 80%;
		  }
		}

		.container label, .container input {
			width: 100%;
			margin-bottom: 20px;
			font-size: 18px;
		}

		.container label {
			font-weight: bold;
		}

		.container button {
			font-size: 18px;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
	<form method="post" onsubmit="return login();">
		<label>Email: </label>
		<input required type="email" name="email" id="email_id" placeholder="Enter email" class="c_email">
		<label>Password: </label>
		<input required type="password" name="pwd" id="pwd_id" placeholder="Enter password" class="c_pwd">
		<p>
			<a href="#register.html">Register a new account</a>
		</p>
		<button type="submit">Login</button>

		<button type="button" onclick="insert()">Insert</button>
	</form>
	<div id="result">
		
	</div>
</div>
<script type="text/javascript">
	function insert() {
		var email = $('#email_id').val()
		var pwd = $('#pwd_id').val()

		//JS
		// var result = document.getElementById('result')
		// result.innerHTML += `Email: ${email}, Pwd: ${pwd} <br/>`
		$('#result').append(`Email: ${email}, Pwd: ${pwd} <br/>`)
	}

	function login() {
		// var emailTag = document.getElementById('email_id')
		// var email = emailTag.value
		// jQuery -> mapping by id
		// var email = $('#email_id').val()
		// jQuery -> mapping by name
		// var email = $('[name=email]').val()
		// jQuery -> mapping by class name
		// var email = $('.c_email').val()
		var email = $('[placeholder="Enter email"]').val()

		// var pwdTag = document.getElementById('pwd_id')
		// var pwd = pwdTag.value
		var pwd = $('#pwd_id').val()

		if(email == 'admin@gmail.com' && pwd == '123') {
			alert('Dang nhap thanh cong')
		} else {
			alert('Danh nhap Failed')
		}

		// $('input').val('1234567')
		// $('#email_id').val('okok@gmail.com')

		return false;
	}
</script>
</body>
</html>


#readme.txt


Nội dung học:
	- Tập chung phần layout
	- Hướng dẫn về jQuery


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