Suatu bentuk yang menangkap kesalahan

Seorang pengunjung meninggalkan pesan kepada kamu, dan formulir tersebut dengan sopan menunjukkan jika ada sesuatu yang hilang.

Tunjukkan pada saya: formulir dalam HTML

Formulir adalah sekumpulan bidang yang diketik pengunjung:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

<form> membungkus seluruh formulir. <input> adalah bidang satu baris, <textarea> adalah bidang multi-baris.
<label> adalah keterangan bidang – berkat for dan id, keduanya menjadi satu (mengklik label akan melompat ke bidang).
placeholder adalah teks petunjuk berwarna abu-abu.
Tombol dengan type="submit" mengirimkan formulir.

Dan sedikit CSS agar terlihat bagus:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

arah fleksibel: kolom mengubah kotak fleksibel dari samping menjadi tegak: anak-anak berbaris satu di bawah yang lain.

Tunjukkan pada saya: memeriksanya dalam JavaScript

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

Barang baru:

kirim – acara “formulir sedang diserahkan”. Kami mendengarkannya di formulir, bukan di tombol.
event.preventDefault() – “jangan lakukan apa yang biasa kamu lakukan.” Tanpa ini, halaman akan dimuat ulang dan skrip kita tidak akan dapat dijalankan.
.value – apa pun yang diketik di kolom. .trim() memangkas spasi (jadi ” ” dianggap kosong!).
return – segera keluar dari fungsi (tidak ada gunanya menjalankan pemeriksaan lebih lanjut).

💡

Ke mana pesannya pergi? Belum ada tempat – kami tidak memiliki server untuk menerimanya. Kami hanya memeriksa pesannya dan mengucapkan terima kasih. Tapi ingat tempat ini: di Level 3, kita akan membangun server nyata dengan buku tamu dan menghubungkan formulir ini ke dalamnya. Maka pesan akan benar-benar disimpan!

Giliran kamu 💪

Tambahkan formulir ke situs web kamu yang sesuai untuk proyek kamu, dengan pemeriksaan masukan:

🏫 Pesan untuk sekolah – nama + pesan (seperti contoh).
🙋 Tulis ke saya – nama + pesan, jangan ragu untuk menambahkan kolom “game favoritmu” juga.
🌍 Saran perjalanan – nama + “ke mana kita harus pergi selanjutnya dan alasannya.”
⚽ Pendaftaran pelatihan – nama + usia (<input type="number">) + periksa apakah usia sudah terisi dan minimal 6: if (age.value < 6) { ... }.

⚠️

Kebiasaan keamanan para profesional: jangan pernah mempercayai apa yang diketik pengguna. Selalu centang – kolom kosong, usia tidak masuk akal, teks terlalu panjang. Hari ini kamu melakukannya demi kesopanan; dalam aplikasi nyata, ini adalah garis pertahanan pertama melawan penyerang.

✅

Periksa diri kamu: Mengirimkan formulir kosong akan menandai bidang tersebut dengan warna merah dan menampilkan pesan. Formulir yang sudah diisi mengucapkan terima kasih berdasarkan nama dan dibersihkan dengan sendirinya. Sopan, ramah, profesional.

Apa yang bisa diambil dari pelajaran ini

Formulir: <form>, <input>, <textarea>, <label>, dan acara submit dengan preventDefault().
.value.trim() = apa yang diketik pengguna, tanpa spasi di sekitarnya.
Masukan pengguna harus selalu diperiksa – itulah dasar pemrograman yang aman.