Menambahkan Tombol Clear Input Di Form Search Box

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/16/2014

Tombol clear input ini akan memudahkan untuk menghapus teks pada sebuah form. Dengan menekan tombol clear ini maka teks yang sudah kita isikan pada form yang tersedia akan menghilang dan form dikembalikan ke posisi awal (reset).

Nah kali ini saya akan membuat postingan cara menambahkan tombol clear input ini ke dalam form search box sehingga ketika kita atau pengguna search box mengalami kesalahan pengetikan, maka akan dengan mudah menghapus teksnya untuk kembali mengetikan teks lainnya.

Seperti saya katakan tadi di atas, ini adalah me-reset form yang sudah diisi teks agar kembali ke posisi awal atau kosong. Secara sederhana kode reset inputnya akan seperti di bawah ini beserta penampilannya.

<input name='resetfield' type='reset'/>

Dan contoh penerapan secara sederhana pada form teks seperti di bawah ini dengan kode sebagai berikut, silahkan coba untuk memasukan teks ke dalam form-nya dan kemudian tekan tombol reset-nya.

<form>

<input name='q' type='text'/>

    <input name='resetfield' type='reset'/>

</form>

Nah kini saya akan memodifikasi bentuk form dan tombol resetnya seperti bentuk search box seperti yang digunakan di Kompi Ajaib ini dengan bantuan jquery untuk efek show hide tombol clear input-nya pada iframe JSFiddle di bawah ini.

Semoga apa yang saya share kali ini mudah dan bisa dipahami. Selamat mencoba...