Contoh Coding Form Registrasi yang Responsif

Membuat Input dan Konfirmasi Kata Sandi

Gunakan autocomplete="new-password" pada kedua input:

<input id="password" name="password" type="password"
  class="form-control" autocomplete="new-password"
  minlength="8" maxlength="72" required>

<input id="passwordConfirmation" name="password_confirmation"
  type="password" class="form-control"
  autocomplete="new-password" required>

Tambahkan tombol dengan type="button" agar tidak mengirim form:

<button class="btn btn-outline-secondary password-toggle"
  type="button" data-target="password"
  aria-label="Tampilkan kata sandi" aria-pressed="false">
  <i class="bi bi-eye"></i>
</button>

JavaScript mengubah tipe input dan memperbarui ikon:

document.querySelectorAll('.password-toggle').forEach((button) => {
  button.addEventListener('click', () => {
    const input = document.getElementById(button.dataset.target);
    const hidden = input.type === 'password';
    input.type = hidden ? 'text' : 'password';
    button.setAttribute('aria-pressed', String(hidden));
    button.querySelector('i').className = hidden
      ? 'bi bi-eye-slash'
      : 'bi bi-eye';
  });
});