Cara-Membuat-Kotak-Pencarian-dengan-HTML-CSS-Nyekrip

Cara Membuat Kotak Pencarian/Search dengan HTML CSS. Dalam kesempatan kali ini nyekrip akan berbagi tutorial cara membuat kotak pencarian atau search box dengan CSS dan HTML, sebagai informasi bahwa Kotak pencarian atau Search Box adalah salah satu elemen UI yang paling penting pada halaman web. Banyak sekali manfaat yang akan didapatkan dengan memiliki kotak pencarian, siapa pun saat ini sudah sangat familiar dengan fitur kotak pencarian dan sudah pasti akrab dengan Google sebagai mesin pencari pada umumnya.

Sebuah kotak pencarian pada halaman web melakukan fungsi yang sama dengan Google yang memungkinkan pengguna untuk menemukan konten yang spesifik di website kita. Memiliki Search Box adalah kebutuhan mutlak bagi kebanyakan website dan diperlukan untuk meningkatkan kenyamanan para pengguna website.

Dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang cantik dengan bantuan CSS (Cascading Style Sheets). CSS yang akan dipakai memiliki kerumitan tingkat menengah, sehingga memerlukan beberapa pemahaman dasar CSS, jadi diharapkan anda memahami dasar CSS terlebih dahulu sebelum meneruskan tutorial ini.

Sebagai informasi, hasil akhir dari tutorial ini akan tampak seperti gambar berikut, anda juga bisa langsung test hasil skrip dengan klik tombol “Run Skrip”. Setelah anda klik tombol “Run Skrip”, anda akan diarahkan pada halaman Nyekrip Yuk. Pada halaman  Nyekrip Yuk anda bisa test skrip secara online juga bisa sekaligus download.

Hasil_Akhir_Cara_Membuat_Kotak_Pencarian_Search_HTML_CSS_Nyekrip

Hasil Akhir

Cara Membuat Search Box: Membuat HTML

Dalam contoh ini, kita akan membuat kotak pencarian sederhana yang memerlukan input teks dan termasuk tombol pencarian di sebelah kanan. Meskipun cukup dasar, kotak pencarian ini dapat dengan mudah di-modifikasi agar sesuai dengan website yang berbeda.

Sebelum kita dapat membuat CSS, kita perlu membangun HTML. Kita akan menggunakan skrip struktur umum HTML sebagai tempat skrip kotak pencarian. Jika anda belum mengetahui apa itu skrip struktur umum HTML, anda bisa mengunjungi tutorial “Pengenalan HTML: Struktur Umum Part 1”. Berikut adalah skrip HTML awal.

Kita hapus semua skrip yang berada dalam tag body dan kita ganti dengan skrip berikut:

Disarankan untuk mengetik kode/skrip daripada paste langsung; dengan begitu kita jadi lebih terbiasa untuk memahami isi skrip. Selesai mengetik, simpan dokumen dan buka di browser. Sehingga dalam browser akan tampil seperti gambar berikut:

Hasil_Awal_Cara_Membuat_Kotak_Pencarian_Search_HTML_CSS_Nyekrip

Hasil Awal Sebelum CSS

Sampai disini kita sudah menciptakan bentuk sederhana dari search box dengan kolom teks dan tombol submit sebelah-nya. Sebelum meneruskan pada pembuatan CSS, mari kita bahas dulu skrip diatas:

placeholder: ini adalah teks yang muncul di kolom pencarian sebelum kita memasukkan masukan apapun. Dalam value dari atribut placeholder ini, kita dapat mengubahnya ke teks apapun sesuka kita.

required: Ini memberitahu browser bahwa kotak pencarian memerlukan beberapa masukan agar form bisa bekerja.

Cara membuat kotak pencarian: Menambahkan CSS

Sebenarnya kita sudah selesai dalam membuat kotak pencarian, Cuma sangat sederhana dan terkesan sangat membosankan. Supaya terlihat lebih cantik, kita akan menambahkan kode CSS untuk memberikan tampilan yang lebih baik.

Silahkan anda kembali ke Notepad dan ketik-kan skrip dibawah ini tepat dibawah meta tag title:

Setelah itu refresh halaman web anda, maka tampilan halaman web akan tampil seperti gambar berikut ini:

setelah_css_Cara_Membuat_Kotak_Pencarian_Search_HTML_CSS_Nyekrip

Setelah Penerapan CSS awal

Bagaimana hasilnya? Lebih cantik kan?! Mengubah warna dari elemen form bisa dibilang cukup mudah dengan menerapkan beberapa tweak CSS.

Mari kita membahas CSS secara lebih rinci:

Skrip diatas befungsi untuk menginstruksikan browser untuk mengatur lebar dari form menjadi 500px dan mengatur margin atas dan bawah selebar 50px. 'auto' di sini berarti bahwa kiri / kanan margin diatur secara otomatis.

Skrip ini digunakan untuk style kotak pencarian yang memiliki class .search. Kita telah menentukan padding atas / bawah 8px dan padding kiri / kanan 15px.

Kita juga telah menentukan warna latar belakang menggunakan nilai RGBA, di mana tiga nilai pertama mengacu pada warna RGB (Red, Green, Blue), dan yang terakhir (‘A’) nilai ini mengacu pada transparansi. Semakin rendah nilai transparansi, akan tampak lebih transparan elemen tersebut.

Contohnya nilai RGB (84, 188, 132) sesuai dengan nilai warna hex #54bc84.

RGB_Cara_Membuat_Kotak_Pencarian_Search_HTML_CSS_Nyekrip

Contoh Value RGB

Kita juga telah menentukan border selebar 0px. Kenapa kok nilainya 0? Dilakukan hanya sebagai tindakan pencegahan untuk memastikan bahwa browser versi lama tidak akan memberikan border secara default.

Skrip diatas merupakan styling untuk tombol pencarian. Beberapa hal yang perlu diperhatikan di sini:

position: relative – Tombol pencarian, secara default, ditempatkan di sebelah kanan kotak pencarian dengan margin beberapa piksel antara elemen-elemen. Karena kita ingin tombol berada tepat di sebelah kotak pencarian, maka kita mengaturnya dengan posisi relatif.

left: -8px – Karena elemen sekarang memiliki posisi relatif, kita bisa menggeser ke kiri dengan memberikan posisi negatif.

padding: 6px 15px – Bagian atas atau bawah padding pada bagian tombol kurang lebar, maka kita setting padding agar lebar dari tombol sama seperti lebar pada form.

Untuk skrip diatas berfungsi untuk mengatur warna button ketika disorot dengan mouse.

Sejauh ini, kita telah membuat kotak pencarian standar yang dapat digunakan pada sebagian besar situs web dengan tambahan beberapa tweak. Tapi bagaimana jika ingin menambahkan sedikit lebih style ke kotak pencarian? Untungnya, kita dapat menggunakan CSS lagi untuk membuat lebih elegan, karena CSS tidak hanya terbatas pada perubahan warna dan menambahkan border.

Membuat Kotak Pencarian: Mengubah Placeholder

Usaha mengubah format teks placeholder dari kotak pencarian akan sedikit lebih rumit. Browser yang berbeda akan menangani teks placeholder secara berbeda pula. Oleh karena itu, setiap perubahan pada elemen membutuhkan pengaturan yang berbeda untuk masing-masing browser.

Di bawah ini, kita akan mengubah warna teks placeholder ke warna merah dan font di-setting ke Helvetica Neue.

Setelah kita mengetik-kan skrip diatas dalam tag style, maka kotak pencarian kita akan tampak seperti gambar seperti ini:

Hasil_Akhir_Cara_Membuat_Kotak_Pencarian_Search_HTML_CSS_Nyekrip

Hasil Akhir

Berikut ini adalah Source Code atau Skrip Akhir:

Perlu diingat bahwa skrip ini bekerja hanya untuk browser terbaru, jadi perlu setting tambahan pada CSS agar kotak pencarian kita bisa bekerja pada semua browser dan teknik penggunaan CSS diatas menggunakan teknik embedded style/Internal Styles. Untuk menggunakan teknik CSS yang lain, anda bisa mengunjungi artikel “Tips Cara menggunakan CSS pada HTML

Sekian tutorial cara membuat Kotak Pencarian atau Search Box dengan HTML dan CSS, sebenarnya style diatas masih terbilang standar. Kita bisa menambahkan indikator panah ke arah kiri untuk tombol pencarian, selain memberikan gaya yang elegan juga baik untuk “UX” (User Experience), dengan seperti itu akan membuat tombol pencarian lebih menarik sehingga bisa lebih mengarahkan pengguna ke arah kotak pencarian.

Happy Nyekrip!

About The Author

Comments

  1. oyee

    gan, search box itu apakah langsung bisa digunakan? maksudnya apakah langsung bisa mencari yg diketikan tanpa perlu di hyperlink kan?

    1. Admin Article Author

      Artikel yang di share disini hanyalah sebatas membuat form dengan html dan css, jika ingin digunakan di web atau blog harus disesuaikan dengan query untuk loading database konten. 🙂

      1. momo

        min, kalo cara connecting ke database nya gimana??
        kurang lebih cara menghububgkannya dengan internet agar bisa digunakan

    1. Admin Article Author

      harus disesuaikan dahulu dengan query blogger, dalam tutorial ini belum sampai ke pengaturan query 🙂

  2. bakulanmobil

    yang di cari pembaca itu rata2 bagaimana memfungsikannya, script yang dipakai untuk memfungkikannya itu bagaimana? masa website dipasang form pencarian tapi di klik ga menghasilkan result apapun. mohon dilanjutkan dengan script untuk memfungsikannya agar bisa diaplikasikan di website/blog kami. trims

    1. Admin Article Author

      disini sudah jelas bahwa tutorial membahas cara membuat kotak pencarian yang melibatkan html dan css, kalau anda lebih teliti css dan html tidak akan bisa menghasilkan result, karena akan lebih kearah design aja. mohon untuk lebih teliti dalam membaca judul. 🙂 supaya tidak kecewa.

  3. Rizal

    wah ini nih yang saya cari, min ada tutor biar bisa dipake nya ngga ?
    katanya kan mesti di sesuaikan sama query, nah saya bingung gmn nyesuainnya

    makasih

    1. Admin Article Author

      sebentar ya. lagi sibuk di dunia offline, untuk work di web harus disesuaikan dengan platform webnya.. nanti akan saya buat untuk blogger dan wordpress.. 🙂

  4. guntur

    saya kan sudah membuat website dan sudah memasang form pencarian pada website saya. tapi pada saat saya mencoba mencari di form pencarian, kok tidak ada file yang bisa dicari???

    1. Admin Article Author

      tinggal di bungkus dengan div dan css center

      test tengah

  5. Hyokun

    ko pas ane masukin css jadi ketengah padahal sudah di atur cssnya tetap sama saja mohon pencerahannya
    satu lagi biar kolom pencariaanya jadi panjang gimana?

  6. Rian Firdaus

    Admin,tolong dong..
    Di web saya kotak search nya ga berfungsi.
    Salahnya dimana ya?
    Setiap nulis sesuatu dan search,pasti ga berfungsi hasilnya.
    Mohon pencerahannya..
    Terima kasih

  7. Angga Hidayat

    Gan saya mau nanya, saya kan sudah memakai sebuah theme dari wordpress{dot}org.. lalu saya ingin mengedit kolom search seperti tutorialnya.. nah membuat warna nya itu bagaimana ya ? Tampilannya seperti ini terus Berikut ss nya : hxxp://prntscr.com/d0cwgn

    Dan berikut ss script nya dalam cpanel : hxxp://prntscr.com/d0cwm3

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *