Skip to main content

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 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...

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB