Built-in Validation & Submission

Setelah lesson ini, kamu dapat menambahkan validasi HTML bawaan dan menjelaskan batas pengiriman form tanpa backend.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Pengguna lupa mengisi email. Daripada membiarkan mereka menebak, browser dapat memberi petunjuk langsung berdasarkan aturan HTML sederhana.

Menambahkan validasi HTML bawaan dan menjelaskan batas pengiriman form tanpa backend.

PAHAMI KONSEPNYA

Aturan yang sudah disediakan browser

Required menandai isian wajib. Type email memeriksa bentuk alamat, bukan apakah kotak email itu benar-benar ada. Minlength membatasi panjang minimum teks; min dan max membatasi nilai number. Tulis juga petunjuk aturan di label atau teks agar orang tahu sebelum salah.

Validasi bukan keamanan server

Validasi browser membantu pengguna, tetapi dapat dilewati. Aplikasi nyata tetap harus memeriksa data di server. Required="false" tetap wajib karena required adalah atribut boolean; hapus atribut jika isian opsional.

Get, post, dan batas demo

Method get biasanya membawa data melalui query URL; post membawa data melalui body permintaan. Post sendiri bukan enkripsi: perlindungan koneksi memerlukan HTTPS. Action menentukan tujuan pemrosesan. Preview Lucia memblokir pengiriman form; tidak ada data yang dikirim atau pesan “berhasil terkirim”. Untuk mencoba validasi di sini, gunakan tombol Coba validasi form di panel preview.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<form method="get">
  <label for="email">Email (wajib)</label>
  <input id="email" name="email" type="email" required>
  <label for="pesan">Pesan (minimal 10 karakter)</label>
  <textarea id="pesan" name="pesan" required minlength="10"></textarea>
  <label for="peserta">Jumlah peserta (1–5)</label>
  <input id="peserta" name="peserta" type="number" min="1" max="5" required>
  <p>Demonstrasi lokal; tidak mengirim data.</p>
  <button type="button">Demo tanpa pengiriman</button>
</form>

HASIL DI BROWSER

Aturan melekat pada kontrol. Tombol biasa tidak memicu pengiriman; panel validasi Lucia menyediakan percobaan terpisah dengan kontrol native yang aman.

KESALAHAN YANG SERING TERJADI

<input type="email" required="false">

Input ini tetap wajib. Boolean HTML ditentukan kehadiran atribut, bukan teks false. Hapus required bila email opsional.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Form memakai type email dan required. Apakah server boleh langsung mempercayai data?

Ya, browser menjamin semua data amanTidak, server tetap harus memvalidasi dataYa, selama method post

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Aturan yang membantu pengisi

Perbaiki form: email wajib, textarea pesan wajib minimal 10 karakter, jumlah peserta wajib 1–5. Semua isian berlabel. Tambahkan teks “Demo, data tidak dikirim” dan gunakan tombol type button.

<form>
  <label for="email">Email</label><input id="email" name="email" type="text">
  <label for="pesan">Pesan</label><textarea id="pesan" name="pesan"></textarea>
  <label for="peserta">Peserta</label><input id="peserta" name="peserta" type="number">
  <button>Kirim</button>
</form>

index.htmlHTMLLn 1, Col 16 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

HTML menyediakan aturan validasi dasar.
Validasi klien tidak menggantikan pemeriksaan server.
Form demo ini tidak mengirim data; get dan post bukan backend.

FormDebugging

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

HTML validation °HTML form °HTTPS °

Library: Apa yang terjadi saat kamu membuka sebuah website? ↗

Hadapi Chapter Trial →