Form Events

Dalam JavaScript, form events memungkinkan Anda untuk menangani berbagai peristiwa yang terjadi pada elemen formulir HTML. Berikut adalah beberapa contoh peristiwa yang umumnya digunakan:

1. submit Event:

Event ini terjadi ketika pengguna mengirimkan formulir.

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Mencegah pengiriman formulir ke server
    alert("Formulir telah dikirim!");
});

2. input Event:

Event ini terjadi ketika nilai pada elemen input berubah.

document.getElementById("myInput").addEventListener("input", function() {
    console.log("Nilai input berubah: " + this.value);
});

3. change Event:

Event ini terjadi ketika nilai pada elemen input, select, atau textarea berubah setelah kehilangan fokus.

document.getElementById("mySelect").addEventListener("change", function() {
    alert("Nilai yang dipilih berubah: " + this.value);
});

4. focus dan blur Events:

Event focus terjadi ketika elemen input mendapatkan fokus, sementara event blur terjadi ketika elemen input kehilangan fokus.

document.getElementById("myInput").addEventListener("focus", function() {
    console.log("Input mendapatkan fokus");
});

document.getElementById("myInput").addEventListener("blur", function() {
    console.log("Input kehilangan fokus");
});

5. reset Event:

Event ini terjadi ketika pengguna menekan tombol reset pada formulir.

document.getElementById("myForm").addEventListener("reset", function() {
    console.log("Formulir telah direset!");
});

Dengan menangani peristiwa-peristiwa ini, Anda dapat membuat formulir yang lebih interaktif dan responsif terhadap interaksi pengguna.