Membuat Form Dengan CSS

Bijimane bikin form nyang kaga mbosenin ???? Nyang mantap dan oke punya dahh!

Nah kali ni kite bakalan bikin form make css style.. cantik dah pokokna :D kayak pacar gw.. haa...



Style na si ke gini ajah:

<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;
}
/* BOX DESIGN BY dr.emi */
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>

Nah lu bikin dah form na, nysuaiin ama style css diatas:

<div id="OrangeWhiteBox">

<div id="formM">

<h1>Komentar gw bwat eloh ! :P (bahasa abg mumet) </h1>

<form id="form1" name="form1" method="post" action="">

<label><span>Nama </span>

<input name="name2" type="text" class="inputM" id="name2" value="dr.emi" size="20" />

</label>

<label><span>E-Mail </span>

<input name="name" type="text" class="inputM" id="name" value="

\n lia@cintaku.com

This e-mail address is being protected from spambots, you need JavaScript enabled to view it

" size="20" />

</label>

<label><span>No. HP </span>

<input name="name" type="text" class="inputM" id="name" value="081300004000" size="20" />

</label>

<label><span>Website</span>

<input name="name" type="text" class="inputM" id="name" value="http://" size="41"/>

(* kosong ? yo ra popo </label>

<label><span>Komentar</span>

<textarea cols="38" rows="5" class="textareaM">sumpeh deh ! gueh naksir ama eloh ! mau jadi gebetan gue kagak ?</textarea>

</label>

<label>

<div class="spacer"><input type="submit" name="Submit" value="Kirim" class="buttonM"/>

</label>

</div>

</form>

</div>

</div>

<p class="spacerA"> </p>

<div id="GreyWhite"><a href="http://dremi.info/forum" target="_blank">Falling in love to dr.emi ? Just Click Here !</a></div>

Cepet banged !!!! ??? iye mang cpet bikin na, palagi kalo make dreamweaver, kaga usah ribet ....
ni preview na kalo udah jadi...