JQuery : Watermark pada Form Input

Apa itu watermark di dalam form input? dari pada bingung - bingung menjelaskannya mendingan cekidot lihat gambar dibawah :

Gambar. Keterangan pada inpu box

Pernahkah liat input box pada seperti gambar diatas, dalam gambar diatas terdapat tulisan search yang ketika diklik/atau mouse kita arahkan ke text box  tersebut maka tulisan search akan hilang, seperti gambar dibawah : 
 Gambar. Tulisan Search yang menghilang

dan ketika mouse/kursor sudah tidak berada dalam text box maka tulisa search akan kembali muncul. Untuk lebih jelasnya mari kita coba membuatnya, pertama - pertama mari kita buat skrip watermark.html

setelah kita simpan file tersebut, mari kita coba jalankan, tp perlu diingat anda harus menyertakan file jquery-1.4.js dan buat file main.css yang diletakan satu folder dengan watermark.html, didalam contoh ini penulis meletakan file main.css di dalam subfolder css. Untuk mendapatkan file jquery-1.4.js, Anda dapat langsung mendownload di situs resminya J-Query disini , Save As file tersebut ke dalam folder yang masih sama dengan folder dimana Anda meletakan file watermark.html. Setelah semua sudah, maka kita lihat hasilnya seperti gambar dibawah :

Gambar. Hasil dari watermark.html
 dan ketika kursor kita arahkan kesalah satu textbox maka hasilnya terlihat seperti gambar dibawah..

Gambar. Tulisan watermark menghilang saat kursor diarahkan ke text box

Sekian dulu ya...nanti jumpa lagi...jika da yang salah di komen ya...^_^

0 komentar:

Posting Komentar