CSS - Borang: Panduan Lengkap untuk Pemula
Hai sana, para desainer web yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menarik dari borang CSS. Seperti teman sekelilingmu yang ramah, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Percayalah, pada akhir panduan ini, Anda akan menata borang seperti seorang ahli!
Borang CSS - Penataan Font dan Teks
Mari kita mulai dari dasar. Seperti cara kita mengenakan pakaian untuk berbagai kesempatan, kita juga dapat mengenakan elemen borang kita dengan berbagai jenis font dan gaya teks. mari lihat contohnya:
input[type="text"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}Kode ini mengatakan kepada browser untuk menggunakan font Arial untuk input teks, mengatur ukuran font ke 16 pixel, dan membuat warna teks menjadi abu-abu tua (#333). Itu seperti memberikan borang Anda pakaian yang mudah dibaca!
Borang CSS - Penataan Bendera dan Latar Belakang
Berikutnya, mari kita tambahkan sedikit keanehan ke elemen borang kita dengan bendera dan latar belakang:
input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}Kode ini memberikan input teks bendera hijau, sudut yang sedikit melengkung, dan latar belakang abu-abu cerah. Itu seperti memberikan elemen borang Anda kerangka yang indah!
Borang CSS - Menggunakan Padding dan Margin
Sekarang, mari kita memberikan ruang nafas bagi elemen borang kita:
input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}Ini menambahkan ruang di dalam input (padding) dan di bawahnya (margin). Itu seperti memberikan elemen borang Anda gelembung pribadi!
Borang CSS - Gaya Fokus
Ketika pengguna mengklik input, kita ingin menyorotnya. mari lihat bagaimana:
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}Ini menghapus garis sorot default dan menambahkan cahaya biru lembut saat input difokuskan. Itu seperti mengatakan "Hey, lihat aku!" kepada pengguna.
Borang CSS - Penataan Tombol
Tombol adalah pahlawan aksi borang Anda. Mari kita membuatnya terlihat bagus:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}Ini membuat tombol hijau yang menjadi gelap saat diarahkan kursor. Itu seperti memberikan tombol Anda kostum pahlawan super!
Borang CSS - Penataan Checkbox dan Tombol Radio
Menyusun checkbox dan tombol radio bisa sulit. Mari kita mulai dengan cara sederhana:
input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
}Ini membuat checkbox dan tombol radio sedikit lebih besar dan mudah diklik. Itu seperti memberikan mereka pertumbuhan!
Borang CSS - Tata Letak Borang
Sekarang, mari kita susun elemen borang kita:
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}Ini mensentral borang kita dan menempatkan setiap label di baris sendiri. Itu seperti membersihkan kamar Anda - semua halamanpunya tempatnya!
Contoh
Mari kita gabungkan semuanya:
<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Kirim</button>
</form>form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}Ini membuat borang sederhana yang diatur. Itu seperti menggabungkan teka-teki - semua bagian cocok sempurna!
Borang CSS - Box-sizing
Ini adalah tip ahli: gunakan box-sizing: border-box untuk membuat hidup Anda mudah:
* {
box-sizing: border-box;
}Ini memastikan bahwa padding dan bendera termasuk dalam lebar dan tinggi keseluruhan elemen. Itu seperti magis - tidak ada overflow yang tak terduga lagi!
Borang CSS - Fieldset dan Legend
Fieldset dan legend dapat membantu mengatur borang Anda:
fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}Ini membuat bendera yang indah di sekitar elemen borang yang terkait dengan judul. Itu seperti membuat bab dalam cerita borang Anda!
Borang CSS - Input Lebar Penuh
kadang-kadang, Anda ingin input Anda mengisi semua ruang yang tersedia:
input[type="text"] {
width: 100%;
}Ini membuat input Anda melipat ganda untuk mengisi wadahnya. Itu seperti memberikan input Anda geser besar!
Borang CSS - Input Berwarna
Mari kita tambahkan sedikit warna ke input kita:
input[type="text"] {
background-color: #e6f3ff;
color: #00366d;
}Ini memberikan input Anda latar belakang biru muda dengan teks biru tua. Itu seperti menggambar borang Anda dengan skema warna yang menarik!
Borang CSS - Gambar Dalam Input
Anda bahkan dapat menambahkan gambar ke input Anda:
input[type="text"] {
background-image: url('search-icon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}Ini menambahkan ikon pencarian di sebelah kiri input. Itu seperti memberikan input Anda avatar kecil!
Borang CSS - Input Dengan Animasi
Mari kita tambahkan sedikit gerakan ke input kita:
input[type="text"] {
transition: all 0.3s ease-in-out;
}
input[type="text"]:focus {
transform: scale(1.05);
}Ini membuat input sedikit lebih besar saat difokuskan. Itu seperti memberikan input Anda gerakan tari!
Borang CSS - Penataan Textarea
Jangan lupa tentang textarea:
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
}Ini menata textarea dan memungkinkan perubahan vertikal. Itu seperti memberikan pengguna Anda buku catatan yang elastis!
Borang CSS - Penataan Menu Tarik
Menu tarik juga memerlukan cinta:
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}Ini membuat menu tarik yang rapi. Itu seperti memberikan pengguna Anda mesin vending untuk opsi!
Tata Letak Borang Responsif
Akhirnya, mari kita membuat borang kita responsif:
@media screen and (max-width: 600px) {
form {
width: 100%;
}
}Ini membuat borang full-width di layar kecil. Itu seperti memberikan borang Anda kekuatan berubah bentuk!
Dan itu saja! Anda telah belajar bagaimana menata borang dengan CSS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba gaya ini. Selamat coding!
Credits: Image by storyset