JavaScript - Form Events: A Beginner's Guide

Hai there, para pengembang yang sedang belajar! Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya sangat senang untuk membimbing Anda melalui dunia menarik JavaScript form events. Jangan khawatir jika Anda baru saja memulai programming - kita akan mulai dari dasar dan naik turun. Jadi, ambil secangkir kopi, betahlah, dan mari kita masuk ke dalam!

Apa Itu Form Events?

Sebelum kita melompat ke hal-hal kecil, mari kita mengerti 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 melihat setiap kali Anda mengambil atau menurunkan pena - itu apa yang dilakukan form events di dunia digital!

Form Events Umum

Bergambar beberapa form events umum yang Anda akan temui:

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

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 yang paling umum Anda gunakan. Itu dipicu 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("Hai, " + 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 saat itu kehilangan lampu sorot.

<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, warna latar belakangnya berubah menjadi kuning. Saat Anda mengklik keluar (blur), warna latar belakangnya kembali normal. Itu seperti input malu dan merah muka saat Anda memberikan perhatian kepadanya!

4. Event Change

Event change dipicu 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 mencat keseluruhan ruangan!

5. Event Input

Event input mirip dengan event change, tetapi itu diterapkan 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 mengulangi apa yang Anda katakan, tapi dalam bentuk teks!

Menggabungkan Semua

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

<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 events yang kita pelajari:

• Event submit mencegah formulir dari mengirimkan dan menunjukkan 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 batas berdasarkan apakah input mengandung "@".

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia JavaScript form events. Ingat, events ini seperti indra halaman web Anda - mereka membantu kode Anda "melihat" dan "merasakan" 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 langkah pertama, dan Anda telah mengambil langkah besar. Semoga sukses, para pengembang masa depan!

Credits: Image by storyset