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?
Bagaimana cara menambah spasi antar-kontrol formulir?
padding.spacer.margin.boundary.