Kotak telusur di laman web menjalankan fungsi yang sama seperti Google yang memungkinkan pengguna menemukan konten tertentu di situs web kami. Memiliki Kotak Pencarian merupakan kebutuhan mutlak bagi sebagian besar website dan dibutuhkan untuk meningkatkan kenyamanan pengguna website
Dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang indah dengan bantuan CSS (Cascading Style Sheets). CSS yang akan digunakan memiliki tingkat kerumitan menengah, sehingga diperlukan beberapa pemahaman dasar tentang CSS, sehingga diharapkan Anda memahami dasar-dasar CSS terlebih dahulu sebelum melanjutkan tutorial ini.
Sebagai informasi, hasil akhir dari tutorial ini akan terlihat seperti gambar berikut ini, Anda juga bisa langsung menguji hasil scriptnya dengan mengklik tombol "Run Script". Setelah Anda mengklik tombol "Run Script", Anda akan diarahkan ke halaman Nyekrip Yuk. Di halaman Nyekrip Yuk Anda bisa menguji skrip secara online dan sekaligus mengunduhnya
Hasil Akhir
Jalankan Skrip
Cara membuat kotak pencarian. Buat HTML
Dalam contoh ini, kami akan membuat kotak pencarian sederhana yang memerlukan input teks dan menyertakan tombol pencarian di sebelah kanan. Meskipun cukup mendasar, kotak telusur ini dapat dengan mudah dimodifikasi agar sesuai dengan situs web yang berbeda
Sebelum kita dapat membuat CSS, kita perlu membuat HTML. Kami akan menggunakan skrip struktur umum HTML sebagai pengganti skrip kotak pencarian. Jika Anda belum mengetahui apa itu skrip struktur umum HTML, Anda dapat mengunjungi tutorial "Pengantar HTML. Struktur Umum Bagian 1”. Berikut adalah skrip HTML awal
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> </head> <body> <div>Ini adalah div</div> <span>Ini adalah span</span> </body> </html>Kami menghapus semua skrip di tag tubuh dan menggantinya dengan skrip berikut
<form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>_Disarankan untuk mengetik kode/skrip dari tempel langsung; . Setelah mengetik, simpan dokumen dan buka di browser. Hingga pada browser akan muncul seperti gambar berikut
Hasil Awal Sebelum CSS
Sampai di sini kita telah membuat bentuk sederhana dari kotak pencarian dengan kolom teks dan tombol kirim di sebelahnya. Sebelum lanjut ke pembuatan CSS, mari kita bahas terlebih dahulu script diatas
placeholder. ini adalah teks yang muncul di kolom pencarian sebelum kita memasukkan input apa pun. Pada nilai atribut placeholder ini, kita bisa mengubahnya menjadi teks apapun yang kita suka
<form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>_1. Ini memberi tahu browser bahwa kotak telusur memerlukan beberapa input agar <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>2 berfungsi
Cara membuat kotak pencarian. Menambahkan CSS
Sebenarnya kita sudah selesai membuat kotak pencarian, hanya saja sangat sederhana dan terkesan sangat membosankan. Agar terlihat lebih cantik, kita akan menambahkan kode CSS untuk memberikan tampilan yang lebih baik
Silakan kembali ke Notepad dan ketik script di bawah ini tepat di bawah <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>3
form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }Setelah itu refresh halaman web anda, maka akan muncul tampilan halaman web seperti gambar berikut
Setelah Implementasi CSS awal
Bagaimana hasilnya? . Mengubah warna dari <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>_4 relatif mudah dengan menerapkan beberapa tweak CSS
Mari kita bahas CSS lebih detail
Skrip di atas berfungsi menginstruksikan browser untuk mengatur lebar formulir menjadi <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>5 dan mengatur <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>6 atas dan bawah menjadi <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>7. <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>8 disini artinya margin kiri/kanan diatur secara otomatis
.search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; }Skrip ini digunakan untuk mendesain kotak telusur yang memiliki <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form>9. Kami telah menentukan padding atas / bawah form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }0 dan padding kiri / kanan form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }1
Kami juga telah menentukan warna latar belakang menggunakan nilai RGBA, di mana tiga nilai pertama mengacu pada warna RGB (Merah, Hijau, Biru), dan nilai terakhir ('A') mengacu pada transparansi. Semakin rendah nilai transparansi, elemen tersebut akan semakin transparan
Misalnya nilai RGB (84, 188, 132) sesuai dengan nilai warna hex form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }2
Contoh Nilai RGB
Kami juga telah menentukan perbatasan selebar form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }3. Mengapa nilainya 0?
.button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; }Skrip di atas adalah gaya untuk tombol pencarian. Beberapa hal yang perlu diperhatikan di sini
form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }4 – Tombol pencarian, secara default, ditempatkan di sebelah kanan kotak pencarian dengan margin beberapa piksel antar elemen. Karena kami ingin tombol berada tepat di sebelah kotak pencarian, kami mengaturnya dengan posisi relatif
form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }5 – Karena elemen sekarang memiliki posisi relatif, kita dapat menggesernya ke kiri dengan memberikan posisi negatif
form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }6 – Padding bagian atas atau bawah pada bagian button kurang lebar, jadi padding kita atur agar lebar button sama dengan lebar form
Untuk script di atas berfungsi untuk mengatur warna tombol saat disorot dengan mouse
Sejauh ini, kami telah membuat kotak telusur standar yang dapat digunakan di sebagian besar situs web dengan tambahan beberapa penyesuaian. Tetapi bagaimana jika Anda ingin menambahkan sedikit gaya ke kotak telusur?
Buat Kotak Pencarian. Mengubah Placeholder
Upaya mengubah format teks placeholder dari kotak pencarian akan sedikit lebih rumit. Browser yang berbeda akan menangani teks placeholder secara berbeda. Oleh karena itu, setiap perubahan elemen memerlukan pengaturan yang berbeda untuk setiap browser
Di bawah ini, kami akan mengubah warna teks placeholder menjadi merah dan font diatur ke Helvetica Neue
::-webkit-input-placeholder { /* For WebKit browsers */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } :-moz-placeholder { /* For Mozilla Firefox 4 to 18 */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } ::-moz-placeholder { /* For Mozilla Firefox 19+ */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } :-ms-input-placeholder { /* For Internet Explorer 10+ */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; }Setelah kita mengetikkan script diatas pada form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }_7, maka kotak pencarian kita akan terlihat seperti gambar ini
Hasil Akhir
Berikut Source Code atau Script Akhir
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> <style type="text/css"> form { width:500px; margin:50px auto; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #53bd84; background-color:#53bd84; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; } ::-webkit-input-placeholder { /* For WebKit browsers */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } :-moz-placeholder { /* For Mozilla Firefox 4 to 18 */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } ::-moz-placeholder { /* For Mozilla Firefox 19+ */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } :-ms-input-placeholder { /* For Internet Explorer 10+ */ color: #dd3333; font-family:Helvetica Neue; font-weight:bold; } </style> </head> <body> <form> <input class="search" type="text" placeholder="Cari..." required> <input class="button" type="button" value="Cari"> </form> </body> </html>Perlu diingat bahwa script ini hanya bekerja untuk browser terbaru, sehingga diperlukan pengaturan tambahan pada CSS agar kotak pencarian kita dapat bekerja pada semua browser dan teknik penggunaan CSS di atas menggunakan teknik embedded style/Internal Styles. Untuk menggunakan teknik CSS lainnya, Anda bisa mengunjungi artikel "Tips Cara Menggunakan CSS Pada HTML"
Sekian tutorial cara membuat Search Box atau Kotak Pencarian dengan HTML dan CSS, sebenarnya style diatas masih tergolong standar. Kita bisa menambahkan indikator panah di sebelah kiri untuk tombol pencarian, selain memberikan gaya yang elegan juga bagus untuk "UX" (User Experience), dengan cara ini akan membuat tombol pencarian lebih menarik sehingga bisa mengarahkan pengguna menuju kotak pencarian