JavaScript - Form Events: A Beginner's Guide

Halo sana, para pengembang yang sedang belajar! Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya sangat gembira untuk memandu Anda melalui dunia menarik JavaScript form events. Jangan khawatir jika Anda baru dalam programming – kita akan mulai dari dasar dan naik turun secara bertahap. Jadi, ambil secangkir kopi, nyamanlah, dan mari kita masuk ke dalam!

Apa Itu Form Events?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu form events. Dalam pengembangan web, formulir seperti pekerjaan digital – mereka mengumpulkan informasi dari pengguna. Form events adalah kejadian khusus yang terjadi saat pengguna berinteraksi dengan formulir ini. Itu seperti saat Anda mengisi formulir kerja, dan resepsionis mendeteksi setiap kali Anda mengambil atau menurunkan pena – itu apa yang dilakukan form events di dunia digital!

Form Events Umum

Mari kita lihat beberapa form events paling umum yang Anda temui:

Nama Event	Deskripsi
submit	Diperankan saat formulir dikirim
reset	Diperankan saat formulir direset
focus	Diperankan saat elemen menerima fokus
blur	Diperankan saat elemen kehilangan fokus
change	Diperankan saat nilai elemen input berubah
input	Diperankan saat nilai elemen input berubah (untuk setiap penekan tombol)

Sekarang, mari kita jelajahi masing-masing dari ini dengan beberapa contoh praktis!

Contoh Form Events dalam Aksi

1. Event Submit

Event submit mungkin adalah form event paling umum yang Anda gunakan. Itu diperankan saat pengguna mencoba mengirim formulir.

<form id="myForm">
<input type="text" id="name" placeholder="Masukkan nama Anda">
<button type="submit">Kirim</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Cegah formulir dari mengirimkan sebenarnya
var name = document.getElementById("name").value;
alert("Halo, " + name + "! Formulir Anda telah dikirim.");
});
</script>

Dalam contoh ini, kita mendengarkan event submit pada formulir kita. Saat itu terjadi, kita mencegah perilaku default (yang akan mengirimkan formulir sebenarnya), mendapatkan nilai dari input nama, dan menampilkan alert dengan salam.

2. Event Reset

Event reset terjadi saat formulir direset ke nilai defaultnya. Itu seperti menekan tombol "undo" pada formulir Anda!

<form id="myForm">
<input type="text" id="name" placeholder="Masukkan nama Anda">
<button type="reset">Reset</button>
</form>

<script>
document.getElementById("myForm").addEventListener("reset", function(event) {
alert("Formulir direset!");
});
</script>

Di sini, setiap kali tombol reset ditekan, alert akan muncul untuk memberitahu Anda bahwa formulir direset.

3. Event Focus dan Blur

Event focus dan blur seperti lampu sorot dunia formulir. Focus terjadi saat elemen mendapat lampu sorot, dan blur adalah saat itu kehilangannya.

<input type="text" id="myInput" placeholder="Klik saya!">

<script>
var input = document.getElementById("myInput");

input.addEventListener("focus", function() {
this.style.backgroundColor = "yellow";
});

input.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
</script>

Dalam contoh ini, saat Anda mengklik (focus) input, itu berubah warna menjadi kuning. Saat Anda mengklik keluar (blur), itu kembali ke normal. Itu seperti input malu dan merah muka saat Anda memberikan perhatian kepadanya!

4. Event Change

Event change diperankan saat nilai elemen input berubah dan kehilangan fokus.

<select id="colorSelect">
<option value="">Pilih warna</option>
<option value="red">Merah</option>
<option value="blue">Biru</option>
<option value="green">Hijau</option>
</select>

<script>
document.getElementById("colorSelect").addEventListener("change", function() {
document.body.style.backgroundColor = this.value;
});
</script>

Skrip ini mengubah warna latar belakang halaman berdasarkan pilihan Anda. Itu seperti memiliki tongkat ajaib yang menggambar seluruh ruangan!

5. Event Input

Event input mirip dengan event change, tapi itu diperankan segera setelah nilai berubah.

<input type="text" id="textInput" placeholder="Ketik sesuatu...">
<p id="output"></p>

<script>
var input = document.getElementById("textInput");
var output = document.getElementById("output");

input.addEventListener("input", function() {
output.textContent = "Anda mengetik: " + this.value;
});
</script>

Contoh ini menunjukkan umpan balik real-time saat Anda mengetik. Itu seperti memiliki echo ramah yang mengulang apa yang Anda katakan, tapi dalam bentuk teks!

Menggabungkan Semua

Sekarang kita telah melihat event ini dalam aksi, mari kita buat contoh yang lebih kompleks yang menggunakan beberapa event:

<form id="registrationForm">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<input type="email" id="email" placeholder="Email">
<button type="submit">Daftar</button>
<button type="reset">Bersihkan</button>
</form>

<script>
var form = document.getElementById("registrationForm");
var username = document.getElementById("username");
var password = document.getElementById("password");
var email = document.getElementById("email");

// Event submit
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("Pendaftaran dikirimkan untuk " + username.value);
});

// Event reset
form.addEventListener("reset", function() {
alert("Formulir dibersihkan!");
});

// Event focus
[username, password, email].forEach(function(element) {
element.addEventListener("focus", function() {
this.style.backgroundColor = "#e6f3ff";
});
});

// Event blur
[username, password, email].forEach(function(element) {
element.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
});

// Event input
email.addEventListener("input", function() {
if (this.value.includes("@")) {
this.style.borderColor = "green";
} else {
this.style.borderColor = "red";
}
});
</script>

Formulir pendaftaran ini menampilkan semua event yang kita pelajari:

• Event submit mencegah formulir dari mengirimkan dan menampilkan alert saja.
• Event reset memberitahu saat formulir dibersihkan.
• Event focus dan blur mengubah warna latar belakang input saat dipilih.
• Event input pada field email mengubah warna border berdasarkan apakah input mengandung karakter "@".

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dalam dunia JavaScript form events. Ingat, event ini seperti indera halaman web Anda – mereka membantu kode Anda "melihat" dan "rasa" apa yang pengguna lakukan. Dengan latihan, Anda akan dapat membuat formulir interaktif dan responsif yang membuat website Anda hidup.

Terus mencoba, terus mengoding, dan terutama, bersenang-senang! Perjalanan ribuan mil dimulai dari satu langkah, dan Anda telah mengambil langkah besar. Selamat coding, para pengembang masa depan!

Credits: Image by storyset