Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Mempercantik Form Menggunakan CSS

Isi style.css dengan CSS berikut. Bootstrap menangani grid dan komponen dasar, sedangkan CSS ini membentuk karakter visual halaman:

:root {
  --kp-primary: #2563eb;
  --kp-primary-dark: #1d4ed8;
  --kp-ink: #172033;
  --kp-muted: #64748b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--kp-ink);
  background: #eef4ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(37, 99, 235, .13), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(14, 165, 233, .12), transparent 28%),
    #f8fafc;
}

.login-card {
  width: min(100%, 980px);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
}

.login-visual {
  min-height: 620px;
  align-items: flex-end;
  padding: 56px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .1), rgba(15, 23, 42, .45)),
    linear-gradient(145deg, #2563eb, #0f3a8f);
}

.visual-content { max-width: 380px; }
.visual-content h1 {
  margin: 16px 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 750;
}
.visual-content p:last-child {
  color: rgba(255, 255, 255, .82);
  line-height: 1.7;
}

.brand-mark {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: var(--kp-primary);
  background: #fff;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}

.brand-mark-small { color: #fff; background: var(--kp-primary); }
.eyebrow {
  margin: 20px 0 0;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.login-form-column { display: flex; align-items: center; }
.login-form-wrap { width: 100%; padding: clamp(32px, 6vw, 64px); }
.login-form-wrap h2 { font-weight: 750; }
.form-label { margin-bottom: 8px; font-weight: 650; }

.input-group-text,
.form-control,
.password-toggle {
  min-height: 50px;
  border-color: #dbe3ee;
}

.input-group-text { color: var(--kp-muted); background: #f8fafc; }
.form-control:focus {
  border-color: #80a7ff;
  box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .12);
}
.input-group:focus-within .input-group-text { border-color: #80a7ff; }
.login-button {
  min-height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0;
  background: var(--kp-primary);
  font-weight: 700;
}
.login-button:hover { background: var(--kp-primary-dark); }

@media (max-width: 575.98px) {
  .login-page { padding: 0; background: #fff; }
  .login-card {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .login-form-column { min-height: 100vh; }
  .login-form-wrap { padding: 28px 22px; }
}

Media query terakhir membuat kartu memenuhi layar pada ponsel. Hasilnya tidak menyisakan bingkai kecil yang kurang efisien untuk layar sempit.