Menata gaya formulir

Bantu pengguna menggunakan formulir Anda dengan browser pilihan mereka

Untuk memastikan formulir Anda dapat diakses oleh sebanyak mungkin orang, gunakan elemen yang dibuat untuk tugas: <input>, <textarea>, <select>, dan <button>. Ini adalah dasar untuk formulir yang dapat digunakan.

Gaya browser default tidak terlihat bagus! Mari kita ubah.

Memastikan kontrol formulir dapat dibaca oleh semua orang

Ukuran font default untuk kontrol formulir di kebanyakan browser terlalu kecil. Untuk memastikan kontrol formulir Anda dapat dibaca, ubah ukuran font dengan CSS:

Tingkatkan font-size dan line-height agar lebih mudah dibaca.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Membantu pengguna menjelajahi formulir Anda

Sebagai langkah berikutnya, ubah tata letak formulir Anda, dan tingkatkan jarak elemen formulir, untuk membantu pengguna memahami elemen mana yang saling terkait.

Properti CSS margin menambah ruang antar elemen, dan properti padding menambah ruang di sekitar konten elemen.

Untuk tata letak umum, gunakan Flexbox atau Grid. Pelajari lebih lanjut metode tata letak CSS.

Memastikan kontrol formulir terlihat seperti kontrol formulir

Permudah orang mengisi formulir Anda dengan menggunakan gaya yang dipahami dengan baik untuk kontrol formulir Anda. Misalnya, tata gaya elemen <input> dengan batas solid.

input,
textarea {
  border: 1px solid;
}

Membantu pengguna mengirimkan formulir Anda

Sebaiknya gunakan background untuk <button> agar sesuai dengan gaya situs Anda, dan mengganti atau menghapus gaya border default.

Membantu pengguna memahami status saat ini

Browser menerapkan gaya default untuk :focus. Anda dapat mengganti gaya untuk :focus agar sesuai dengan warna merek Anda.

button:focus {
    outline: 4px solid green;
}

Menguji pemahaman Anda

Uji pengetahuan Anda tentang penataan gaya formulir

Mengapa Anda harus menggunakan unit relatif untuk font-size?

Untuk memastikan ukuran merespons preferensi pengguna.
🎉
Untuk memastikan ukuran merespons elemen sebelumnya.
Coba lagi.
Untuk memastikan ukuran merespons mode gelap.
Coba lagi.
Untuk memastikan ukuran merespons kueri media.
Coba lagi.

Bagaimana cara menambah spasi antar-kontrol formulir?

Menggunakan properti CSS padding.
Coba lagi.
Menggunakan properti CSS spacer.
Coba lagi.
Menggunakan properti CSS margin.
🎉
Menggunakan properti CSS boundary.
Coba lagi.

Resource