Berikut ini adalah trik sederhana untuk mempercantik tampilan form yang kita buat dengan menggunakan sedikit javascript (OnFocus dan OnBlur).

1. Textfield untuk search.

Seperti kita ketahui, di suatu blog, pada bagian search tertulis kata "Search.." apabila cursor aktif di bagian seach tsb, maka otomatis kata "Search.." tsb akan hilang. Demikian juga apabila kita meninggalkan form tanpa menulis sesuatu didalamnya otomatis kata"Search.." akan muncul. Kata "Search" tidak akan muncul apabila kita mengetikkan sesuatu ke textfield tsb meskipun 1 huruf. Berikut script dan demonya

Script :

<input name="search" type="text" style="height:15px;" value="Search.." onFocus="if(this.value=='Search..'){this.value=''}" onBlur="if(this.value==''){this.value='Search..'}" />

Demo :

2. Aktif Textfield

Pasti kita pernah menulis wall/komentar di Facebook. Jika kita akan mengisi wall maka otomatis lebar dari textfield tsb akan berubah (menjadi lebih lebar). Untuk mempercantik, bisa kita ganti warna background yg menandakan textfield yg aktif saat itu. Berikut script dan demonya.

<input name="search" type="text" style="height:35px; width:250px;" value="Apa yang Anda pikirkan.." onFocus="if(this.value=='Apa yang Anda pikirkan..'){this.value=''; this.style.height='50px'; this.style.background='#EEEEEE'; this.style.border='1px solid #6699CC'}" onBlur="if(this.value==''){this.value='Apa yang Anda pikirkan..'; this.style.height='35px'; this.style.background='';}" >

Demo :

Selain textfield Anda juga bisa menerapkannya di textarea

Komentar Pembaca (0 komentar)
		Previous - Next