Membuat Tampilan Form Yang Menarik Menggunakan Bootstrap

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/bootstrap@5.1.3/dist/css/bootstrap.min.css
rel="stylesheet"&gt;

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&gt;
<html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <title&gt;Form</title&gt;
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
</head&gt;
<body&gt;
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"&gt;</script&gt;
</body&gt;
</html&gt;

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"&gt;
    <form&gt;
      <div class="mb-3"&gt;
        <label for="username" class="form-label"&gt;Username</label&gt;
        <input type="email" class="form-control" id="username"&gt;
      </div&gt;
      <div class="mb-3"&gt;
        <label for="password" class="form-label"&gt;Password</label&gt;
        <input type="password" class="form-control" id="password"&gt;
      </div&gt;
      <button type="submit" class="btn btn-primary"&gt;Login</button&gt;
    </form&gt;
  </div&gt;

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&gt;
<html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <title&gt;Form</title&gt;
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
</head&gt;
<body&gt;

  <div class="container mt-5"&gt;
    <div class="row d-flex justify-content-center"&gt;
        <div class="col-md-6"&gt;
            <div class="card px-5 py-5" id="form1"&gt;
                <div class="form-data"&gt;
                    <div class="forms-inputs mb-4"&gt; 
                        <label class="form-label"&gt;Email or username</label&gt; 
                        <input autocomplete="off" class="form-control"&gt;
                        <label class="form-label"&gt;Password</label&gt; 
                        <input autocomplete="off" type="password" class="form-control"&gt;
                    </div&gt;
                    <div class="mb-3"&gt; <button v-on:click.stop.prevent="submit" class="btn btn-dark w-100"&gt;Login</button&gt; </div&gt;
                </div&gt;
            </div&gt;
        </div&gt;
    </div&gt;
  </div&gt;
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"&gt;</script&gt;
</body&gt;
</html&gt;

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.

Leave a Reply