Mempercantik Form Dengan Sentuhan CSS3

Kini jamannya serba menggunakan CSS3 untuk mempercantik halaman website. Bagaimana jika kali ini saya ingin berbagi sedikit trik untuk mempercantik form. Mempercantik form ini bisa di terapkan untuk Form Komentar, Pendaftaran, Login, Halaman Kontak & lain sebagainya.

Oke langsung aja ke topik pembahasan supaya jangan terlalu banyak ngelantur. Step pertama buat dulu Dokumen HTML yang berisikan struktur Form. Klo sudah punya, anda bisa tinggal modif & menyesuaikan ID / CLASSnya. Mari kita pecahkan Kode HTML & CSS yang akan saya tulis dibawah ini …

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Indahnya Form CSS3</title>
<style type="text/css">body {width:100%;height:100%;overflow:auto;clear:both;margin:0;padding:0;font-family:'Palatino Linotype',Palatino,'Zapf Calligraphic','Book Antiqua',Georgia,serif;color:#383838;letter-spacing:0.03em;background: #fff}#tengah {margin:0 auto 0 10%}form {float: left;border: 1px solid #def0ef;padding: 30px 40px 20px 40px;margin: 75px 0 75px 0;width: 715px;background: #def0ef;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#def0ef), to(#fff));background: -moz-linear-gradient(30% 40% 120deg,#fff, #def0ef);-webkit-box-shadow:0px 0 50px #def0ef;-moz-box-shadow:0px 0 50px #def0ef;box-shadow:0px 0 50px #def0ef}label {font-size: 1em;color: #333}fieldset {border: none}#data {float: left;width: 230px}#pesan {float: right;width: 405px}input, textarea {padding: 8px;margin: 4px 0 20px 0;background: #fff;width: 220px;font-size: 14px;color: #555;border: 1px #def0ef solid}textarea {width: 390px;height: 260px}input:hover, textarea:hover {background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#def0ef), to(#fff));background: -moz-linear-gradient(40% 60% 360deg,#fff, #def0ef);}input.submit {width:120px;float:right;color:dcc;margin-top:10px;background:#def0ef;border: none;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}input.submit:hover {background: #def0fe;cursor:pointer;}</style>
</head>
<body>
<section id="tengah">
<form action="#">
<fieldset id="data">
<label for="name">Name :</label>
<input type="text" name="name" value="" />
<label for="email">Email :</label>
<input type="email" name="email" value=""  />
<label for="phone">Phone :</label>
<input type="text" name="phone" value=""  />
<label for="website">Website :</label>
<input type="url" name="website" value=""  />
</fieldset>
<fieldset id="pesan">
<label for="message">Your Message:</label>
<textarea name="message" rows="0" cols="0"></textarea>
<input type="submit" value="Send Message" name="submit" class="submit" />
</fieldset>
</form>
</section>
</body>
</html>

Jika kita pecah-pecah antara kode HTML & CSSnya, Maka akan ada sekelumit kode yang harus kita sesuaikan atau membuat form baru untuk form yang sudah kita buat. Tinggal disesuaikan aja deh. Kode HTML yang saya buat sangat mudah untuk di modifikasi. Kode HTMLnya saya tulis dibawah ini …

<section id="tengah">
<form action="#">
<fieldset id="data">
<label for="name">Name :</label>
<input type="text" name="name" value="" />
<label for="email">Email :</label>
<input type="email" name="email" value=""  />
<label for="phone">Phone :</label>
<input type="text" name="phone" value=""  />
<label for="website">Website :</label>
<input type="url" name="website" value=""  />
</fieldset>
<fieldset id="pesan">
<label for="message">Your Message:</label>
<textarea name="message" rows="0" cols="0"></textarea>
<input type="submit" value="Send Message" name="submit" class="submit" />
</fieldset>
</form>
</section>

Kode HTML diatas itukan bisa kita hias dengan CSS, jadi yang perlu kita perhatikan adalah Tag HTML, ID, & Classnya. Kita tinggal menyesuaikan CSS dengan Tag HTML, ID, & Classnya untuk menghiasi dokumen HTML kita. Jika di perhatikan Kode CSS yang saya tulis di bawah ini, Pasti kita tau mana yang kita hiasi tersebut.

<style type="text/css">body {width:100%;height:100%;overflow:auto;clear:both;margin:0;padding:0;font-family:'Palatino Linotype',Palatino,'Zapf Calligraphic','Book Antiqua',Georgia,serif;color:#383838;letter-spacing:0.03em;background: #fff}#tengah {margin:0 auto 0 10%}form {float: left;border: 1px solid #def0ef;padding: 30px 40px 20px 40px;margin: 75px 0 75px 0;width: 715px;background: #def0ef;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#def0ef), to(#fff));background: -moz-linear-gradient(30% 40% 120deg,#fff, #def0ef);-webkit-box-shadow:0px 0 50px #def0ef;-moz-box-shadow:0px 0 50px #def0ef;box-shadow:0px 0 50px #def0ef}label {font-size: 1em;color: #333}fieldset {border: none}#data {float: left;width: 230px}#pesan {float: right;width: 405px}input, textarea {padding: 8px;margin: 4px 0 20px 0;background: #fff;width: 220px;font-size: 14px;color: #555;border: 1px #def0ef solid}textarea {width: 390px;height: 260px}input:hover, textarea:hover {background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#def0ef), to(#fff));background: -moz-linear-gradient(40% 60% 360deg,#fff, #def0ef);}input.submit {width:120px;float:right;color:dcc;margin-top:10px;background:#def0ef;border: none;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}input.submit:hover {background: #def0fe;cursor:pointer;}</style>

Paham atau tidak itu bukan sebuah masalah bagi saya. Itu mungkin karena anda tidak memperhatikan kodenya & hanya melakukan CP alias Copy & Paste. Tapi itu juga bisa menjadi masalah bagi saya karena bahasa penyampaian saya itu sangat sulit untuk dimengerti. Maka dari itu saya ingin terus berlatih membuat suatu penyampaian agar mudah dimengerti oleh orang lain (bukan hanya untuk dimengerti oleh saya sendiri).

Created By :        Date : 27 - April - 2013

Jasa Pembuatan Website

16 Comments

  1. syakirReply

    “bahasa penyampaian saya itu sangat sulit untuk dimengerti”
    Haha mungkin bahasa seorang programmer memang sulit dimengerti yaah. Saya juga seorang programmer + web designer walaupun masih pemula. XD
    btw, ngga ada preview design-nya tuh mas ?

    • Nurul ImamReply

      Dulu waktu artikel ini dipublish di Toto Blogengine (Bukan WordPress) ada previewnya, tapi sekarang lupa backup, tinggal langsung kopas aja sih kodenya klo mau liat previewnya :D

  2. Beginner GuitaristReply

    makasih mas ilmunya, saya lagi kerjain tugas disekolah untuk membuat website toko online, jadi form sangat dibutuhkan hehe.

    • Nurul ImamReply

      Lumayan bagus kok tampilan formnya, sukses buat tugas sekolahnya yah :)

  3. ucu nurodinReply

    kalau membuat form sendiri gimana ya

    • Nurul ImamReply

      Tinggal sesuain aja tag htmlnya

  4. Aldi UnantoReply

    Wah iya yah ini jadi sulit membacanya dan mengerti tentang sub-sub kode css nya. kayak versi minimized nih haha

    • Nurul ImamReply

      Hahaha iya yah belum sempet dirapihin :D

  5. ZedReply

    usul mas, kalo bisa sama contoh juga mas, biar bisa lihat perubahannya :)
    makasih mas artikelnya

    • Nurul ImamReply

      Dipraktekan saja mas, contohnya mungkin sudah dihapus :D

  6. ggReply

    Codenya kurang rapi mas.itu aja

    • Nurul ImamReply

      Iya memang karena ini artikel udah dulu banget

  7. davidefendiReply

    minta no tlf bisa g mas
    saya ingin belajar sama kamu mas
    bingung saya melihat artikelnya

  8. davidefendiReply

    bisa mint NO HPNY MAS … saya ingin belajar sama anda

  9. Wonk LemburReply

    cakep kang Admin., sya dah coba coppas,.
    dan ni preview hasil nya., ;)
    >> http://prntscr.com/5xc98y

  10. anggi oktoriReply

    mas nurul iman saya..ada penawaran bisa kita via emailkan..mhon di balas ke email saya ya tks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>