Tutorial CSS : Form Cantik Dengan CSS

Hai sahabat setia blog ini, kali ini saya akan membagikan tutorial css untuk membuat form website kita terlihat cantik dan elegant. dalam hal ini saya mengasumsikan bahwa anda-anda sebelumnya sudah tahu atau minimal sudah pernah mendengar apa itu css. Hampir seluruh website sekarang ini sudah menggunakan CSS untuk mempercantik tampilan website mereka. Apa sih keunggulan CSS ?? pasti anda bertanya demikian ,

Keunggulan CSS adalah dengan css tampilan website kita menjadi indah simpel dan enak dipandang mata, dan yang paling utama adalah website kita tidak akan berat. berat berarti saat dibuka dalam jendela browser, loadingnya tidak akan terlalu lama atau sangat ringan.

Berikut Code CSS nya yang telah dipadukan dengan HTML :

<style type=”text/css”>
<!–
body,td,th {
font-family: Trebuchet MS;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #0099FF;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #0099FF;
}
a:hover {
text-decoration: none;
color: #009900;
}
a:active {
text-decoration: underline;
color: #0099FF;
}
#OrangeWhiteBox {
background-color:#FFFBF2;
padding: 5px;
margin-bottom:5px;
border:2px solid #FFE9D2;
width:550px;
}
#GreyWhite {
background-color: #FBFBFB;
padding: 5px;
margin-bottom:5px;
border:2px solid #F4F4F4;
width:550px;
text-align:center;
}
/* Design by ivan */

#formM { margin:0px;padding-left:20px;padding-bottom:20px;}
#formM h1 { padding-left:72px;padding-top:10px; font-size:18px;padding-bottom:10px; color:#990000; }
#formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
#formM .inputM{
border:1px solid #C0C0C0;
color:#666666;
background:url(beautifull-form.gif) 0 0 repeat-x; /*support IE, FF*/
height:26px;
font-size:16px;
}
#formM .textareaM{
border:1px solid #C0C0C0;
color:#666666;
font-size:16px;
}
#formM label{
display:block;
margin-bottom:10px;
color:#666666;
}

#formM label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
font-size:16px;
}
#formM .spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
#formM .buttonM{
background:url(coklat.gif) 0 0 no-repeat;
border:1px solid #3b6e22;
height:26px; width:100px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
.spacerA { clear:both; height:20px; margin:0px; padding:0px; }
–>
</style>

Sekarang mari kita buat formnya berdasarkan style css diatas:

<div id=”OrangeWhiteBox”>

<div id=”formM”>
<h1>Kumpulan Tutorial Website </h1>
<form id=”form1″ name=”form1″ method=”post” action=”">
<label><span>Nama </span>
<input name=”name2″ type=”text” class=”inputM” id=”name2″ value=”Ivan silalahi” size=”20″ />
</label>

<label><span>E-Mail </span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”ivan@email.com” size=”20″ />
</label>

<label><span>No. HP </span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”081368756432″ size=”20″ />
</label>

<label><span>Website</span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”http://” size=”41″/>
</label>

<label><span>Komentar</span>
<textarea cols=”38″ rows=”5″ class=”textareaM”>Selamat datang di kumpulan tutorial website</textarea>
</label>
<label>
<div class=”spacer”><input type=”submit” name=”Submit” value=”Kirim” class=”buttonM”/>
</label>
</div>

</form>
</div>

</div>

Jika dijalankan pada browser, hasilnya akan tampak seperti gambar dibawah ini :

Anda Bisa downloadnya di :  Download disini

Sekian dan terimakasih.