Ngobrolin Form - Ngobrolin WEB

Episode ini membahas secara mendalam tentang formulir (forms) dalam pengembangan web, yang ternyata jauh lebih kompleks dari yang terlihat. Diskusi dimulai dengan sejarah elemen form yang sudah ada sejak HTML era 90-an dan menjadi salah satu penanda transisi dari halaman web statis ke aplikasi web interaktif. Host membahas berbagai aspek form mulai dari dasar-dasar HTML form, method GET vs POST, berbagai tipe input yang tersedia (text, email, date, color, file, dll), hingga validasi baik di client-side maupun server-side. Episode ini juga menyinggung tentang integrasi dengan password manager, autocomplete, accessibility, dan security. Pembahasan meliputi payment form sebagai study case yang kompleks karena melibatkan banyak best practice, serta berbagai library form helper seperti Formik dan React Hook Form beserta validasi library seperti Zod yang bisa digunakan baik di frontend maupun backend.

Poin-poin Utama

• •Form adalah salah satu elemen HTML tertua yang menjadi penanda transisi dari web statis ke aplikasi web interaktif, memungkinkan user mengirim data ke server
• •Method GET mengirim data melalui query string di URL sementara POST mengirim data melalui body request untuk data yang sensitif
• •HTML menyediakan berbagai tipe input spesifik seperti email, date, color, number, file yang secara otomatis memberikan validasi dan UI yang sesuai di berbagai browser dan device
• •Validasi form terjadi di multiple layers: client-side (browser), client-side (JavaScript), server-side, dan database - masing-masing dengan tujuan berbeda
• •Browser modern memiliki built-in validation API yang bisa di-customize tanpa library tambahan, namun perlu hati-hati dengan error message browser yang mengikuti bahasa settingan browser
• •Payment form adalah study case yang kompleks karena melibatkan banyak best practice mulai dari meaningful HTML, proper autocomplete, input type selection, hingga mencegah multiple submissions
• •Library form helper seperti Formik, React Hook Form, dan validasi library seperti Zod membantu mengelola kompleksitas form, dengan Zod memiliki keunggulan bisa digunakan baik di frontend maupun backend dengan schema yang sama