Kreatifitas Ada di Otakmu!

Form action, box search, kotak pencarian atau apapun itu namanya tetap saja mempunyai fungsi untuk mencari konten yang dicari! Versi advanced search box, style yg lain silahkan acak² sendiri di kotak pencarian blog ini :D Singkat cerita cuma mau berbagi bermain kode seputaran form action saja kok ;)) Mari kita mulai acara bermain-main namun mendapatkan pelajaran. Jangan belajar sambil bermain, yg didapat nanti keteledoran dalam bertindak ;)
Focus, seriously but still calm down..relax! Jangan dipaksakan, karena segala yg dipaksakan akan terasa menyakitkan :D Coba sobat sekarang ngupil dengan kasar dan dipaksain telunjuk masuk ke hidung! ENAK nggak!!!
Default code tanpa disertai variabel CSS apapun...

<form action="http://YOUR-BLOG.blogspot.com/search" method="get" target="top">
<input name="q" value="Search here..." />
</form>Sekarang ganti attribute value="Search here..." dengan variasi placeholder.

Variable placeholder dapat menggantikan fungsi onfocus or onblur! Sekarang kita coba sisipkan dengan beberapa sentuhan CSS standar untuk memperindah penampilan.

<style>
.search {
color: #333;
font: italic 13px Arial;
height: 30px;
width: 212px;
background: #ffd;
color: #f9f;
font-weight: bold;
}
</style>

<form action="http://YOUR-BLOG.blogspot.com/search" method="get" target="top">
<input name="q" class="search" placeholder="Search here..." />
</form>Pada tagging <input> kita sudah memasukan 1 unik ID dengan nama class search. Masukin bumbu border coba ke kode CSS! Ingat penulisan kode border tidak harus selalu border: px/em solid,dashed,dotted color (border: 3px solid #000)
Look is this

Belum lagi varibel margin, padding, text effect and etc yg bisa kalian pakai dalam memvariasikan gaya sesuai selera :)

Do you want it!!!

<style>
.search {
color: #333;
font: italic 13px Arial; 
line-height: 30px;
height: 30px;
width: auto;
border: 0;
background: transparent;
}
.search:hover {
cursor: pointer;
}
</style>

<form action="http://YOUR-BLOG.blogspot.com/search" method="get" target="top">
<input name="q" class="search" value="Search here..." onfocus="value=''" onblur="value='Search here...'" />
</form>

Semua sudah ada rumus/kode/bahasa/language masing² untuk bermain kode² CSS. Tinggal sampai mana kemauan kita untuk belajar memahaminya :) Koben kalau malas bin jenuh kayak ini gini. Detail menerangkan namun tetap menghasilkan kreasi full stylish b-)
Kalau harus diterangkan terus secara detail, sementara sudah banyak resource web rujukan, kapan saya berbloglang ria untuk mencari ilmu dibagi-bagi kepada sobat sekalian :))
Semua ada di otakmu.
Happy codding \m/