Beberapa waktu yang lalu, saya ditelepon oleh teman saya dari Batam. Teman Saya pernah membuat sebuah web perhotelan di provinsi Jambi. Namun, karena pemilik hotel ingin mengubah tampilannya agar lebih baik, maka teman saya diminta untuk membuat sebuah label yang tampil pada sebuah texfield.


Bagi anda seorang web developer, tentu anda sering menemukan kendala tersebut. Beberapa diantaranya yang cukup sering adalah pemasangan form login atau form pencarian pada sisi-sisi sempit. untuk lebih jelasnya perhatikan gambar berikut ini:

Pada gambar diatas, diketahui bahwa sebuah label yang memberikan informasi kepada pengguna mengenai data yang seharusnya diisi pada texfield pada gambar diatas MEMAKAN SPACE. Selain itu, hal diatas juga dapat mengurangi keindahan form yang Anda buat karena seringkali membuat form terlipat atau terlihat memanjang kebawah.

Nah.. salah satu cara yang sering dilakukan untuk mengatasi hal diatas adalah dengan cara memasukan sedikit kode javascript pada textbox Anda. Sebenarnya masih ada cara lain melalui CSS. Namun menurut penulis, inilah cara yang paling mudah. hehehe..




Pada contoh form Facebook diatas, anda dapat melihat sebuah label yang dapat menghilang pada saat mendapat focus dan tampil kembali jika kehilangan focus. Trik ini lah yang akan penulis jabarkan pada kesempatan ini. heheheh

 Ok tanpa betele-tele, buat lah sebuah file php/html baru dengan Dreamwever kesayangan Anda. Kemudian, buatlah sebuah form dengan tampilan dibawah ini


Setelah membuat 2 buah texfield seperti gambar diatas, langkah selanjutnya adalah masuk ke dalam jendela code. Kemudian, ketikan lah kode dibawah ini pada even onfocus dan onblur dalam texfield yang telah dibuat sebelumnya.


Nah.. sampai disini  tahap pembuatan telah selesai. Untuk mengujinya bukalah dengan browser kesayangan Anda. Jika tidak ada kesalahan maka Anda akan mendapati hasil sebagai berikut.


Ronald Rusli
Chairman jambispirit.com