Beautifull Form dr.emi with CSS

Akhirnya 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=”lia@cintaku.com” 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…

Mao coba html na ? klik na disini …

Nyang mao nDownload disinih …

Related Post :)

HTML

• Cara Membuat RSS 2.0
• Membuat Form Multi Submit Dengan Multi Link
• Sejarah HTML
• belajar cara membuat table dari HTML

Posted in: HTML