Bootstrap 5 adalah framework yang populer untuk membuat website yang responsif dan keren. Salah satu komponen yang sering digunakan adalah form login, yang berguna untuk mengautentikasi pengguna. Dalam artikel ini, kita akan belajar cara membuat halaman login dengan bootstrap 5 yang simpel dan menarik.
Langkah 1: Membuat File HTML
Untuk membuat halaman login, kita perlu membuat file HTML yang berisi struktur dasar dari website. Kita bisa menggunakan template yang sudah disediakan oleh bootstrap 5, seperti berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Login</title>
<!-- Menyertakan file CSS dari bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Tempat untuk menulis kode halaman login -->
</body>
</html>
Langkah 2: Membuat Form Login
Setelah membuat file HTML, kita bisa mulai membuat form login dengan menggunakan komponen-komponen dari bootstrap 5. Kita bisa menggunakan class container untuk membuat kontainer yang berisi form login, dan class row dan col untuk membuat grid yang membagi kontainer menjadi dua kolom. Di kolom pertama, kita bisa menampilkan logo atau gambar yang berkaitan dengan website kita, dan di kolom kedua, kita bisa menampilkan form login yang berisi input untuk email dan password, serta tombol untuk login. Kita juga bisa menambahkan link untuk lupa password atau daftar akun baru. Berikut adalah contoh kode untuk membuat form login:
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Menampilkan logo atau gambar -->
<img src="logo.png" alt="Logo" class="img-fluid">
</div>
<div class="col-md-6">
<!-- Menampilkan form login -->
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Masukkan email Anda">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Masukkan password Anda">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary">Login</button>
</div>
<div class="mb-3">
<a href="#">Lupa password?</a>
<a href="#">Daftar akun baru</a>
</div>
</form>
</div>
</div>
</div>
Langkah 3: Membuat Tampilan Lebih Menarik
Untuk membuat tampilan halaman login lebih menarik, kita bisa menambahkan beberapa style CSS yang sesuai dengan selera kita. Kita bisa mengubah warna, ukuran, atau bentuk dari komponen-komponen yang ada. Kita juga bisa menggunakan class mt-5 untuk memberikan margin atas pada kontainer, sehingga form login tidak terlalu dekat dengan bagian atas halaman. Berikut adalah contoh style CSS yang bisa kita gunakan:
<style>
/* Mengubah warna latar belakang halaman menjadi abu-abu */
body {
background-color: #f0f0f0;
}
/* Mengubah warna tombol login menjadi hijau */
.btn-primary {
background-color: #28a745;
border-color: #28a745;
}
/* Mengubah warna link menjadi biru */
a {
color: #007bff;
}
/* Mengubah bentuk input menjadi bulat */
.form-control {
border-radius: 20px;
}
</style>
Hasil Akhir
Setelah menambahkan style CSS, kita bisa melihat hasil akhir dari halaman login yang kita buat. Kita bisa mencoba mengisi email dan password, dan menekan tombol login. Kita juga bisa mencoba mengubah ukuran layar untuk melihat responsivitas dari halaman login.
Komentar
Posting Komentar