Design Bootstrap

Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Panduan langkah demi langkah membuat form login modern dan responsif menggunakan HTML, CSS, Bootstrap 5, serta JavaScript sederhana.

Contoh coding Contoh Coding Form Login HTML, CSS, dan Bootstrap 5
Langkah 8 dari 9

Menjalankan dan Menguji Form Login

Untuk menjalankan contoh:

  1. Pastikan index.html, style.css, dan script.js berada dalam folder yang sama.
  2. Buka index.html menggunakan Chrome, Edge, Firefox, atau browser modern lainnya.
  3. Uji tampilan desktop dan mobile melalui Developer Tools.
  4. Klik tombol mata dan pastikan kata sandi dapat ditampilkan serta disembunyikan.
  5. Kirim form kosong dan pastikan pesan kesalahan muncul.
  6. Isi email dengan format tidak valid dan pastikan browser menolaknya.
  7. Isi email valid dan kata sandi minimal delapan karakter. Pesan keberhasilan demo seharusnya tampil.

Checklist tambahan:

  • Tekan tombol Tab untuk memastikan semua kontrol dapat dijangkau menggunakan keyboard.
  • Periksa apakah label terhubung dengan input yang benar.
  • Uji pada lebar 320–375 piksel untuk memastikan tidak ada scroll horizontal.
  • Buka tab Console dan pastikan tidak ada error JavaScript.