CARA MEMBUAT FORM DI JAVASCRIPT

Membuat form adalah salah satu konsep penting dalam pengembangan web. Sebagai developer web, pasti kamu sudah familiar dengan HTML untuk membuat tampilan web dan CSS untuk mendesain style web tersebut. Namun, apakah kamu sudah mengenal JavaScript? JavaScript adalah salah satu bahasa pemrograman yang digunakan khususnya dalam bidang pengembangan web. Salah satu fungsinya adalah untuk membuat form. Dalam artikel ini, kita akan membahas bagaimana cara membuat form dengan JavaScript.

1. Menyiapkan HTML Form

Sebelum mulai dengan JavaScript, kita perlu membuat struktur HTML untuk formulir tersebut. Di bawah ini adalah contoh sederhana untuk form login:

<form id="myForm">
    <label for="fname">Nama Depan:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Nama Belakanag:</label><br>
    <input type="text" id="lname" name="lname"><br>
    <input type="submit" value="Submit">
</form>

Dalam contoh di atas, kita telah membuat form sederhana dengan dua field input (Nama Depan dan Nama Belakang) dan tombol submit.

2. Membuat JavaScript Form

Setelah menyiapkan HTML form, langkah berikutnya adalah membuat interaksi form menggunakan JavaScript. Kita harus memperhatikan bahwa setiap elemen form dalam HTML memiliki id yang unik.

var form = document.getElementById("myForm");

form.onsubmit = function(e) {
    e.preventDefault(); 

    var namaDepan = document.getElementById("fname").value;
    var namaBelakang = document.getElementById("lname").value;

    console.log("Nama Lengkap: " + namaDepan + " " + namaBelakang);
}

Perhatikan bahwa kita menggunakan metode preventDefault() untuk mencegah halaman me-refresh saat form di-submit. Kemudian, kita mengambil nilai dari setiap field input menggunakan getElementById().

3. Menampilkan Hasil

Setelah berhasil mengambil nilai dari input field, kita dapat menampilkan hasilnya menggunakan fungsi console.log().

console.log("Nama Lengkap: " + namaDepan + " " + namaBelakang);

Ini hanya contoh sederhana dari bagaimana kita dapat membuat form dengan JavaScript. Dengan pemahaman yang sama, kita dapat membuat form yang lebih kompleks dengan berbagai interaksi.

Demikianlah cara membuat form di JavaScript yang dapat kamu praktekkan. Seru, bukan? Selamat mencoba dan berkreasi dengan kode kamu!