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

Resource

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