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.
Sekian tutorial kali ini, semoga dapat menambah wawasan Anda. J
Ronald Rusli
Chairman jambispirit.com
ada baikny kalau kode ditampilkan dalam tag php atau code . nice tutorial btw. :)
Wah.. makasih sarannya.
akan segera saya perbaiki kedepannya
:p
mntap tutorialnya gan, ane bookmark dulu yah..thanks
mantap juga jadi konsultan IT..., lanjutkan...
Makasih Bang ADi..
:p
terima kasih bang Ronald,mantaf share ilmunya (y)
@ridwan : makasih telah berkunjung ke sini.. hehehe