Membuat Form Search (CSS3 + Icon )

950

Ini sedikit penjelasan tentang cara membuat form search dengan sedikit sentuhan CSS3 dan icon search pada submit. Sekaligus sebagai jawaban dari pertanyaan yang masuk lewat akun facebook saya. Mudah – mudahan dimengerti dan tidak telat jawabannya. :sok sibuk.com:

Form search biasanya terdiri dari dua buah tipe input, yang pertama adalah Submit sebagai tombolnya dan text sebagai tempat untuk menuliskan keyword-nya. Biar sedikit agak manis jadi untuk contoh kali ini ditambah dengan sudut yang melengkung (rounded) CSS3.

Form Search tanpa Icon Search

Jika pada tombol submit-nya tidak ingin menggunakan icon search, tinggal diganti dengan kata – kata saja. Biasanya menggunakan kata “GO” atau “Search”. Pada htmlnya disimpan pada submit dengan menambahkan value="GO" atau "Search". Pada CSS untuk submit tinggal ditambahkan background. Pilih yang jelas dan kontras antara tulisan dan background biar enak dilihat.

Form Search dengan Icon Search

Untuk yang ingin memakai icon search pada submit tinggal hilangkan value pada html untuk submit. Dan untuk CSS, pada background submit tinggal menambahkan icon search. Contoh : background: #000 url(search.png) center no-repeat; (Misalkan, icon searchnya bernama ‘search.png’). Biar tambah bingung silahkan lihat contoh dibawah ini;

Buka hasilnya di browser, akan tampak kurang lebih akan tampak seperti dibawah. Untuk browser yang belum mendukung CSS3 maka tidak akan tampak lengkungan pada input. Jadi tampak seperti biasa berupa kotak.

search form

Semoga tidak puas, lain kali jika bertanya lebih baik lewat wall magzimp fans page. Siapa tahu teman saya yang lebih paham akan hal – hal seperti ini bisa memberikan jawaban yang lebih baik.

  • keren mas.. izin salin mas.. buat jadiin referensi.. jika boleh

  • tentu saja boleh 😆

  • Adam

    aq juga izin salin mass….
    moga aj ilmu yg q dapet bermanfaat…hehehe

  • dengan menggunakan CSS3 form search jadi makin atraktif, keren ni…