Membuat Form Search Dengan CSS3

(1)

(2)

Membuat Form Search Dengan CSS3

Oleh: Irvansyah

Pasti teman2 sering dong berkunjung ke blog ataupun malah di blog

teman2 ada yang namanya Form Searh.. Apa itu Form Search..?? Yup bnar

sekali.. Sebuah media form yang berfungsi untuk mencari apa yang kita

butuhkan agar lebih mudah dalam mencari sesuatu yang kita butuhkan

baik artikel maupun gambar, video, musik dll diwebsite2 atau blog

tertentu.. Mungkin diantara teman2 udah ada...

Pasti teman2 sering dong berkunjung ke blog ataupun malah di blog teman2 ada yang namanya Form Searh.. Apa itu Form Search..?? Yup bnar sekali.. Sebuah media form yang berfungsi untuk mencari apa yang kita butuhkan agar lebih mudah dalam mencari sesuatu yang kita butuhkan baik artikel maupun gambar, video, musik dll diwebsite2 atau blog tertentu..

Mungkin diantara teman2 udah ada yang pernah lihat Ataupun paling gak teman2 pernah desain sendiri Form Search untuk blog atau website.. Nah Kali ini saya akan share lagi d biar teman2 bisa buat Form Search yang lebih menarik dari sebelumnya dengan bantun CSS3.. Unutk Yang belum pernah mungkin ini bias jadi acuan d buat kamu yang pengen desain sendiri formnya.. Biar lebih jelas saya kasi lihat tampilannya d form seperti apa yang akan kita buat…

Langkah pertama kita buat dulu kotak untuk formnya. Kalau teman2 perhatiin gambar diatas ada area berwarna hijau, nah itulah yang kita sebut kotak formnya..

Buka notepad atau text editor yang sobat punya lalu ketikkan kode dibawah ini:

(3)

-moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ transition:2s;

}

</style>

Na itu Langkah pertama sudah selesai, kemudian teman2 ketikkan lagi dibawah kode yang pertama tadi kode ini :

.kotak-form input {

font: normal 12px Arial, Helvetica, sans-serif; }

Nah Loh… Itu Fungsinya Untuk Apa mas..!!?? Na sesuai prinsip kerjanya form search yaitu mencari sesuatu sesuai kata atau kalimat apa yang kita inputkan berarti berhubungan dengan huruf donk…!!! Kode diatas tadii berfungsi untuk mengatur besar huruf, jenis huruf dan ketebalan huruf.. jadi kalau digabungin dengan kode yang pertama tadi maka hasilnya seperti ini :

-webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ transition:2s;

}

.kotak-form input {

font: normal 12px Arial, Helvetica, sans-serif; }

</style>

Pelan tapi pasti langkah kedua mulai selesai ne, lanjut ke langkah selanjutnya..

Kode yang selanjutnya ne berhubungan banget yang diatas.. Apa itu..!!?? Kita buat kotak kolom cari inputan yang fungsinya nanti untuk tempat untuk teks yang akan kita inputkan.. Teman2 ketikkan lagi kode dibawah ini setelah kode yang kedua tadi :

.kolom-cari { background: #C8C8C8; padding: 6px 6px 6px 8px; width: 150px; border: solid 1px #222222; outline: none;

-webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */

(4)

border-radius: 20px; /* rounded corner */ transition:2s;

}

Jadi kalau digabungin hasilnya seperi ini :

}

.kotak-form input {

font: normal 12px Arial, Helvetica, sans-serif; } .kolom-cari { background: #C8C8C8; padding: 6px 6px 6px 8px; width: 150px; border: solid 1px #222222; outline: none;

}

Yup Langkah ketiga sudah selesai, trus apa lagi ne yang kurang ya..!!??

Sebuah form biasanya dilengkapi sebuah tombol yang akan menyampaikan isi pencarian yang ingin kita cari ke databasenya.. Selanjutnya kita buat d tombolnya, ketik kode dibawah ini lagi tepat setelah kode yang tadi selesai kita ketik :

.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;

(5)

background: #C82D2D; transition:2s;

}

Jadi kalau sudah digabungkan maka hasilnya seperti ini :

}

.kotak-form input {

-webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ transition:2s; } .kolom-cari:hover { width:200px; background:white; transition:2s; } .tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px;

(6)

border-radius: 20px; background: #C82D2D; transition:2s;

}

</style>

Akhirnya satu persatu kodenya mulai kelihatan d.. Unutk desainnya kita sudah selesai sekarang kita melihat hasinya donk sapa tahu ada yang salah atau gak sesuai..

Untuk melihat hasil Kotak formnya teman2 ketikkan lagi kode dibawah ini dibagian <body>…</body>

<input class="kolom-cari" type="text" value="Search..." onfocus="if

(this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />

Supaya teman2 gak pada bingung kita gabungin d semua kodenya menjadi seperti ini :

<html> <head> <title>Search Form</title> <style> .kotak-form { background: #00FF00; display: inline-block; border: solid 1px #00FFFF; padding: 3px 5px;

}

.kotak-form input {

(7)

-moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ transition:2s; } .tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #C82D2D; transition:2s; } </style> </head> <body> <form class="kotak-form">

</body> </html>

Setelah itu teman2 simpan d dengan nama form search.html, setelah itu klik dua kali v yang sudah disimpan tadi kalau berhasil maka hasilnya seperti ini :

Akhirnya selesai juga d Form searchnya, saya yakin teman2 semua pasti berhasil semua.. Eits tapi tunggu dlu tadi sesuai gambar diatas ada tertulis FORM SEACRH SEBELUM DIHOVER dan FORM SEACRH SETELAH DIHOVER. Trus apa lagi dong yang kita tambahin..!!?? Pinter.. dibawah kode :

.kolom-cari {

(8)

padding: 6px 6px 6px 8px; width: 150px;

border: solid 1px #222222; outline: none;

}

Tambahin lagi d kode ini :

.kolom-cari:hover { width:200px;

background:white; transition:2s; }

Trus dibagian kode :

.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #C82D2D; transition:2s; }

Tambahin lagi d kode ini :

.tombol-cari:hover{ background:#AD9B27; transition:2s; }

Maka kalau di gabungin semua kodenya menjadi seperti ini :

<title>Search Form</title> <style>

(9)

.kotak-form {

background: #00FF00; display: inline-block; border: solid 1px #00FFFF; padding: 3px 5px;

}

.kotak-form input {

-webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ transition:2s; } .kolom-cari:hover { width:200px; background:white; transition:2s; } .tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #C82D2D; transition:2s; } .tombol-cari:hover{ background:#AD9B27; transition:2s; } </style> </head> <body>

(10)

</body> </html>

Nah Coba Teman2 save lagi kemudian klik kanan di browser teman2 pilih muat ulang atau reload, setelah itu arahin d kursor teman trus lihat d apa yang terjadi.. !!

Fuih… akhirnya tutornya selesai juga ne, mudah2n tutonya berguna ya buat teman2. Nah buat teman2 yang masih belum paham atau ada yang gak mengerti langsung komen ja y di bawah ini.. atau bagi temen2 yang pengen lebih focus lagi dibawah tutor ini saya udah buat link donlod untuk utak atik kodenya.. sampai disini dlu tutor saya kali ini sampai ketemu di tutor berikutnya dan slam sobat JaCo..

DOWNLOD CONTOH FORM SEARCH

Tentang Penulis

Irvansyah

Tertarik Dengan Web Desain, Photoshop, dan Animasi Flash. Mohon panduan Dan arahan Agar Dapat menjadi Lebih Baik dab Bisa Sharing ke sesama..