Cara Membuat Search Box dengan HTML & CSS

Posted by Unknown on 06.35 with 2 comments
LanNetworking – Pada kesempatan kali ini, saya akan berbagai tips dan trik mengenai cara membuat search box dengan HTML & CSS yang sangat sederhana sekali. Seperti yang kita ketahui, search box atau kotak pencarian salah satu elemen alam website yang cukup penting, memilik fungsi yang hampir sama seperti search engine, yaitu untuk mencari kata kunci atau konten yang spesifik yang ada pada website kita.








Membuat Search Box Dengan HTML 
     Dibawah ini adalah skrip HTML untuk membuat sebuah kotak pencarian, disini kita memanfaatkan tag <form> yang didalamnya terdapat beberapa input untuk membuat sebuah kotak pencarian dan tombol tentunya. Namun seperti biasa, kita buat terlebih dahulu skrip struktur dasar HTML yang wajib disematkan pada disetiap dokumen HTML. berikut kodenya :

<!DOCTYPE html>
<html>   
<head>         
<title>Cara membuat Search Box Dengan HTML dan CSS</title>         <meta charset="utf-8">   
</head>     
<body>.....</body></html>



Setelah struktur dasar html sudah dibuat, masukan skrip berikut ini diarea 

<body>...</body> :<form>     
<input class="search" type="search"                 placeholder="Search..."><input class="button" type="submit" value="Search">
</form>

Kode selengkapnya akan menjadi seperti ini :

<!DOCTYPE html>
<html>   
<head>         
<title>Cara membuat Search Box Dengan HTML dan CSS</title>          <meta charset="utf-8">     
</head>     
<body>         
<form>               
<input class="search" type="search" placeholder="Search...">               
<input class="button" type="submit" value="Search">       
</form>     
</body>
</html> 

Setelah kita mengetik kode tersebut, seperti biasa, lalu simpan dokumen tersebut dengan format .html. Maka kita pun sudah membuat sebuah kotak pencarian atau search box pada web browser.


     Ini adalah bentuk sederhana dari kotak pencarian/search box dan belum terlihat menarik, maka dari itu kita akan menyematkan sentuhan CSS untuk membuat search box lebih menarik, namun sebelum itu mari kita bahas sedikit mengenai kode HTML diatas :

<input class="search" type="text" placeholder="Search..."><input class="button" type="submit" value="Search">



  • Atribut Type yang dipadukan dengan value search ( type="search" ) ini adalah input text untuk membuat kotak pencarian.
  • Atribut placeholder berfungsi untuk menambahkan teks pada kotak pencarian, pada kasus ini kita tambahkan teks “Search…”. Value ini bisa anda ganti seusai dengan keinginan.
  • Artibut dan value type="submit" adalah inputan untuk membuat tombol.
  • Artibut value yang kita isi dengan nilai “Search” adalah untuk menambahkan teks pada tombol, nilai ini bisa anda ganti sesuka hati.



Mempercantik Search Box Dengan CSS 
Oke, jika kalian sudah selesai membuat tampilan kotak pencarian standar dengan HTML, kini kita lanjutkan dengan memberikan sentuhan kode CSS untuk membuat kotak pencarian menjadi lebih menarik. Silahkan buka kembali Notepad anda dan masukan kode CSS berikut ini pada bagian <head>...</head> atau tepatnya dibawah tag  <meta charset="utf-8">.

<style>
form {width:500px;margin:50px auto;}.search {          padding:8px 15px; background: #f0f8ff; border:2px solid #008080;}.button {position:relative;left:-4px;          padding:10px 15px; border:0px solid #008080;          background-color: #6B8E23; color:#fafafa;font-weight:bold;}.button:hover {background: #008080;          color:#fafafa;}.button:active {background:#9ACD32;}
</style>


Setelah kode CSS tersebut dimasukan, silahkan refresh halaman browser anda dan lihat lah hasilnya, kini search box terlihat lebih menarik dan bewarna, bukan?



Selanjutnya mari kita bahas lebih rinci mengenai kode CSS tersebut :

form {width:500px; margin:50px auto;}


Kode diatas berfungsi untuk mengatur tag <form>, dalam hal ini kita mengatur lebar form menjadi 500px dan mengatur margin atas menjadi 50px, sedangkan untuk auto menandakan bahwa bagian bawah kiri dan kanan diatur secara otomatis.

.search {padding:8px 15px; background:#f0f8ff;     border:2px solid #008080;}

Pada skrip diatas, berfungsi untuk mengatur kotak pencarian yang pada kasus ini memiliki class .search :
  • Kita mengatur padding atas dan bawah menjadi 8px, lalu mengatur padding kanan dan kiri menjadi 15px.
  • Kita juga memberikan warna pada background dengan warna AliceBlue yang kita atur dengan kode warna #F0F8FF.
  • Terakhir kita menambahkan border setebal 2px dengan sentuhan warna Gray yang memiliki kode warna #808080.

.button {position:relative;left:-4px; padding:10px 15px;     border:0px solid #008080; background-color:#6b8e23;     color:#fafafa; font-weight:bold;}


Selanjutnya pada kode diatas tersebut memiliki fungsi untuk mengatur tampilan tombol yang memiliki class .button :


  • position:relative; , secara default, tombol search akan berada disamping kota pencarian, namun letak tombol akan sedikit renggang/menjauh kesamping kanan dari kotak pencarian. Maka dari itu kita atur posisinya menjadi relatif.
  • left:-4px; , kini elemen tombol memiliki posisi relatif dan kita pun bisa menggesernya sesuka hati, disini kita menggesernya kekiri agar posisi tombol lebih rapat dengan kotak pencarian, maka dari itu kita beri nilai negatif.
  • Lalu kita menambahkan pula border , nah lho, kok nilainya 0px? hal ini berfungsi agar mencegah browser tidak memberikan border secara default. (mungkin biar lebih paham kalian bisa coba-coba sendiri dengan menghapus bagian border ini, dan lihat apa yang terjadi).
  • background-color:#6b8e23; digunakan untuk memberi warna pada backgroun, kalian bisa memberi warna sesuka hati. Untuk kode warna kalian bisa melihatnya di https://id.wikipedia.org/wiki/Warna_web.
  • color:#fafafa; untuk memberi warna pada teks “Search”
  • font-weight:bold; untuk memberi efek bold/menebalkan teks.


.button:hover {background: #008080;     color:#fafafa;}.button:active { background:#9ACD32;}


  • .button:hover , berfungsi untuk merubah warna background tombol dan warna teks pada tombol ketika disorot oleh mouse
  • .button:active , berfungsi untuk merubah warna background tombol ketika diklik oleh mouse.


Berikut ini adalah hasil akhir dari kode-kode HTML dan CSS tersebut.

<!DOCTYPE html>
<html>     
<head>         
<title>Cara membuat Search Box Dengan HTML dan CSS</title>          <meta charset="utf-8"><style> form {width:500px; margin:50px auto;}.search {padding:8px 15px;  background: #f0f8ff; border:2px solid #008080;              } 
.button {position:relative; left:-4px; padding:10px 15px;   border:0px solid #008080; background-color: #6B8E23; color:#fafafa; font-weight:bold;}              .button:hover {background: #008080;color:#fafafa;}          .button:active {background:#9ACD32;}         
</style>     
</head>   
 <body>         
<form> 
<input class="search" type="search" placeholder="Search...">               
<input class="button" type="submit" value="Search">        </form>      </body>
</html>


Sekian tutorial cara membuat search box dengan HTML & CSS, semoga bisa menambah pengetahuan temen-temen. Namun kotak pencarian yang saya share kali ini sebenarnya sangat sederhana sekali, karena masih banyak sekali style kotak pencarian lainnya yang lebih elegan. Selamat ngoding.