1. Elemen Inti Formulir Web
Formulir adalah pintu masuk utama interaksi dua arah antara pengguna dan server (login, pendaftaran, transaksi pembayaran). Setiap elemen input WAJIB dipasangkan dengan elemen `<label>` yang memiliki atribut `for="..."` yang cocok dengan `id="..."` input tersebut demi aksesibilitas.
Formulir dengan Validasi Native HTML5
html
| 1 | <form action="/api/login" method="POST"> |
| 2 | <div> |
| 3 | <label for="user-email">Alamat Email:</label> |
| 4 | <input |
| 5 | type="email" |
| 6 | id="user-email" |
| 7 | name="email" |
| 8 | required |
| 9 | placeholder="nama@domain.com" |
| 10 | /> |
| 11 | </div> |
| 12 | |
| 13 | <div> |
| 14 | <label for="user-password">Kata Sandi:</label> |
| 15 | <input |
| 16 | type="password" |
| 17 | id="user-password" |
| 18 | name="password" |
| 19 | required |
| 20 | minlength="8" |
| 21 | /> |
| 22 | </div> |
| 23 | |
| 24 | <button type="submit">Masuk ke Akun</button> |
| 25 | </form> |
Aturan Keamanan: Client-Side Validation BUKAN Pengaman Utama
Validasi di HTML/JavaScript hanya bertujuan memberikan kenyamanan UX yang cepat bagi pengguna. Pengguna nakal atau hacker bisa mematikan JavaScript atau mengirim request langsung dengan Postman/cURL. Karena itu, **SERVER-SIDE VALIDATION SELALU WAJIB DILAKUKAN DI BACKEND**!
Kuis Pemahaman
+10 XP
Mengapa kita tidak boleh hanya mengandalkan validasi form di sisi browser (client-side) saja?