Pada tutorial sebelumnya, kita sudah membuat form menggunakan HTML. Tetapi form tersebut belum kita beri style dan tampilannya kurang menarik. Pada Tutorial kali ini, kita akan membuat tampilan form login yang menarik menggunakan bootstrap.
Buka codingan pada tutorial sebelumnya. Disini saya akan menggunakan bootstrap secara online, agar tidak perlu mendownload file resource bootstrap. Kalian bebas memilih mau menggunakan yang mana, bebas.
Link ke File CSS Bootstrap
<link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet">
Link ke File JS Bootstrap
Kemudian disini Saya merubah sedikit kodingan. Fieldset, legend dan br disini sudah tidak digunakan lagi, jadi kode tersebut bisa kita hapus. Jadi kode akan tampak seperti berikut.
Tampilan Login Pertama
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Setelah selesai, kalian bisa menambahkan kodingan berikut ini, atau kalian bisa menggunakan kode yang lain untuk membuat tampilan form login menjadi lebih menarik.
<div class="container mt-5">
<form>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="email" class="form-control" id="username">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
HASIL :
Maka tampilan form login akan tampak seperti ini.
Tampilan Kedua
Disini kita akan membuat tampilan yang berbeda dari tampilan login yang pertama. Dan perubahan kodingan nya pun tidak terlalu banyak, kita hanya mengganti sedikit class pada kode tersebut agar nantinya tampilan login tampak bagus.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="row d-flex justify-content-center"> <div class="col-md-6"> <div class="card px-5 py-5" id="form1"> <div class="form-data"> <div class="forms-inputs mb-4"> <label class="form-label">Email or username</label> <input autocomplete="off" class="form-control"> <label class="form-label">Password</label> <input autocomplete="off" type="password" class="form-control"> </div> <div class="mb-3"> <button v-on:click.stop.prevent="submit" class="btn btn-dark w-100">Login</button> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Hasil :
Hasilnya sangat berbeda dengan pertama, dan kodingan nya pun tidak terlalu banyak, tampilan yang kedua ini terlihat lebih simpel dan menarik.
Itulah tutorial membuat tampilan pada form login menggunakan bootstrap. Dengan bootstrap tampilan yang sebelumnya flat, akan terlihat lebih menarik. Sekian tutorial kali ini, sampai berjumpa pada tutorial selanjutnya.
