Belajar untuk Meningkatkan Tampilan Situs Web Anda
Mempelajari cara menata bentuk dengan CSS adalah cara yang bagus untuk meningkatkan tampilan situs web Anda. Bentuk-bentuk HTML bisa dibilang di antara hal-hal terburuk di sebagian besar halaman web. Mereka sering membosankan dan utilitarian dan tidak menawarkan banyak gaya.
Dengan CSS, itu bisa berubah. Menggabungkan CSS dengan tag formulir yang lebih canggih dapat menghasilkan beberapa bentuk yang tampak bagus.
Ubah Warna
Sama seperti teks, Anda dapat mengubah warna latar depan dan latar belakang elemen formulir.
Cara mudah untuk mengubah warna latar belakang hampir setiap elemen formulir adalah menggunakan properti latar belakang-warna pada tag input. Misalnya, kode ini menerapkan warna latar belakang biru (# 9cf) pada semua elemen.
memasukkan {
warna latar belakang: # 9cf;
warna: # 000;
}
Untuk mengubah warna latar belakang hanya elemen bentuk tertentu, cukup tambahkan textarea dan pilih ke gaya. Sebagai contoh:
masukan, textarea, pilih {
warna latar belakang: # 9cf;
warna: # 000;
}
Pastikan untuk mengubah warna teks jika Anda membuat warna latar belakang Anda menjadi gelap. Warna kontras membantu membuat elemen form lebih mudah dibaca. Misalnya, teks pada warna latar belakang merah gelap jauh lebih mudah dibaca jika warna teks putih. Misalnya, kode ini menempatkan teks putih pada latar belakang merah.
masukan, textarea, pilih {
warna latar belakang: # c00;
warna: #fff;
}
Anda bahkan dapat meletakkan warna latar belakang pada tag form itu sendiri. Ingat bahwa tag form adalah elemen blok , sehingga warna mengisi seluruh persegi panjang, bukan hanya lokasi elemen.
Anda dapat menambahkan latar belakang kuning ke elemen blok untuk membuat area menonjol, seperti ini:
bentuk {
warna latar belakang: #ffc;
}
Tambahkan Borders
Seperti halnya warna, Anda dapat mengubah batas berbagai elemen formulir. Anda dapat menambahkan satu perbatasan di seluruh formulir. Pastikan untuk menambahkan padding, atau elemen formulir Anda akan macet di sebelah perbatasan.
Berikut ini contoh kode untuk batas hitam 1-piksel dengan 5 piksel padding:
bentuk {
border: 1px solid # 000;
padding: 5px;
}
Anda dapat menempatkan batas di sekitar lebih dari sekadar bentuk itu sendiri. Ubah batas dari item input untuk membuatnya menonjol:
memasukkan {
border: 2px putus # c00;
}
Hati-hati ketika Anda meletakkan batas pada kotak input karena mereka terlihat kurang seperti kotak input, dan beberapa orang mungkin tidak menyadari bahwa mereka dapat mengisi formulir.
Gabungkan Fitur Gaya
Dengan menyusun elemen formulir Anda dengan pemikiran dan beberapa CSS, Anda dapat menyiapkan formulir yang tampak bagus yang melengkapi desain dan tata letak situs Anda.