Menambahkan Tombol Clear Input Di Form Search Box

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 aku akan menciptakan postingan cara menambahkan tombol clear input ini ke dalam form search box sehingga saat kita atau pengguna search box mengalami kesalahan pengetikan, maka akan dengan gampang menghapus teksnya untuk kembali mengetikan teks lainnya.

Seperti aku katakan tadi di atas, ini ialah me-reset form yang sudah diisi teks supaya kembali ke posisi awal atau kosong. Secara sederhana instruksi reset inputnya akan menyerupai di bawah ini beserta penampilannya.

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

Dan rujukan penerapan secara sederhana pada form teks menyerupai di bawah ini dengan instruksi sebagai berikut, silahkan coba untuk memasukan teks ke dalam form-nya dan lalu tekan tombol reset-nya.

 <form>
 <input name='q' type='text'/>
     <input name='resetfield' type='reset'/>
 </form>

Nah sekarang aku akan memodifikasi bentuk form dan tombol resetnya menyerupai bentuk search box menyerupai yang dipakai di Kompi Ajaib ini dengan pemberian jquery untuk efek show hide tombol clear input-nya pada iframe JSFiddle di bawah ini.

Semoga apa yang aku share kali ini gampang dan dapat dipahami. Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post