Contoh Kotak Pencarian CSS dengan HTML

sukma
sukma
2 minute read

Dalam tutorial ini, kita akan membuat 6 Contoh Kotak Pencarian CSS unik dengan HTML yang mudah digunakan. Anda akan menemukan kode formulir dan demo juga.

Semua contoh dikodekan dengan baik dan memiliki desain yang terlihat bagus. Anda dapat dengan mudah menerapkannya di situs web Anda dan juga dapat menyesuaikannya sesuai keinginan.

Formulir pencarian masukan adalah bagian penting dari situs web apa pun dan membuat situs web Anda ramah pengguna. Dengan menggunakan bilah pencarian, pengunjung situs dapat menavigasi situs dengan cepat dan mencari posting, halaman, dan artikel yang relevan di halaman web.

Namun, penting bahwa situs Anda harus memiliki kotak telusur bergaya yang menarik bagi pengguna. Ini akan membuat situs Anda terlihat lebih profesional.

Anda tahu pentingnya bidang pencarian, Ini diperlukan untuk setiap situs web sehingga pengguna dapat dengan cepat mencari konten yang mereka butuhkan. Ini memainkan peran penting dalam meningkatkan pengalaman pengguna.

Kita dapat mendefinisikan kotak pencarian sebagai komponen utama dari situs web manapun. Ini juga meningkatkan kegunaan di antara pengguna. Bilah pencarian adalah kebutuhan dasar untuk situs web yang memungkinkan pengguna situs menemukan topik tertentu dan menavigasi melalui situs web dengan mudah.

Komponen bidang teks pencarian sering ditempatkan di sebelah bilah navigasi. Namun, Anda dapat meletakkannya di sidebar atau area atas situs. Ini adalah keunggulan sudut pandang fungsionalitas, tetapi kami tidak dapat melupakan desain, tampilan, dan nuansanya.

Bagaimana Membuat Kotak Pencarian CSS dengan HTML

Mari kita lihat bagaimana tampilan markup HTML. kami telah menyatakan form tag dengan nama kelas light.

Karena kami telah menyertakan enam desain bilah Pencarian yang berbeda, jadi Anda hanya perlu menambahkan nama kelas masing-masing. Dalam kasus kami, saya menambahkan kelas "ringan" untuk membentuk elemen.

Di dalam form tag, kami telah menyertakan kolom input teks dan tombol pencarian. Berikut adalah contoh kode formulir HTML.

<form method="post" class="light">     <input type="text" placeholder="Find on codeconvey">     <input type="submit" value="Search"> </form>

Gaya CSS

Kami telah mengatur lebar formulir menjadi 328px yang dapat Anda tambah atau kurangi sesuai dengan kebutuhan Anda.

Untuk memberi gaya pada bidang masukan, kami hanya menambahkan beberapa gaya ke input[type="text"] sebuah elemen. Serupa, kami telah merancang tombol kirim dengan memasukkan CSS ke dalamnya input[type="submit"] elemen.

.light{ width:328px; } .light input[type="text"] { border: medium none; height: 45px; padding: 5px; width: 75%; float:left; } .light input[type="submit"] { background: none repeat scroll 0 0 #0CACE8; border: medium none; color: #FFFFFF; cursor: pointer; height: 45px; line-height:45px; padding: 5px; text-transform:uppercase; }

Ini semua penjelasan dasar. Anda dapat menemukan variasi yang berbeda di demo. Unduh dan nikmati.