Menata gaya formulir

Membantu pengguna menggunakan formulir 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 pengukuran untuk bentuk yang dapat digunakan.

Gaya browser default tidak terlihat bagus. Mari kita ubah.

Pastikan kontrol formulir dapat dibaca oleh semua orang

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

Tingkatkan font-size dan line-height untuk meningkatkan keterbacaan.

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

Membantu pengguna menjelajahi formulir Anda

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

Properti CSS margin meningkatkan ruang antar-elemen, dan properti padding meningkatkan 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 untuk 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 ganti atau hapus gaya border default.

Membantu pengguna memahami status saat ini

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang penataan gaya formulir

Referensi

• Pelajari CSS
• Metode tata letak CSS
• Mendesain indikator fokus
• Mengembalikan gaya default <button>.