Cara Membuat Kotak Pencarian Dengan HTML Dan CSS

Cara Membuat Kotak Pencarian Dengan HTML Dan CSS

Kotak Pencarian atau search form merupakan elemen penting yang ada dalam sebuah website.

Fungsinya untuk melakukan pencarian atau menemukan sesuatu yang dicari dalam website tersebut.

Dan kali ini saya akan memberikan cara membuat kotak pencarian dengan HTML dan CSS.

Hasil akhirnya kira kira seperti ini.

Kotak Pencarian

Membuat HTML

Langkah pertama adalah membuat htmlnya terlebih dahulu. Lalu isi dengan kode seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Kotak Pencarian</title>
  <style>
  </style>
</head>
<body>
  <div>
    <form>
    <input class="cari" type="text" name="cari" placeholder="Ketik Sesuatu">
    <input class="button" type="submit" value="Cari">
  </form>
  </div>
</body>
</html>

Disini kita membuat sebuah form, yang berisi sebuah input text, dan sebuah button

Lalu, coba buka file tersebut di browser.

Membuat HTML

Akan muncul sebuah kotak pencarian. Selanjutnya kita akan memulai mendesain tampilanya.

Menambah CSS

Tambahkan kode berikut didalam tag <style>

form{
  display: flex;
}
.cari{
  border: none;
  background-color: #F1F2F2;
  padding: 10px;
}
.button{
  border: none;
  padding: 0 20px;
  background-color: #5199FF;
  color: #fff;
  cursor: pointer;
}

Disini saya memberi flex pada form, agar input dan buttonya sejajar.

Lalu saya mendesain input dan buttonya.

Save, lalu coba buka dibrowser.

Kotak Pencarian

Hasil Akhir

Berikut adalah hasil akhir keseluruhan code.

<!DOCTYPE html>
<html>
<head>
  <title>Kotak Pencarian</title>
  <style>
    form{
      display: flex;
    }
    .cari{
      border: none;
      background-color: #F1F2F2;
      padding: 10px;
    }
    .button{
      border: none;
      padding: 0 20px;
      background-color: #5199FF;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <form>
    <input class="cari" type="text" name="cari" placeholder="Ketik Sesuatu">
    <input class="button" type="submit" value="Cari">
  </form>
  </div>
</body>
</html>

Untuk selanjutnya silahkan kembangkan sendiri.

Sekian dari saya, semoga bermanfaat.

Related Post

Comments

X