Cara Membuat Pencarian di HTML

By Posted on

Cara Membuat Pencarian di HTML – Pencarian merupakan salah satu fitur yang sangat penting dalam pengembangan website. Dalam era digital yang serba cepat ini, pengguna internet cenderung mencari informasi dengan cepat dan mudah. Oleh karena itu, memiliki formulir pencarian yang efektif dapat meningkatkan pengalaman pengguna dan memudahkan mereka untuk menemukan konten yang mereka cari. Dalam artikel ini, kelashtml akan membahas langkah-langkah detail tentang cara membuat pencarian di HTML, yang cocok bagi pemula. Mari kita mulai!

Alat yang Dibutuhkan

Berikut ini beberapa alat yang harus dibutuhkan untuk membuat pencarian di html:

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

Cara Membuat Pencarian di HTML

1. Buat Folder Project Pencarian

Langkah pertama yang perlu dilakukan adalah membuat folder khusus untuk proyek pencarian Anda. Misalnya, Anda dapat menamai folder ini sebagai “project-pencarian” atau yang sesuai dengan preferensi Anda.

2. Buat Sebuah File pencarian.html

Setelah Anda membuat folder proyek, langkah berikutnya adalah membuat file HTML baru di dalamnya. Berikut adalah langkah-langkahnya:

  • Buka editor teks atau IDE (Integrated Development Environment) yang Anda gunakan.
  • Buat file baru dengan nama pencarian.html.
  • Mulailah dengan menuliskan kerangka dasar HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form class="search-form">
            <input type="text" placeholder="Cari..." class="search-input">
            <button type="submit" class="search-button">Cari</button>
        </form>
    </div>
</body>
</html>
 

3. Buat File style.css

Untuk mengubah tampilan pencarian sesuai dengan keinginan Anda, Anda perlu membuat file CSS terpisah. Langkah-langkahnya adalah sebagai berikut:

  • Di dalam folder proyek, buat file baru dengan nama style.css.
  • Anda dapat menggunakan file ini untuk menyesuaikan tampilan formulir pencarian sesuai keinginan Anda. Sebagai contoh, Anda dapat mengubah warna latar belakang, ukuran teks, dan lain sebagainya.
Baca Juga:  Cara Membuat Video Autoplay di HTML

4. Mengubah Tampilan Pencarian

Sekarang, kita akan mengubah tampilan formulir pencarian agar sesuai dengan preferensi Anda:

  • Buka file pencarian.html yang telah Anda buat sebelumnya.
  • Di dalam tag <body>, tambahkan elemen <form> untuk membuat formulir pencarian:
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

.search-form {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-input {
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.search-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: #0056b3;
}
 
  • Anda dapat menyesuaikan atribut action dan method sesuai dengan kebutuhan Anda. Atribut action menentukan URL tempat formulir akan dikirimkan saat dikirimkan, dan atribut method menentukan metode HTTP yang akan digunakan untuk mengirimkan data formulir.

5. Save & View Tampilan

Setelah Anda selesai membuat dan mengubah tampilan formulir pencarian, langkah terakhir adalah menyimpan perubahan dan melihat tampilan hasilnya di browser:

  • Simpan file pencarian.html dan style.css.
  • Buka file pencarian.html dengan browser Anda untuk melihat formulir pencarian yang telah Anda buat.
Baca Juga:  Cara Membuat Navbar dengan HTML dan CSS

Preview hasil

Berikut ini preview hasil pencarian di html jika Anda berhasil membuatnya:

Penutup

Pencarian merupakan fitur yang krusial bagi setiap website. Dengan memahami langkah-langkah dasar dalam membuat formulir pencarian menggunakan HTML, Anda dapat meningkatkan interaktivitas dan kegunaan website Anda. Semoga panduan ini telah memberikan wawasan yang berharga bagi Anda, terutama jika Anda adalah seorang pemula dalam pengembangan web. Ingatlah untuk terus belajar dan bereksperimen dengan fitur-fitur baru untuk meningkatkan keterampilan Anda dalam membangun website yang efektif dan ramah pengguna. Jika Anda memiliki pertanyaan lebih lanjut tentang pembuatan pencarian di HTML atau topik terkait, jangan ragu untuk menanyakannya kepada komunitas pengembang web atau mencari informasi lebih lanjut secara online.

Related posts: