Section ini membahas styling forms dan controls sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Styling Input

Tata input teks dengan benar: warisi font, atur padding, border, radius, dan fokus, lalu samakan tingginya dengan tombol.

Buka → # Styling Textarea dan Select

Kendalikan pegangan resize textarea dengan property resize, dan ganti tampilan select bawaan memakai appearance: none plus panah SVG.

Buka → # Styling Checkbox dan Radio

Dua jalan menata checkbox dan radio — accent-color satu baris untuk rasa native, atau appearance: none plus :checked untuk kontrol kustom dan toggle switch.

Buka → # Styling Buttons

Bangun sistem tombol yang terorganisir: base class, varian utama-sekunder-bahaya, ukuran, tombol ikon, dan state interaksinya.

Buka → # Focus States pada Form

Terapkan :focus-visible pada input dan :focus-within pada wrapper field, lalu pilih resep ring yang konsisten — outline atau box-shadow.

Buka → # Validation States

Reaksikan CSS terhadap validasi bawaan HTML lewat :valid, :invalid, dan :required — lalu perbaiki UX-nya dengan :user-valid dan :user-invalid.

Buka → # Disabled dan Readonly

Bedakan :disabled dan [readonly] secara perilaku maupun tampilan, dan kunci satu grup sekaligus dengan fieldset disabled.

Buka → # Layout Form

Susun form dengan pola bertumpuk, baris inline, dan grid dua kolom label-input, lengkap dengan fieldset, legend, dan ritme spacing lewat gap.

Buka → # Form Accessibility

Tutup section ini dengan peran CSS dalam aksesibilitas form: label yang terlihat, kontras yang cukup, fokus yang jelas, error bukan warna saja, dan target sentuh 44px.

Buka →