Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Membuat Tombol Tampilkan Kata Sandi

Tambahkan kode berikut ke dalam script.js:

const loginForm = document.getElementById('loginForm');
const passwordInput = document.getElementById('password');
const togglePassword = document.getElementById('togglePassword');
const loginMessage = document.getElementById('loginMessage');

togglePassword.addEventListener('click', () => {
  const passwordIsHidden = passwordInput.type === 'password';

  passwordInput.type = passwordIsHidden ? 'text' : 'password';
  togglePassword.setAttribute('aria-pressed', String(passwordIsHidden));
  togglePassword.setAttribute(
    'aria-label',
    passwordIsHidden ? 'Sembunyikan kata sandi' : 'Tampilkan kata sandi'
  );

  togglePassword.querySelector('i').className = passwordIsHidden
    ? 'bi bi-eye-slash'
    : 'bi bi-eye';
});

Saat tombol diklik, tipe input berubah antara password dan text. Ikon serta aria-label ikut diperbarui agar status tombol tetap jelas bagi pengguna visual maupun pengguna pembaca layar.