Form Handling dalam JavaScript

   April 10, 2025       Mahatma Mahardhika

---

Form Handling dalam JavaScript

Table of Contents

• Pengertian Form Handling
• Menangani Form dengan Event Listener
• Menggunakan State dalam Form React
• Validasi Form dalam JavaScript
• Contoh Penerapan
• Kesimpulan

---

Pengertian Form Handling

Form handling dalam JavaScript adalah proses mengelola input pengguna, memvalidasi data, dan mengirimkan data ke server. JavaScript memungkinkan pengembang untuk menangani event formulir seperti onSubmit, onChange, dan onClick.

---

Menangani Form dengan Event Listener

Dalam JavaScript, event listener digunakan untuk menangkap input dari formulir dan mencegah perilaku default pengiriman form.

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  let name = document.getElementById("name").value;
  alert("Nama: " + name);
});

---

Menggunakan State dalam Form React

Dalam React, form dikendalikan menggunakan state untuk menangkap perubahan nilai input.

import React, { useState } from "react";

const FormComponent = () => {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Nama: " + name);
  };

  return (
    

       setName(e.target.value)} />
      
    
  );
};

---

Validasi Form dalam JavaScript

Validasi form dapat dilakukan sebelum data dikirim ke server.

const validateForm = () => {
  let email = document.getElementById("email").value;
  let errorMessage = "";

  if (!email.includes("@")) {
    errorMessage = "Email tidak valid";
  }

  document.getElementById("error").innerText = errorMessage;
};

---

Contoh Penerapan

Form handling sering digunakan untuk:

• Autentikasi pengguna (login, registrasi).
• Pencarian data dengan input pengguna.
• Pengumpulan data survei atau formulir kontak.

---

Kesimpulan

Form handling dalam JavaScript memungkinkan pengelolaan input pengguna dengan lebih efektif. Dengan memanfaatkan event listener, state dalam React, dan validasi form, pengembang dapat meningkatkan pengalaman pengguna dan mencegah kesalahan input.