Cara Membuat Search Box dengan HTML dan CSS

Cara Membuat Search Box dengan HTML dan CSS – Apakah Anda ingin menambahkan kotak pencarian yang menarik dan fungsional ke situs web Anda? Dengan menggunakan HTML dan CSS, Anda dapat dengan mudah membuat search box yang menarik dan mudah digunakan. Pencarian merupakan fitur penting dalam pengalaman pengguna online, dan dengan mengikuti panduan ini, Anda akan belajar cara membuat search box yang dapat disesuaikan dengan kebutuhan situs web Anda.

Dalam panduan ini, riztekno akan memberikan langkah-langkah detail tentang bagaimana cara membuat search box menggunakan HTML dan CSS. Langkah-langkah ini dirancang untuk pemula dan akan membantu Anda memahami konsep dasar dalam pembuatan search box yang responsif dan menarik secara visual.

Jadi, mari kita mulai dengan membuat folder proyek dan menyusun file HTML dan CSS untuk menciptakan search box yang fungsional dan estetis. Setelah Anda mengikuti langkah-langkah yang telah disediakan, Anda akan memiliki search box yang siap digunakan di situs web Anda.

Alat yang Harus Anda Siapkan

Beriku ini beberapa alat yang harus Anda siapakan untuk dapat membuat search box dengan html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Sublime text (Text editor code),
  • Niat yang kuat.

Cara Membuat Search Box dengan HTML dan CSS

1. Buat Folder Proyek Search Box

Pertama, buatlah folder proyek baru di komputer Anda. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “search-box-project“.

2. Buat Sebuah File search_box.html

Buka editor teks favorit Anda dan buatlah file baru dengan nama search_box.html dalam folder proyek yang telah Anda buat sebelumnya. File ini akan menjadi tempat Anda menulis kode HTML untuk search box.

Artikel Terkait:   Cara Membuat Web HTML dan CSS Keren dengan Notepad

Berikut ini source code html yang dapat Anda tambahkan untuk membuat search box dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Box</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Ini adalah Search Box</h1>
    <div class="search-box">
      <input type="text" placeholder="Ketik pencarian...">
      <button type="submit">Cari</button>
    </div>
  </div>
</body>
</html>
 

3. Buat File style.css

Setelah membuat file HTML, saatnya untuk menambahkan beberapa gaya CSS agar search box terlihat menarik. Buatlah file baru dengan nama style.css di dalam folder proyek.

Berikut ini source code css yang dapat Anda tambahkan untuk membuat search box dengan html dan css:

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
  }
  
  .container {
    text-align: center;
  }
  
  h1 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }
  
  .search-box {
    display: inline-block;
  }
  
  input[type="text"] {
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 200px;
    font-size: 16px;
  }
  
  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #45a049;
  }
 

4. Mengubah Tampilan Search Box

Di sini, kita menggunakan CSS untuk membuat tata letak dan gaya untuk search box. Anda dapat menyesuaikan warna, ukuran, dan gaya sesuai preferensi Anda.

Artikel Terkait:   Cara Membuat Website Toko Online dengan HTML

5. Simpan & Lihat Tampilan

Simpan file HTML dan CSS yang telah Anda buat. Buka file search_box.html menggunakan browser web favorit Anda untuk melihat tampilan dari search box yang telah Anda buat.

Preview hasil

Berikut ini preview hasil yang akan tampil nantinya jika Anda berhasil membuat search box dengan html dan css:

Penutup

Dengan menambahkan fitur pencarian yang mudah diakses, Anda dapat meningkatkan keterlibatan pengguna dan membantu mereka menemukan konten yang mereka cari dengan lebih cepat dan efisien. Jangan ragu untuk menyesuaikan gaya dan tata letak search box sesuai dengan desain situs web Anda untuk menciptakan pengalaman pengguna yang optimal. Semoga panduan ini membantu Anda dalam membangun situs web yang lebih interaktif dan responsif!