Cara Membuat Tombol Search di HTML

Sigit N
HTML (HyperText Markup Language)
Cara Membuat Tombol Search di HTML
Konten Halaman

Dalam dunia digital saat ini, fungsi pencarian yang efektif dan intuitif adalah salah satu elemen penting dalam pengalaman pengguna yang baik di situs web.

Jika Anda ingin menambahkan tombol search yang menarik dan mudah digunakan ke situs web Anda, langkah-langkah dalam artikel ini akan membantu Anda mencapai tujuan tersebut. Mari kita mulai dengan langkah-langkah sederhana untuk membuat tombol search di HTML.

Langkah 1: Menyiapkan Struktur Dasar HTML

  1. Buka editor teks favorit Anda dan buat file HTML baru.
  2. Mulailah dengan tag HTML dasar <html></html>.
  3. Di dalam tag <html></html>, tambahkan tag <head></head> untuk menyimpan informasi kepala dokumen.
  4. Di dalam tag <head></head>, tambahkan tag <title></title> dan berikan judul yang sesuai untuk situs web Anda.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Membuat Tombol Search di HTML</title>
</head>
<body>
</body>
</html>

Langkah 2: Membuat Form Pencarian

  1. Di dalam tag <body></body>, tambahkan tag <form></form> untuk membuat form pencarian.
  2. Di dalam tag <form></form>, tambahkan atribut action dengan nilai "#". Ini akan mengarahkan form ke halaman yang sama saat tombol search ditekan.
  3. Di dalam tag <form></form>, tambahkan atribut method dengan nilai "get". Metode "get" digunakan untuk mengirimkan data pencarian sebagai parameter URL.
  4. Di dalam tag <form></form>, tambahkan tag <input> untuk memungkinkan pengguna memasukkan kata kunci pencarian.
  5. Di dalam tag <input>, tambahkan atribut type dengan nilai "text" dan atribut name dengan nilai "search".
  6. Selanjutnya, tambahkan tag <input> kedua untuk membuat tombol search.
  7. Di dalam tag <input> kedua, tambahkan atribut type dengan nilai "submit" dan atribut value dengan nilai "Search".

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Membuat Tombol Search di HTML</title>
</head>
<body>
  <form action="#" method="get">
    <input type="text" name="search">
    <input type="submit" value="Search">
  </form>
</body>
</html>

Langkah 3: Menambahkan CSS untuk Membuat Tombol Search Menarik

  1. Di dalam tag <head></head>, tambahkan tag <style></style> untuk menulis kode CSS.
  2. Di dalam tag <style></style>, tambahkan kode CSS untuk mengubah tampilan tombol search.
  3. Anda dapat mengatur warna latar belakang, warna teks, ukuran font, dan properti lainnya sesuai keinginan Anda.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Membuat Tombol Search di HTML</title>
  <style>
    input[type="text"] {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    input[type="submit"] {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <form action="#" method="get">
    <input type="text" name="search">
    <input type="submit" value="Search">
  </form>
</body>
</html>

Cara Membuat Tombol Search di HTML

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat tombol search di HTML. Anda dapat menyesuaikan tampilan tombol dengan menggunakan CSS sesuai dengan desain situs web Anda. Gunakan kode ini sebagai dasar untuk mengembangkan fungsi pencarian yang lebih kompleks dan menarik.

Mulailah dengan struktur dasar HTML, tambahkan elemen <form> untuk form pencarian, dan gunakan atribut action dan method untuk mengarahkan dan mengirimkan data pencarian. Jangan lupa untuk memberikan tombol search menggunakan elemen <input> dengan atribut type "submit". Terakhir, tambahkan kode CSS untuk mempercantik tampilan tombol search.