Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Menambahkan Kolom Email, Kata Sandi, dan Tombol Login

Letakkan kode berikut pada area komentar pesan dan form di Step 3:

<div id="loginMessage" class="alert alert-success d-none" role="alert">
  Validasi tampilan berhasil. Hubungkan form ke backend untuk proses login sebenarnya.
</div>

<form id="loginForm" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <div class="input-group has-validation">
      <span class="input-group-text">
        <i class="bi bi-envelope" aria-hidden="true"></i>
      </span>
      <input type="email" class="form-control" id="email" name="email"
        placeholder="nama@contoh.com" autocomplete="email" required>
      <div class="invalid-feedback">Masukkan alamat email yang valid.</div>
    </div>
  </div>

  <div class="mb-3">
    <div class="d-flex justify-content-between align-items-center">
      <label for="password" class="form-label">Kata sandi</label>
      <a href="#" class="small link-primary">Lupa kata sandi?</a>
    </div>
    <div class="input-group has-validation">
      <span class="input-group-text">
        <i class="bi bi-lock" aria-hidden="true"></i>
      </span>
      <input type="password" class="form-control" id="password" name="password"
        placeholder="Minimal 8 karakter" minlength="8"
        autocomplete="current-password" required>
      <button class="btn btn-outline-secondary password-toggle" type="button"
        id="togglePassword" aria-label="Tampilkan kata sandi" aria-pressed="false">
        <i class="bi bi-eye" aria-hidden="true"></i>
      </button>
      <div class="invalid-feedback">Kata sandi minimal 8 karakter.</div>
    </div>
  </div>

  <div class="form-check mb-4">
    <input class="form-check-input" type="checkbox" id="remember" name="remember">
    <label class="form-check-label" for="remember">Ingat saya di perangkat ini</label>
  </div>

  <button class="btn btn-primary w-100 login-button" type="submit">
    <span>Masuk</span><i class="bi bi-arrow-right" aria-hidden="true"></i>
  </button>
</form>

<p class="small text-secondary text-center mt-4 mb-0">
  Belum punya akun? <a href="#" class="fw-semibold link-primary">Daftar</a>
</p>

Atribut HTML yang penting:

• type="email" membantu browser memeriksa format dasar email.
• required mencegah kolom kosong lolos dari validasi browser.
• minlength="8" menetapkan panjang minimum contoh kata sandi.
• autocomplete="email" dan autocomplete="current-password" membantu browser serta password manager mengenali fungsi input.
• type="button" pada tombol mata mencegah tombol tersebut mengirim form.
• aria-label memberi nama yang dapat dikenali pembaca layar ketika tombol hanya menampilkan ikon.