ID (Indonesia) Translation
CSS - Forms: Panduan Komprehensif untuk Pemula
Hai teman-teman desainer web yang bersemangat! Hari ini, kita akan masuk ke dunia yang menarik dari formulir CSS. Seperti teman sekitar komputer yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, pada akhir panduan ini, Anda akan bisa menggaya formulir seperti seorang pro!
Gaya CSS Form - Font dan gaya teks
Mari kita mulai dari dasar. Seperti cara kita memakai pakaian untuk berbagai kesempatan, kita juga bisa menggaya elemen formulir kita dengan berbagai jenis font dan gaya teks. Berikut adalah cara nya:
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 menjadi 16 piksel, dan membuat warna teks menjadi abu-abu tua (#333). Itu seperti memberikan formulir Anda pakaian yang nyaman dan mudah dibaca!
Gaya CSS Form - Bingkai dan Latar Belakang
Berikutnya, mari kita tambahkan beberapa gaya ke formulir kita dengan bingkai dan latar belakang:
input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}Kode ini memberikan input teks bingkai hijau, sudut yang sedikit bundar, dan latar belakang abu-abu terang. Itu seperti memberikan elemen formulir Anda kerangka yang indah!
Gaya CSS Form - Padding dan Margin
Sekarang, mari kita memberikan ruang nafas bagi elemen formulir kita:
input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}Ini menambahkan ruang di dalam input (padding) dan di bawahnya (margin). Itu seperti memberikan elemen formulir Anda gelembung personal!
Gaya CSS Form - gaya Fokus
Ketika pengguna mengklik input, kita ingin menyorotnya. Berikut adalah cara nya:
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}Ini menghapus garis bingkai default dan menambahkan cahaya biru lembut saat input ditekan. Itu seperti mengatakan "Hey, lihat saya!" kepada pengguna.
Gaya CSS Form - gaya Tombol
Tombol adalah pahlawan aksi formulir 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 lebih gelap saat diarahkan kursor. Itu seperti memberikan tombol Anda kostum pahlawan super!
Gaya CSS Form - gaya Checkbox dan Tombol Radio
Menggaya checkbox dan tombol radio bisa sulit. Berikut adalah cara sederhana untuk mulai:
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!
Gaya CSS Form - Tata Letak Formulir
Sekarang, mari kitaatur elemen formulir kita:
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}Ini memusatkan formulir kita dan menempatkan setiap label di baris sendiri. Itu seperti membersihkan kamar Anda - semua hal memiliki 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 formulir sederhana yang diberikan gaya. Itu seperti menggabungkan puzzle - semua bagian cocok sempurna!
Gaya CSS Form - Box-sizing
Berikut adalah tips pro: gunakan box-sizing: border-box untuk membuat hidup Anda lebih mudah:
* {
box-sizing: border-box;
}Ini memastikan bahwa padding dan border termasuk dalam lebar dan tinggi total elemen. Itu seperti magis - tidak ada overflow yang tak terduga lagi!
Gaya CSS Form - Fieldset dan Legend
Fieldset dan legend bisa membantu mengatur formulir Anda:
fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}Ini membuat bingkai yang indah di sekitar elemen formulir yang terkait dengan judul. Itu seperti membuat bab dalam cerita formulir Anda!
Gaya CSS Form - 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 perpanjangan besar!
Gaya CSS Form - Input Berwarna
Mari kita menambahkan 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 membuang formulir Anda dengan skema warna yang menarik!
Gaya CSS Form - Gambar Dalam Input
Anda bahkan bisa 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!
Gaya CSS Form - Input Dengan Animate
Mari kita menambahkan 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 besar saat ditekan. Itu seperti memberikan input Anda gerakan dans!
Gaya CSS Form - gaya 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 menggaya textarea dan memungkinkan perubahan tinggi vertikal. Itu seperti memberikan pengguna Anda buku catatan yang elastis!
Gaya CSS Form - gaya Dropdown Menu
Menu dropdown juga memerlukan cinta:
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}Ini membuat menu dropdown yang indah dan bersih. Itu seperti memberikan pengguna Anda mesin penjual yang ramping untuk opsi!
Tata Letak Formulir Responsif
Akhirnya, mari kita membuat formulir kita responsif:
@media screen and (max-width: 600px) {
form {
width: 100%;
}
}Ini membuat formulir kita lebar penuh pada layar yang lebih kecil. Itu seperti memberikan formulir Anda superpower berubah bentuk!
Dan itu dia! Anda baru saja belajar bagaimana menggaya formulir dengan CSS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba gaya ini. Selamat coding!
Credits: Image by storyset