Manipulasi Form dengan JavaScript

Formulir (form) merupakan elemen penting dalam pengembangan web, terutama dalam interaksi antara pengguna dan aplikasi. Melalui form, pengguna dapat memasukkan data yang kemudian diproses oleh sistem. JavaScript, sebagai bahasa pemrograman sisi klien yang populer, memungkinkan pengembang untuk memanipulasi form secara dinamis, sehingga pengalaman pengguna menjadi lebih interaktif dan responsif.

1. Mengenal Elemen Form

Form HTML umumnya terdiri atas berbagai elemen input seperti:

• input (teks, sandi, radio, checkbox, dll.)
• select (daftar pilihan)
• textarea (teks panjang)
• button (tombol)

Contoh dasar form:

<form id="formKontak">
  <input type="text" id="nama" name="nama" placeholder="Nama">
  <input type="email" id="email" name="email" placeholder="Email">
  <button type="submit">Kirim</button>
</form>

2. Mengakses Nilai Form dengan JavaScript

JavaScript memungkinkan kita untuk mengambil nilai dari elemen form menggunakan DOM (Document Object Model).

const nama = document.getElementById("nama").value;
const email = document.getElementById("email").value;
console.log(`Nama: ${nama}, Email: ${email}`);

3. Menangani Event Form

Salah satu hal penting dalam manipulasi form adalah menangani event, seperti saat from dikirimkan.

document.getElementById("formKontak").addEventListener("submit", function(event) {
  event.preventDefault(); // Mencegah pengiriman form secara default
  const nama = document.getElementById("nama").value;
  alert(`Halo, ${nama}! Form berhasil dikirim.`);
});

4. Validasi Form

JavaScript juga dapat digunakan untuk memvalidasi input pengguna sebelum data dikirim ke server.

function validasiEmail(email) {
  const pola = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pola.test(email);
}

document.getElementById("formKontak").addEventListener("submit", function(event) {
  event.preventDefault();
  const email = document.getElementById("email").value;

  if (!validasiEmail(email)) {
    alert("Alamat email tidak valid.");
    return;
  }

  alert("Form valid dan siap dikirim.");
});

5. Mengubah Elemen Form secara Dinamis

JavaScript juga memungkinkan kita untuk menambahkan, menghapus, atau mengubah elemen form secara langsung dari kode.

Contoh menambahkan input baru:

const inputBaru = document.createElement("input");
inputBaru.type = "text";
inputBaru.placeholder = "Nomor Telepon";
document.getElementById("formKontak").appendChild(inputBaru);

Kesimpulan

Manipulasi Form menggunakan JavaScript memberikan fleksibilitas tinggi dalam pengembangan antarmuka pengguna. Dengan pemahaman dasar seperti pengambilan nilai, penanganan event, validasi, dan modifikasi elemen secara dinamis, pengembang dapat menciptakan form yang interaktif dan responsif terhadap kebutuhan pengguna. Pemanfaatan JavaScript yang tepat dapat meningkatkan pengalaman pengguna secara signifikan dalam berinteraksi dengan aplikasi web.