Viết code kiểm tra form đăng nhập và loading % bằng chat GPT

Câu hỏi 1: Viết cho tôi code form kiểm tra gồm tên đăng nhập=khoa, mật khẩu=khoa, và mã=123456 nếu các điều kiện đúng thì chuyển sang trang khác

Đây là một ví dụ đơn giản về code HTML và JavaScript để tạo một form kiểm tra với tên đăng nhập, mật khẩu và mã. Nếu các giá trị nhập vào đúng, trình duyệt sẽ chuyển hướng đến một trang khác (ví dụ: success.html).

<!DOCTYPE html>
<html>
<head>
<title>Form Kiểm tra</title>
<script>
function kiemTraForm() {
var tenDangNhap = document.getElementById(‘tenDangNhap’).value;
var matKhau = document.getElementById(‘matKhau’).value;
var ma = document.getElementById(‘ma’).value;

// Kiểm tra điều kiện
if (tenDangNhap === ‘khoa’ && matKhau === ‘khoa’ && ma === ‘123456’) {
// Chuyển hướng đến trang thành công
window.location.href = ‘success.html’;
} else {
alert(‘Thông tin đăng nhập không đúng!’);
}
}
</script>
</head>
<body>
<h2>Form Kiểm tra</h2>
<form>
<label for=”tenDangNhap”>Tên đăng nhập:</label>
<input type=”text” id=”tenDangNhap” name=”tenDangNhap”><br><br>

<label for=”matKhau”>Mật khẩu:</label>
<input type=”password” id=”matKhau” name=”matKhau”><br><br>

<label for=”ma”>Mã:</label>
<input type=”text” id=”ma” name=”ma”><br><br>

<input type=”button” value=”Submit” onclick=”kiemTraForm()”>
</form>
</body>
</html>

Lưu ý rằng đoạn mã JavaScript kiểm tra giá trị nhập vào ngay khi người dùng nhấn nút “Submit”. Nếu giá trị không đúng, một cửa sổ cảnh báo sẽ hiển thị. Nếu giá trị đúng, trang sẽ tự động chuyển hướng đến success.html. Bạn có thể thay đổi tên và đường dẫn của trang thành công theo ý muốn.

Câu hỏi 2: Viết cho tôi code form kiểm tra gồm tên đăng nhập=khoa, mật khẩu=khoa, và mã=123456 nếu các điều kiện đúng thì loading từ 1% -100% sau đó chuyển sang trang khác

Dưới đây là một ví dụ về mã HTML, CSS và JavaScript để tạo một form kiểm tra với tên đăng nhập, mật khẩu và mã. Nếu các giá trị nhập vào đúng, trình duyệt sẽ hiển thị một tiến trình tải từ 1% đến 100% trước khi chuyển hướng đến một trang khác (ví dụ: success.html).

<!DOCTYPE html>
<html>
<head>
<title>Form Kiểm tra</title>
<style>
#progressBar {
width: 100%;
height: 20px;
background-color: #f2f2f2;
margin-bottom: 10px;
}

#progress {
width: 1%;
height: 100%;
background-color: #4CAF50;
}
</style>
<script>
function kiemTraForm() {
var tenDangNhap = document.getElementById(‘tenDangNhap’).value;
var matKhau = document.getElementById(‘matKhau’).value;
var ma = document.getElementById(‘ma’).value;

// Kiểm tra điều kiện
if (tenDangNhap === ‘khoa’ && matKhau === ‘khoa’ && ma === ‘123456’) {
// Hiển thị tiến trình tải từ 1% đến 100%
var progress = document.getElementById(‘progress’);
var width = 1;
var interval = setInterval(function() {
if (width >= 100) {
clearInterval(interval);
// Chuyển hướng đến trang thành công
window.location.href = ‘success.html’;
} else {
width++;
progress.style.width = width + ‘%’;
}
}, 10);
} else {
alert(‘Thông tin đăng nhập không đúng!’);
}
}
</script>
</head>
<body>
<h2>Form Kiểm tra</h2>
<form>
<label for=”tenDangNhap”>Tên đăng nhập:</label>
<input type=”text” id=”tenDangNhap” name=”tenDangNhap”><br><br>

<label for=”matKhau”>Mật khẩu:</label>
<input type=”password” id=”matKhau” name=”matKhau”><br><br>

<label for=”ma”>Mã:</label>
<input type=”text” id=”ma” name=”ma”><br><br>

<input type=”button” value=”Submit” onclick=”kiemTraForm()”>
</form>

<div id=”progressBar”>
<div id=”progress”></div>
</div>
</body>
</html>

Trong đoạn mã JavaScript, chúng tôi sử dụng một setInterval để tăng giá trị của tiến trình tải (width) từ 1% lên 100% trong mỗi 10ms. Khi width đạt giá trị 100, chúng tôi dừng setInterval và chuyển hướng đến success.html. Bạn có thể điều chỉnh tốc độ tải và giao diện của tiến trình tải bằng cách sửa đổi các thuộc

Kiến thức Website

Các bài đã đăng

Win Win Media

Để lại một bình luận Hủy

Các bài đã đăng

Win Win Media

Để lại một bình luận Hủy

Đăng nhập