Slide DevCoach

DevCoach 128 : Front-End | Praktik Wajib Membangun Formulir dengan Baik

Transcript

1. Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Front-End Web
2. Position Praktik Wajib Membangun Formulir dengan Baik Front-End Web Nur Rizki Adi Curriculum Developer
4. Learning Objectives • Menjelaskan cara web developer mengambil data user. • Menunjukkan validasi yang tepat untuk format data yang benar. • Menjelaskan pentingnya styling bagi formulir. • Menjelaskan pentingnya script bagi formulir. • Menunjukkan praktik-praktik baik dalam membangun formulir. Front-End Web
5. Bagaimana cara kita mendapatkan data dari user? Front-End Web
9. Formulir apa yang pernah kalian buat? Front-End Web
10. Tipe-Tipe Input Front-End Web
11. Kontainer Formulir Front-End Web
12. Submit dengan Tombol Front-End Web
13. Communication Between Client-Server Front-End Web
14. Request Method Form GET POST Front-End Web
15. <form> <label> Street <input type="text" name="street" id="street" /> </label><br /> <label> Postal Code <input type="text" inputmode="numeric" name="postalCode" id="postalCode" /> </label><br /> <label> Regency <select name="regency" id="regency"> <option value="bandung">Bandung</option> <option value="semarang">Semarang</option> <option value="surabaya">Surabaya</option> </select> </label><br /> <button>Kirim</button> </form> Formulir Alamat Front-End Web
16. Perbedaan Pengiriman Data Front-End Web
17. Front-End Web Communication Between Client-Server
18. Mendukung Input Bertipe Blob Front-End Web
19. Formulir Pendataan Pribadi Front-End Web
20. Front-End Web
21. Validasi Input Front-End Web
22. Native Input Validation • Ketepatan Tipe Input • Wajib Diisi • Batasan Diperlukan • Lebih Ketat Lebih Baik Front-End Web
23. Ketepatan Tipe Input Front-End Web Memilih tipe input yang tepat dapat memberikan metode validasi yang tepat sesuai tipenya.
24. Wajib Isi Front-End Web
25. Menambahkan Batasan Front-End Web
26. Lebih Ketat Lebih Baik Front-End Web
27. Formulir Pendataan Pribadi Tipe input apakah yang tepat? Front-End Web 1. ………… 3. ………. 2. …………. 4. ……………….. text email url <select>
28. Front-End Web <label> Domisili <select name="regency" id="regency"> <option value="" selected disabled>Silakan pilih opsi</option> <option value="bandung">Bandung</option> <option value="semarang">Semarang</option> <option value="surabaya">Surabaya</option> </select> </label>
29. Meningkatkan UX dengan CSS • Memperjelas dengan Fokus • Lebih Terbaca Saat Besar • Tampilkan dengan Layak • Mengubah Aksen • Invalid State Front-End Web
30. Memperjelas dengan Fokus <form> <div class="form-group"> <label for="name">Nama</label> <input type="text" name="name" id="name" /> </div> <button class="btn">Kirim</button> </form> input:focus-visible { appearance: none; outline: none; box-shadow: 0 0 0 6px rgb(30, 144, 255, 0.65); } label:has(+ input:focus-visible) { font-weight: bold; } Front-End Web
31. Lebih Terbaca Saat Besar Front-End Web <input name="name" id="default-font-size" class="default-font-size" value="Default font-size" /> <input name="name" id="change-font-size" class="change-font-size" value="1rem font-size" /> input.change-font-size { font-size: 1rem; }
32. Tampilkan dengan Layak input { border: 1px solid #333333; } Front-End Web
33. Mengubah Aksen Front-End Web input[type='radio'], input[type='checkbox'], input[type='range'] { accent-color: salmon; }
34. Invalid State Front-End Web <form> <div class="form-group"> <label for="name">Nama</label> <input type="text" name="name" id="name" required /> </div> <button class="btn">Kirim</button> </form>
35. Peran Penting Script bagi Form Front-End Web
36. Conditional Form Front-End Web conditional-form-example-3gv479 - codesandbox.io
37. Menampilkan Data Sebelumnya Front-End Web Menetapkan nilai awal (initial value) pada <input> dengan getAttribute.
38. Tips Menjadi Form Baik Front-End Web
39. Label Dahulu Form Control Kemudian • Menulis <label> lebih awal akan sangat membantu menentukan tujuan awal. • Deskripsi form control secara lebih jelas.
40. Berjelajah dengan Mudah • Layout formulir ternyata memiliki pengaruh terhadap kendala dalam melengkapi datanya. • Layout terbaik untuk membangun formulir adalah satu kolom.
42. Memperjelas Caption Tombol Submit Memberikan caption yang tepat akan memberikan gambaran jelas mengenai hal yang selanjutnya akan terjadi atau user hadapi.
43. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
44. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
45. Front-end Web