Membuat Form Pencarian

Form pencarian

Tahap pertama membuat form pencarian adalah membuat kode HTML nya terlebih dahulu. Dibawah ini beberapa pilihan kode HTML form pencarian.

Form 1

Form dengan width: 100%

Form dengan width 20%; posisi tengah:

Kode HTML

<form class="search" action="/search/">

  <input type="text" placeholder="Cari.." name="search">

  <button type="submit"><i class="fa fa-search"></i></button>

</form>



<form class="search" action="/search/" style="margin:auto;max-width:300px">

  <input type="text" placeholder="Cari.." name="search2">

  <button type="submit"><i class="fa fa-search"></i></button>

</form>  

Kode CSS

form.search input[type=text] {

  padding: 10px;

  font-size: 17px;

  border: 1px solid grey;

  border-right:unset;

  float: left;

  width: 80%;

  background: #f1f1f1;

  border-top-left-radius:6px;

  border-bottom-left-radius:6px;

}



form.search button {

  float: left;

  width: 20%;

  padding: 10px;

  background: #333;

  color: white;

  font-size: 17px;

  border: 1px solid grey;

  border-left: none;

  cursor: pointer;

}



form.search button:hover {background: #ddd;color:#333}

form.search::after {

  content: "";

  clear: both;

  display: table;

}

Form Pencarian - Animasi (Animated search form)

Klik dalam kolom input pencarian dibawah ini untuk melihat efek animasinya.

Kode HTML Form pencarian animasi

<div id='search-expand'>
<form class="search" action="/action_page.php">
  <input type="text" placeholder="Ketik disini.." name="search2">
</form>  
</div>

Kode CSS Form pencarian animasi

#search-expand form.search button {
  width: 20%;
  background: #ccc;
  color: white;
  font-size: 17px;
  border-left: none;
  cursor: pointer;
  border-top-right-radius:6px;
  border-bottom-right-radius:6px;
}
#search-expand input[type=text] {
  float:right;
  width: 150px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  font-size: 16px;
  background-color: #fff;
  border-radius:6px;
  padding: 12px 40px 12px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
#search-expand{display:block;width:100%;position:relative}
#search-expand input[type=text]:focus {width: 100%;}
#search-expand form.search::before {content: url('https://api.iconify.design/map/search.svg?color=%23777&height=20');
    position:absolute;
    right: 0;
    top: 0;
    padding: 10px 10px 5px 10px;
    background: #f1f1f1;
    border: 2px solid #ddd;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    }
#search-expand form.search button:hover {background: #ddd;color:#333}
#search-expand form.search::after {
content: "";
clear: both;
display: table;
}