CARA MEMBUAT FORM LOGIN DENGAN JAVASCRIPT

Membuat form login adalah salah satu dasar dalam belajar web development. Biasanya, form login ini membutuhkan username dan password untuk mengidentifikasi user. Di tutorial ini, kita akan belajar bagaimana membuat form login dengan JavaScript. Yuk, langsung saja kita mulai.

Langkah 1: Membuat Struktur HTML

Untuk membuat form login, kita perlu membuat input bagi username dan password. Kita juga membutuhkan tombol untuk mengirim data tersebut. Setelah itu, letakkan semua ini dalam form HTML.

Hal ini bisa kamu lakukan dengan mengetik kode berikut dalam dokumen HTML kamu:

<form id="loginForm">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br>
  <input type="submit" value="Submit">
</form>

Dengan kode di atas, sekarang kamu memiliki form login dengan dua input menggunakan metode GET, satu untuk username dan satu lagi untuk password.

Langkah 2: Menambahkan JavaScript

Sekarang, kita akan menambahkan JavaScript untuk memberikan fungsi pada form login. Kita akan menempatkan kode JavaScript pada dokumen HTML kita di bawah tag form.

<script>
const loginForm = document.getElementById('loginForm');

loginForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('pwd').value;

    console.log(`Username: ${username}, Password: ${password}`);
});
</script>

Code di atas akan menangkap data yang diinput oleh user kemudian mencetaknya di console.

Langkah 3: Menambahkan Validasi Input

kita juga perlu melakukan validasi. Pengecekan ini diperlukan untuk memastikan bahwa pengguna sudah mengisi semua field yang ditentukan.

<script>
loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('pwd').value;

    if(!username || !password){
        alert('Please fill all the required fields!');
        return;
    }

    console.log(`username: ${username}, password: ${password}`);
});
</script>

Dengan kode di atas, jika ada field yang kosong, maka akan muncul pesan ‘Please fill all the required fields!‘.

Itulah cara membuat form login dengan JavaScript. Dengan menggabungkan elemen yang ada di pustaka JavaScript, kita bisa membuat form login yang lengkap dengan validasi. Semoga artikel ini dapat membantu kamu yang sedang belajar web development. Selamat mencoba!