Logo Komodo Koding /Koding

Input search di HTML

Untuk membuat sebuah form pencarian di sebuah situs HTML, gunakan input dengan type search

Input dengan type search digunakan khusus saat situs kamu ingin dipasangkan sebuah form pencarian.

<input type="search" />

Yang menghasilkan

Secara tampilan, tidak ada perbedaan antara input search dengan input text, kecuali pada beberapa Browser ada tanda silang di bagian input search, saat kamu mengetik.

Perbedaan terletak pada kegunaan input itu sendiri, yang belum akan kita lihat di sini.

Untuk melihat fungsi input search, kita buat dulu form HTML yang lebih lengkap seperti ini

<form action="#">
    <input type='search' name="query">
    <input type='submit'/>
</form>

Hasilnya

  • Coba masukkan sebuah text, lalu ketik submit.
  • Perhatikan di URL kamu sekarang ada tambahan ?query=TEXT-YANG-KAMU-MASUKKAN

Penjelasan

  • Input search, biasanya dipasangkan dengan atribut name, yang berguna sebagai penanda atau nama dari input ini, agar mudah diambil datanya nanti
  • Untuk mengambil datanya, belum akan dilihat di pelajaran HTML, karena tugas ini di luar lingkup HTML.

Untuk memberi nilai otomatis pada input search, gunakan atribut value.

<input type='search' value="belajar HTML">

Hasilnya