Download Source Code Aplikasi

Tutorial Css : Form Manis Dengan Css

Saturday, August 17th, 2019 - Tutorial CSS, Tutorial Website

th shoot - Tutorial Css : Form Manis Dengan CssHai sobat setia blog ini, kali ini aku akan membagikan tutorial css untuk membuat form website kita terlihat anggun dan elegant. dalam hal ini aku mengasumsikan bahwa anda-anda sebelumnya sudah tahu atau minimal sudah pernah mendengar apa itu css. Hampir seluruh website kini ini sudah memakai CSS untuk mempercantik tampilan website mereka. Apa sih keunggulan CSS ?? niscaya anda bertanya demikian ,

Keunggulan CSS ialah dengan css tampilan website kita menjadi indah praktis dan yummy dipandang mata, dan yang paling utama ialah website kita tidak akan berat. berat berarti ketika dibuka dalam jendela browser, loadingnya tidak akan terlalu usang 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 menurut 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 tiba 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, akhirnya akan tampak menyerupai gambar dibawah ini :
th shoot - Tutorial Css : Form Manis Dengan Css
Anda Bisa downloadnya di :  Download disini
Sekian dan terimakasih.
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
(Telah didownload 4 kali, 1x didownload hari ini)
Download Source Code Aplikasi
Tutorial Css : Form Manis Dengan Css | Ahmad Code | 4.5

 Hanya 20Ribu, Klik Disini