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 : Nurul Imam Date : 27 - April - 2013