Web Tutorial
Now Reading
Cara Membuat Kotak Pencarian Dengan HTML
0

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

<label for="search">Search</label>
<input type="search" type="text/css" placeholder="type anything...">

CSS

body{
  background-color: #21abb5;
  margin: 100px;
}
label{
  padding: 22px; /*Untuk ukuran kotak label agar terlihat besar atau luas*/
  background-color: #22b524;/*Membuat warna background menjadi hijau*/
  font-size: 36px;/*Ukuran huruf semakin besar*/
  color: #fff;/*warna huruf putih*/
  font-weight: 900;/*mempertebal huruf*/
  cursor: pointer;/*membuat pointer*/
  margin-right: -5px;/*membuat label dan input menyatu atau tidak ada jarak*/
}

label:hover{
  color: #fff; /*mengubah warna tombol search jika kursor di arahkan ke tombol tersebut*/
  background-color: #3a963b;/*hover ini jika kita mengarahkan kursor kelabel akan berubah warna hijau tua*/
}

input{
  padding: 22px;  /*Untuk ukuran kotak search agar terlihat besar atau luas*/
  font-size: 36px; /*Ukuran huruf semakin besar*/
  width: 800px;/*lebar kotak pencarian menjadi panjang */
  border: none;/*border itu seperti bingkai. Border di nol kan atau dihilangkan. Terserah keinginan kamu*/
  color: #4a4c4c;/*warna huruf ketika diketik abu-abu*/
  outline: none;/*Outline seperti border cuma perbedaannya hanya pada saat kita mengarahkan kursor kearah kotak search maka akan muncul seperti border, jadi disini outline dihilangkan*/
}

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.

What's your reaction?
Luar Biasa
0%
Suka Sekali
0%
Keren
100%
Kagum
0%
Jelek
0%
Tidak Suka
0%
About The Author
Isak Mandala

You must log in to post a comment