Menambahkan Tombol Clear Input Di Form Search Box

Menambahkan Tombol Clear Input Di Form Search Box

Bola Hero Gawai

Menambahkan Tombol Clear Input Di Form Search Box

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' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here....'/>
    <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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

5 Comments Add Comment

jadi lebih mudah untuk menghapus teks ya salah kita tulis , good mas adhy (y)

Balas

Betul mas hehehee seperti itu :)

Balas

Keren kang :D masih sepi ambil keduax aja :D

Balas

waa jadi mudah menghapus tulisan yang salah ya kang...
terima kasih sharenya

Balas

Oh gitu ya kang, aku masih rada kurang ngerti penggunaanya , eh ya jangan lupa visit blog.alan.cf

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×