Sebenarnya style login form seperti ini cukup banyak yang menggunakan, mungkin karena lebih praktis dan kemudahannya. Jika ingin menggunakan login form dengan modal, silahkan ikuti langkah-langkahnya dibawah ini.
Pertama silahkan siapkan direktori dengan nama LOGIN. Kemudian buatlah satu file dengan nama index.php. Dan berikut adalah contoh sederhana bagaimana kita dapat membuat form login menggunakan modal dengan HTML, CSS, dan sedikit JavaScript. Kitapun akan menggunakan Bootstrap untuk membantu dalam styling dan pengaturan modal.
Struktur kode yang bisa dipakai seperti dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
Open Login Modal
</button>
<!-- The Modal -->
<div class="modal fade" id="loginModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="loginForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#loginForm").submit(function(event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#pwd").val();
// Handle login logic here, e.g., send to server or validate
alert("Username: " + username + "\nPassword: " + password);
});
});
</script>
</body>
</html>
Baca Juga
Sedikit tentang struktur diatas :
HTML Struktur
Menggunakan Bootstrap untuk styling dan modal,
Tombol untuk memanggil modal, modal itu sendiri berisi form login dengan field username dan password.
CSS
Sepenuhnya menggunakan Bootstrap, tidak ada custom CSS yang diperlukan di sini.
Link ke CSS dan JS Bootstrap di dalam tag head dan sebelum penutup tag body
Modal di-bootstrap menyediakan header, body, dan footer. Dan form ini diletakkan didalam body MODAL.
JavaScript
Menggunakan jQuery untuk menangani submit form,
Mencegah default submit form untuk mencegah reload halaman,
Menampilkan alert dengan username dan password yang diinputkan.
Untuk demo silahkan kunjungi tautan berikut. DEMO FORM LOGIN MODAL
Sekian dulu postingan kali ini, tetap semangat dan keep blogging