Responsive Login And Registration Form Using HTML CSS And JavaScript

Responsive Login And Registration Form Using HTML CSS And JavaScript

HTML (Bagian Struktur):

1. Formulir Login:

   • Formulir login memiliki dua input: satu untuk username dan satu untuk password.

   • Pengguna harus mengisi kedua input ini untuk dapat mengklik tombol Login. Input ini menggunakan atribut required, yang berarti browser akan memberikan peringatan jika salah satu dari input ini kosong saat formulir disubmit.

   • Formulir ini menggunakan atribut onsubmit="return validateForm()" untuk memanggil fungsi JavaScript validateForm() saat formulir disubmit. Fungsi ini memvalidasi apakah input kosong sebelum formulir diproses lebih lanjut.

2. Pesan Error:

   • Pesan error akan ditampilkan di bawah formulir jika ada masalah dengan input, seperti jika username atau password tidak diisi. Elemen <p id="error-message"> digunakan untuk menampilkan pesan error yang berwarna merah.

CSS (Bagian Styling):

1. Pengaturan Tampilan Umum:

   • CSS memberikan gaya pada form login, membuatnya terlihat bersih dan modern dengan border-radius pada sudut dan box-shadow agar form terlihat lebih menonjol.

   • Input dan tombol diberikan padding dan border yang membuatnya mudah untuk digunakan.

2. Tombol Login:

   • Tombol Login diberi warna biru, dengan efek hover untuk memberi umpan balik visual ketika pengguna melayang di atas tombol.

JavaScript (Bagian Validasi):

1. Fungsi validateForm():

   • Fungsi ini mengambil nilai dari input username dan password menggunakan document.getElementById("id").value.

   • Jika salah satu dari input tersebut kosong, pesan error ditampilkan dengan mengubah teks dari elemen <p id="error-message">.

   • Jika semua validasi lolos, return true; memungkinkan formulir untuk dikirim, dan return false; mencegah pengiriman formulir jika ada kesalahan.

2. Pesan Error:

   • Pesan error hanya akan ditampilkan jika username atau password tidak diisi. Jika semua validasi lolos, pesan error dihapus dengan innerText = "".

Hasil Tampilan:

Form login ini akan menampilkan:

• Username dan Password input yang harus diisi.

• Tombol Login untuk mengirimkan data.

• Pesan error akan ditampilkan di bawah tombol jika pengguna tidak mengisi kedua field.

Kesimpulan:

Halaman login ini menggunakan HTML untuk membuat struktur form, CSS untuk mendesain tampilan form, dan JavaScript untuk validasi input pengguna sebelum formulir dikirim. Ini adalah contoh dasar dan umum dari halaman login yang bisa kamu kembangkan lebih lanjut dengan menghubungkan ke back-end untuk otentikasi pengguna atau menambahkan lebih banyak fitur seperti pengingat password dan lain-lain.