Home-theater-designers
CSS termasuk dalam kelas bahasa yang unik, yang dikenal sebagai bahasa style sheet. Ini terutama digunakan untuk menentukan presentasi halaman web Anda. Meskipun HTML memungkinkan Anda menentukan bagaimana halaman Anda harus terstruktur, CSS-lah yang digunakan untuk menatanya. Jika tidak, Anda akan berakhir dengan situs web yang tidak menarik.
Berfokus pada CSS adalah salah satu cara yang lebih baik untuk meningkatkan daya tarik situs web Anda, terutama dalam hal meningkatkan pengalaman pengguna Anda. Dengan cara ini, Anda juga dapat meningkatkan lalu lintas Anda. Sebagai permulaan, Anda dapat menggunakan formulir bertumpuk.
Apa itu Formulir Bertumpuk?
Formulir bertumpuk memungkinkan Anda membuat formulir khusus tempat Anda dapat menempatkan label dan input di atas satu sama lain, daripada menempatkannya dalam pola horizontal.
Inilah cara Anda dapat melakukannya.
Kode HTML
Gunakan elemen HTML, , untuk memproses informasi Anda. Tambahkan label untuk bidang yang relevan dan tetapkan bidang masukan yang relevan. Dalam contoh ini, kami meminta pengguna untuk memberikan nama lengkap dan alamat email mereka dengan jenis input formulir teks , sedangkan menu tarik-turun dibuat melalui pilih identitas untuk membantu mereka memilih industri mereka.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Namun, menjalankan bagian kode ini hanya akan menghasilkan bentuk hambar tanpa menumpuk bidang secara vertikal. Dan di situlah Anda harus menambahkan CSS.
apa obat itu sendiri sakit?
Kode Bagian CSS
Sekarang, buat style sheet terpisah dan tambahkan ke HTML Anda sebelum tag body:
Selanjutnya, pilih badan HTML Anda, jenis input, dan wadah dan gaya mereka melalui CSS. Ini akan mencakup percobaan dengan properti CSS yang berbeda , seperti font-family, width, padding, margin, display, border, dll, dan menambahkan nilai pilihan Anda. Dengan cara ini, Anda akan mendapatkan formulir bertumpuk yang sesuai dengan preferensi Anda. Berikut adalah contoh.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Periksa output di bawah ini.
Sekarang Anda Dapat Membuat Formulir Bertumpuk Di CSS
Dengan artikel ini, Anda telah mempelajari cara membuat formulir bertumpuk di CSS. Dengan latihan, Anda akan dapat memperbaiki formulir Anda dan membuat situs web Anda lebih ramah pengguna.
berapa lama waktu yang dibutuhkan untuk menguasai sesuatu
Nama permainan pemrogramannya adalah 'latihan'. Asah keterampilan CSS Anda hari demi hari dengan proyek pameran untuk menjadi perancang web yang bergaya dan pengembang web yang lebih efisien.
Membagikan Membagikan Menciak Surel 10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 MenitButuh bantuan dengan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- Pengembangan web
- CSS
Usman adalah seorang content marketer yang telah membantu beberapa bisnis dengan pertumbuhan organik di platform digital. Dia menyukai pemrograman dan menulis, yang berarti bahwa penulisan teknis adalah sesuatu yang sangat dia sukai. Saat tidak bekerja, Usman menikmati menghabiskan waktu menonton acara TV, mengikuti kriket, dan membaca tentang analisis data.
More From Usman GhaniBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan