Cara membuat fungsi pencarian di html dengan javascript

Cara Membuat Kotak Pencarian dengan HTML CSS. Pada kesempatan kali ini Nyekrip akan membagikan tutorial cara membuat search box dengan CSS dan HTML, sebagai informasi bahwa Search Box merupakan salah satu elemen UI yang sangat penting pada sebuah halaman web. Banyak manfaat yang bisa didapatkan dengan memiliki kotak pencarian, siapa saja yang saat ini sudah sangat familiar dengan fitur kotak pencarian dan tentunya sudah tidak asing lagi dengan Google sebagai mesin pencari pada umumnya.

Kotak telusur di laman web menjalankan fungsi yang sama seperti Google yang memungkinkan pengguna menemukan konten tertentu di situs web kami. Memiliki Kotak Pencarian merupakan kebutuhan mutlak bagi sebagian besar website dan dibutuhkan untuk meningkatkan kenyamanan pengguna website

Table of Contents Show

Cara membuat kotak pencarian. Buat HTML
Cara membuat kotak pencarian. Menambahkan CSS
Buat Kotak Pencarian. Mengubah Placeholder

Dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang indah dengan bantuan CSS (Cascading Style Sheets). CSS yang akan digunakan memiliki tingkat kerumitan menengah, sehingga diperlukan beberapa pemahaman dasar tentang CSS, sehingga diharapkan Anda memahami dasar-dasar CSS terlebih dahulu sebelum melanjutkan tutorial ini.

Sebagai informasi, hasil akhir dari tutorial ini akan terlihat seperti gambar berikut ini, Anda juga bisa langsung menguji hasil scriptnya dengan mengklik tombol "Run Script". Setelah Anda mengklik tombol "Run Script", Anda akan diarahkan ke halaman Nyekrip Yuk. Di halaman Nyekrip Yuk Anda bisa menguji skrip secara online dan sekaligus mengunduhnya

Hasil Akhir

Jalankan Skrip

Cara membuat kotak pencarian. Buat HTML

Dalam contoh ini, kami akan membuat kotak pencarian sederhana yang memerlukan input teks dan menyertakan tombol pencarian di sebelah kanan. Meskipun cukup mendasar, kotak telusur ini dapat dengan mudah dimodifikasi agar sesuai dengan situs web yang berbeda

Sebelum kita dapat membuat CSS, kita perlu membuat HTML. Kami akan menggunakan skrip struktur umum HTML sebagai pengganti skrip kotak pencarian. Jika Anda belum mengetahui apa itu skrip struktur umum HTML, Anda dapat mengunjungi tutorial "Pengantar HTML. Struktur Umum Bagian 1”. Berikut adalah skrip HTML awal

<!doctype html> 

<html lang="en">
   <head> 
      <meta charset="utf-8">
      <title>Judul Halaman Saya</title>
   </head>
<body> 
   <div>Ini adalah div</div>
   <span>Ini adalah span</span>
</body>
</html>

Kami menghapus semua skrip di tag tubuh dan menggantinya dengan skrip berikut

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

Disarankan untuk mengetik kode/skrip dari tempel langsung; . Setelah mengetik, simpan dokumen dan buka di browser. Hingga pada browser akan muncul seperti gambar berikut

Hasil Awal Sebelum CSS

Sampai di sini kita telah membuat bentuk sederhana dari kotak pencarian dengan kolom teks dan tombol kirim di sebelahnya. Sebelum lanjut ke pembuatan CSS, mari kita bahas terlebih dahulu script diatas

placeholder. ini adalah teks yang muncul di kolom pencarian sebelum kita memasukkan input apa pun. Pada nilai atribut placeholder ini, kita bisa mengubahnya menjadi teks apapun yang kita suka

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

_1. Ini memberi tahu browser bahwa kotak telusur memerlukan beberapa input agar

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

2 berfungsi

Cara membuat kotak pencarian. Menambahkan CSS

Sebenarnya kita sudah selesai membuat kotak pencarian, hanya saja sangat sederhana dan terkesan sangat membosankan. Agar terlihat lebih cantik, kita akan menambahkan kode CSS untuk memberikan tampilan yang lebih baik

Silakan kembali ke Notepad dan ketik script di bawah ini tepat di bawah

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

Setelah itu refresh halaman web anda, maka akan muncul tampilan halaman web seperti gambar berikut

Setelah Implementasi CSS awal

Bagaimana hasilnya? . Mengubah warna dari

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

_4 relatif mudah dengan menerapkan beberapa tweak CSS

Mari kita bahas CSS lebih detail

form {
    width:500px;
    margin:50px auto;
}

Skrip di atas berfungsi menginstruksikan browser untuk mengatur lebar formulir menjadi

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

5 dan mengatur

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

6 atas dan bawah menjadi

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

8 disini artinya margin kiri/kanan diatur secara otomatis

.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}

Skrip ini digunakan untuk mendesain kotak telusur yang memiliki

<form>
  <input class="search" type="text" placeholder="Cari..." required>	
  <input class="button" type="button" value="Cari">		
</form>

9. Kami telah menentukan padding atas / bawah

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

0 dan padding kiri / kanan

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

Kami juga telah menentukan warna latar belakang menggunakan nilai RGBA, di mana tiga nilai pertama mengacu pada warna RGB (Merah, Hijau, Biru), dan nilai terakhir ('A') mengacu pada transparansi. Semakin rendah nilai transparansi, elemen tersebut akan semakin transparan

Misalnya nilai RGB (84, 188, 132) sesuai dengan nilai warna hex

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

Contoh Nilai RGB

Kami juga telah menentukan perbatasan selebar

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

3. Mengapa nilainya 0?

.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}

Skrip di atas adalah gaya untuk tombol pencarian. Beberapa hal yang perlu diperhatikan di sini

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

4 – Tombol pencarian, secara default, ditempatkan di sebelah kanan kotak pencarian dengan margin beberapa piksel antar elemen. Karena kami ingin tombol berada tepat di sebelah kotak pencarian, kami mengaturnya dengan posisi relatif

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

5 – Karena elemen sekarang memiliki posisi relatif, kita dapat menggesernya ke kiri dengan memberikan posisi negatif

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

6 – Padding bagian atas atau bawah pada bagian button kurang lebar, jadi padding kita atur agar lebar button sama dengan lebar form

.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

Untuk script di atas berfungsi untuk mengatur warna tombol saat disorot dengan mouse

Sejauh ini, kami telah membuat kotak telusur standar yang dapat digunakan di sebagian besar situs web dengan tambahan beberapa penyesuaian. Tetapi bagaimana jika Anda ingin menambahkan sedikit gaya ke kotak telusur?

Buat Kotak Pencarian. Mengubah Placeholder

Upaya mengubah format teks placeholder dari kotak pencarian akan sedikit lebih rumit. Browser yang berbeda akan menangani teks placeholder secara berbeda. Oleh karena itu, setiap perubahan elemen memerlukan pengaturan yang berbeda untuk setiap browser

Di bawah ini, kami akan mengubah warna teks placeholder menjadi merah dan font diatur ke Helvetica Neue

::-webkit-input-placeholder { /* For WebKit browsers */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}
:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}
:-ms-input-placeholder { /* For Internet Explorer 10+ */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}

Setelah kita mengetikkan script diatas pada

form {
    width:500px;
    margin:50px auto;
}
.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #53bd84;
    background-color:#53bd84;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
}

_7, maka kotak pencarian kita akan terlihat seperti gambar ini

Hasil Akhir

Berikut Source Code atau Script Akhir

<!doctype html>
 
 
<html lang="en"> 
   <head>
      <meta charset="utf-8">
      <title>Judul Halaman Saya</title>
	  <style type="text/css">
		form {
			width:500px;
			margin:50px auto;
		}
		.search {
			padding:8px 15px;
			background:rgba(50, 50, 50, 0.2);
			border:0px solid #dbdbdb;
		}
		.button {
			position:relative;
			padding:6px 15px;
			left:-8px;
			border:2px solid #53bd84;
			background-color:#53bd84;
			color:#fafafa;
		}
		.button:hover  {
			background-color:#fafafa;
			color:#207cca;
		}
				  
		::-webkit-input-placeholder { /* For WebKit browsers */
			color:    #dd3333;
						font-family:Helvetica Neue;
						font-weight:bold;
		}
		:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
			color:    #dd3333;
						font-family:Helvetica Neue;
						font-weight:bold;
		}
		::-moz-placeholder { /* For Mozilla Firefox 19+ */
			color:    #dd3333;
						font-family:Helvetica Neue;
						font-weight:bold;
		}
		:-ms-input-placeholder { /* For Internet Explorer 10+ */
			color:    #dd3333;
						font-family:Helvetica Neue;
						font-weight:bold;
		}	  
	</style>
   </head>
<body>
<form>
    <input class="search" type="text" placeholder="Cari..." required>
    <input class="button" type="button" value="Cari">		
</form>
</body>
</html>

Perlu diingat bahwa script ini hanya bekerja untuk browser terbaru, sehingga diperlukan pengaturan tambahan pada CSS agar kotak pencarian kita dapat bekerja pada semua browser dan teknik penggunaan CSS di atas menggunakan teknik embedded style/Internal Styles. Untuk menggunakan teknik CSS lainnya, Anda bisa mengunjungi artikel "Tips Cara Menggunakan CSS Pada HTML"

Sekian tutorial cara membuat Search Box atau Kotak Pencarian dengan HTML dan CSS, sebenarnya style diatas masih tergolong standar. Kita bisa menambahkan indikator panah di sebelah kiri untuk tombol pencarian, selain memberikan gaya yang elegan juga bagus untuk "UX" (User Experience), dengan cara ini akan membuat tombol pencarian lebih menarik sehingga bisa mengarahkan pengguna menuju kotak pencarian