logo

Beautifull Form dr.emi with CSS

Arsip IlmuWebsite
Minggu, 31 Mei 2009 � 03.05 WIB 3 menit baca 1x dibaca
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... Photobucket Mao coba html na ? klik na disini ... Nyang mao nDownload disinih ... Sumbangkan sedikit ilmu lu, bwat kebaikan... kami tunggu di http://dremi.info/forum Woke ! Met malem mingguan yak :D thanks !
LD
Penulis
Loka Dwiartara

Saya membantu orang non-IT yang punya ide dan laptop agar bisa membangun aplikasi sederhana dengan bantuan AI, tanpa latar belakang IT, tanpa harus belajar coding dari nol.

Artikel Terkait