htmlcssformPemula9 mnt baca

Form Login yang Rapi

Form login dengan label, input, dan tombol yang tertata rapi di tengah kartu.

Kenapa Form Login?

Form adalah jembatan antara pengguna dan sistem. Form login adalah form paling sering ditemui: aplikasi kasir, media sosial, e-learning, semuanya punya. Menguasainya berarti menguasai 80 persen pola form lainnya.

Langkah Membangun

HTML: Pakai tag <form> sungguhan (bukan sekadar div), karena form memberi perilaku bawaan: tekan Enter untuk submit dan validasi otomatis. Struktur: <label> + <input> untuk email dan password, <button type="submit"> untuk masuk. Hubungkan label dan input dengan atribut for dan id yang sama agar klik label memfokuskan input (penting untuk aksesibilitas).

CSS: Kartu form di tengah layar: bungkus dengan flex di body (min-height: 100vh; display: flex; justify-content: center; align-items: center). Input dibuat full-width (width: 100%; box-sizing: border-box) dengan padding nyaman dan border-radius. Fokus input diberi highlight (input:focus { outline: 2px solid #8b5cf6 }).

JS: Tangkap event submit, panggil e.preventDefault() agar halaman tidak reload, lalu tampilkan pesan selamat datang memakai nilai input.

Catatan teknis: box-sizing: border-box membuat padding dihitung di dalam width, sehingga input width: 100% tidak melebar keluar kartu. Tanpa ini, form sering "bocor" ke kanan.

Kesalahan Umum

  • Memakai <div> sebagai pengganti <form> sehingga Enter tidak berfungsi.
  • Atribut for label tidak cocok dengan id input.
  • Input password memakai type="text" sehingga kata sandi terlihat (pakai type="password").
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tampilkan/Sembunyikan Sandi

Tambahkan tombol kecil "Lihat" di samping input kata sandi yang mengubah type input antara password dan text setiap diklik. Teks tombol ikut berubah menjadi "Sembunyi" dan sebaliknya.