Cara Membuat Kotak Pencarian Dengan HTML

Cara Membuat Kotak Pencarian Dengan HTML

Kotak Pencarian adalah elemen penting yang pasti ada dalam sebuah website. Nah, sekarang Bier Pinter akan memberitahu bagaimana cara membuat kotak pencarian dengan html atau membuat search box dengan html.

Hampir setiap pengunjung webisite membutuhkan kotak pencarian, karena jika pengunjung ingin mencari konten di dalam website, Pengunjung tidak perlu membuka arsip website ataupun label satu persatu.  Pengunjung cukup dengan mengetikkan kata kunci yang ingin dicari dikotak pencarian. Cuma, kali ini kita hanya belajar cara mendesainnya saja.

Cara Membuat Search Box/Kotak Pencarian Dengan HTML CSS
Gambar 1.1 – Search Box

Koding Lengkap Kotak Pencarian

HTML

CSS

Placeholder adalah teks yang berada didalam kotak pencarian atau search box. Apabila kita arahkan kursor kedalam kotak pencarian maka tidak akan terjadi apa-apa pada teks tersebut. Tapi ketika kita mengetikan kata kunci didalam kotak tersebut teks akan menghilang. Kira-kira begitu penjelasan tentang placeholder.

Baca juga: Membuat Kotak Teks Pada Sebuah Form

Demikian tutorial cara membuat kotak pencarian dengan html kali ini. Semoga tutorial ini bermanfaat.