Membuat tampilan form search / submit lebih menarik

Jika anda belum tau apa yang dimaksud dengan form search, ini dia bentuknya : Jika boleh dijelaskan dikit, form tersebut terdiri dari 2 bagian. 1. textinput 2. button submit. Biasanya, form ini biasa dipakai untuk mencari suatu artikel di blog (mesin pencari) dan form berlangganan email feedburner. Nah...pada tutorial blogspot kali ini, saya akan sedikit bahas bagaimana cara merubah tampilan form tersebut sehingga bisa lebih menarik. Dan untuk merubah tampilan dari form tersebut, tentunya kita harus tahu dulu kode html-nya. Berikut kode html dari form tersebut : Kode untuk text input :

<input size="20" name="textinput" type="text"/>

Kode untuk button submit :

<input value="Daftar" type="submit"/>

Biasanya, kode diatas tidak selalu sama. Sesuai dengan fungsinya sendiri. Jadi untuk mengetahui kode tersebut, fokuskan saja pada text yang berwarna merah (seperti diatas). Sekarang kita coba untuk merubah tampilan form tersebut dengan sedikit menambahkan kode html pada kode standar form tersebut. Merubah tampilan textinput Misalnya saya akan mengubah tampilan textinput menjadi seperti ini Maka hal yang perlu dilakukan adalah dengan menambahkan kode html untuk merubah tampilan background dan bordernya saja. Sehingga kode-nya seperti ini :

<input style="background:#ebebeb; border:1px solid #000;" name="textinput" type="text" size="20"/>

Silahkan rubah text yang berwarna merah, sesuai dengan selera anda untuk mengganti warna background dan bordernya. Merubah tampilan button submit Untuk merubah tampilan button submit ini, pada dasarnya sama saja seperti merubah tampilan textinput. Caranya anda tinggal menambahkan kode html untuk mengganti background dan border. Seperti button submit dibawah ini : Kodenya :

<input style="background:#e0e0e0; border:1px solid #ebebeb;" value="Daftar" type="submit"/>

Silahkan rubah text yang berwarna merah, sesuai dengan selera anda untuk mengganti warna background dan bordernya. Sehingga tampilan baru dari form tersebut manjadi seperti ini : Silahkan bandingkan tampilannya dengan form standar. Lebih enak dipandangkan..?! hehehehe....Selamat mencoba...