Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Slide DevCoach
Search
shabilla
April 11, 2024
0
27
Slide DevCoach
DevCoach 128 : Front-End | Praktik Wajib Membangun Formulir dengan Baik
shabilla
April 11, 2024
Tweet
Share
More Decks by shabilla
See All by shabilla
Slide DevCoach #151
shabillarestu
0
48
Slide DevCoach
shabillarestu
0
47
Slide DevCoach
shabillarestu
0
27
Slide DevCoach
shabillarestu
0
19
Slide DevCoach
shabillarestu
0
26
Slide DevCoach
shabillarestu
0
16
Slide DevCoach
shabillarestu
0
27
Slide DevCoach
shabillarestu
0
23
Slide DevCoach
shabillarestu
0
26
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Building Applications with DynamoDB
mza
96
6.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
The Cult of Friendly URLs
andyhume
79
6.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How GitHub (no longer) Works
holman
315
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Become a Pro
speakerdeck
PRO
29
5.5k
A designer walks into a library…
pauljervisheath
207
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore. Front-End Web
Position Praktik Wajib Membangun Formulir dengan Baik Front-End Web Nur
Rizki Adi Curriculum Developer
None
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
Bagaimana cara kita mendapatkan data dari user? Front-End Web
None
None
None
Formulir apa yang pernah kalian buat? Front-End Web
Tipe-Tipe Input Front-End Web
Kontainer Formulir Front-End Web
Submit dengan Tombol Front-End Web
Communication Between Client-Server Front-End Web
Request Method Form GET POST Front-End Web
<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
Perbedaan Pengiriman Data Front-End Web
Front-End Web Communication Between Client-Server
Mendukung Input Bertipe Blob Front-End Web
Formulir Pendataan Pribadi Front-End Web
Front-End Web
Validasi Input Front-End Web
Native Input Validation • Ketepatan Tipe Input • Wajib Diisi
• Batasan Diperlukan • Lebih Ketat Lebih Baik Front-End Web
Ketepatan Tipe Input Front-End Web Memilih tipe input yang tepat
dapat memberikan metode validasi yang tepat sesuai tipenya.
Wajib Isi Front-End Web
Menambahkan Batasan Front-End Web
Lebih Ketat Lebih Baik Front-End Web
Formulir Pendataan Pribadi Tipe input apakah yang tepat? Front-End Web
1. ………… 3. ………. 2. …………. 4. ……………….. text email url <select>
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>
Meningkatkan UX dengan CSS • Memperjelas dengan Fokus • Lebih
Terbaca Saat Besar • Tampilkan dengan Layak • Mengubah Aksen • Invalid State Front-End Web
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
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; }
Tampilkan dengan Layak input { border: 1px solid #333333; }
Front-End Web
Mengubah Aksen Front-End Web input[type='radio'], input[type='checkbox'], input[type='range'] { accent-color: salmon;
}
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>
Peran Penting Script bagi Form Front-End Web
Conditional Form Front-End Web conditional-form-example-3gv479 - codesandbox.io
Menampilkan Data Sebelumnya Front-End Web Menetapkan nilai awal (initial value)
pada <input> dengan getAttribute.
Tips Menjadi Form Baik Front-End Web
Label Dahulu Form Control Kemudian • Menulis <label> lebih awal
akan sangat membantu menentukan tujuan awal. • Deskripsi form control secara lebih jelas.
Berjelajah dengan Mudah • Layout formulir ternyata memiliki pengaruh terhadap
kendala dalam melengkapi datanya. • Layout terbaik untuk membangun formulir adalah satu kolom.
None
Memperjelas Caption Tombol Submit Memberikan caption yang tepat akan memberikan
gambaran jelas mengenai hal yang selanjutnya akan terjadi atau user hadapi.
Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo
[email protected]
Nur
Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk
pengisi feedback terpilih! dicoding.id/devcoachfeedback
Front-end Web