FormsLesson 123Preview gratis
Form with Icons
Lesson ini bagian dari How To · Semua level
Ringkasan
Form with icons menambahkan ikon di dalam input untuk memberi petunjuk visual tentang jenis data yang diminta. Ikon diposisikan absolut di dalam pembungkus relative, sedangkan input diberi padding kiri agar teks tidak menimpa ikon. Ikon dekoratif sebaiknya disembunyikan dari pembaca layar.
Poin kunci
- Pembungkus input memakai position: relative.
- Ikon memakai position: absolute di sisi kiri input.
- padding-left pada input mencegah teks bertabrakan dengan ikon.
- Ikon dekoratif diberi aria-hidden="true".
- :focus-within dapat menyorot seluruh pembungkus saat input aktif.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.