Form login adalah bagian penting dari sebuah website yang memungkinkan pengguna untuk masuk ke dalam akun mereka. Form login biasanya terdiri dari dua input yaitu username dan password. Dalam artikel ini, kita akan membahas cara membuat form login dengan HTML.
Step 1: Membuat Struktur HTML
Sebelum kita mulai membuat form login, kita perlu membuat struktur HTML terlebih dahulu. Berikut adalah contoh struktur HTML yang bisa kamu gunakan:
<!DOCTYPE html><html><head><title>Form Login</title></head><body><!-- Isi form login disini --></body></html>
Pada contoh diatas, kita telah membuat struktur HTML dasar yang terdiri dari tag <html>, <head>, dan <body>. Selanjutnya, kita akan menambahkan form login ke dalam tag <body>.
Step 2: Membuat Form Login
Setelah kita membuat struktur HTML, kita bisa mulai membuat form login. Berikut adalah contoh kode HTML untuk membuat form login:
<form action="login.php" method="post"><label for="username">Username:</label><input type="text" id="username" name="username"><label for="password">Password:</label><input type="password" id="password" name="password"><input type="submit" value="Login"></form>
Pada contoh diatas, kita menggunakan tag <form> untuk membuat form login. Tag <form> memiliki dua atribut yaitu action dan method. Atribut action digunakan untuk menentukan URL yang akan diproses ketika form login di-submit, sedangkan atribut method digunakan untuk menentukan metode HTTP yang akan digunakan untuk mengirim data form.
Selanjutnya, kita menggunakan tag <label> untuk membuat label untuk input field. Label ini akan membantu pengguna dalam mengisi form login. Kemudian, kita menggunakan tag <input> untuk membuat input field. Input field ini terdiri dari dua jenis yaitu text field dan password field. Text field digunakan untuk input username, sedangkan password field digunakan untuk input password.
Terakhir, kita menggunakan tag <input> untuk membuat tombol submit. Ketika tombol submit di-klik, data form login akan dikirim ke URL yang telah ditentukan pada atribut action.
Step 3: Menggunakan CSS untuk Mempercantik Form Login
Sekarang kita akan menggunakan CSS untuk mempercantik form login. Berikut adalah contoh kode CSS:
form {max-width: 400px;margin: 0 auto;padding: 20px;background-color: #f7f7f7;border-radius: 5px;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}label {display: block;margin-bottom: 5px;}input[type="text"], input[type="password"] {width: 100%;padding: 10px;margin-bottom: 15px;border: none;border-radius: 5px;background-color: #ebebeb;}input[type="submit"] {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}
Pada contoh diatas, kita menggunakan CSS untuk mempercantik form login. Kita membuat form login menjadi responsive dengan menggunakan max-width dan margin: 0 auto. Kita juga menambahkan background-color, border-radius, dan box-shadow untuk memberikan efek 3D pada form login.
Selanjutnya, kita menggunakan display: block pada tag <label> untuk membuat label menjadi satu baris. Kita juga menggunakan margin-bottom untuk memberikan jarak antara label dan input field. Kita menggunakan input[type=”text”] dan input[type=”password”] untuk memodifikasi tampilan input field.
Terakhir, kita menggunakan input[type=”submit”] untuk memodifikasi tombol submit. Kita menambahkan background-color dan color untuk memberikan warna pada tombol submit. Kita juga menambahkan cursor: pointer untuk memberikan efek hover pada tombol submit.
Step 4: Menambahkan Validasi Form Login
Terakhir, kita akan menambahkan validasi form login. Berikut adalah contoh kode JavaScript:
function validateForm() {var username = document.forms["login"]["username"].value;var password = document.forms["login"]["password"].value;if (username == "") {alert("Username harus diisi");return false;}if (password == "") {alert("Password harus diisi");return false;}}
Pada contoh diatas, kita menggunakan JavaScript untuk memvalidasi form login. Kita membuat function validateForm() untuk melakukan validasi input field. Kita menggunakan document.forms[“login”][“username”].value untuk mengambil nilai dari input field username. Kita juga menggunakan alert() untuk menampilkan pesan error jika input field kosong. Terakhir, kita menggunakan return false untuk menghentikan pengiriman form jika terdapat input field yang kosong.
Kesimpulan
Dalam artikel ini, kita telah membahas cara membuat form login dengan HTML. Kita telah membuat struktur HTML, form login, CSS untuk mempercantik form login, dan validasi form login dengan JavaScript. Dengan mengikuti langkah-langkah diatas, kamu bisa dengan mudah membuat form login untuk website kamu. Semoga artikel ini bermanfaat!
