Categories: Tutorial CSSTutorial Website

Tutorial Css : Form Manis Dengan Css

Hai 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 :

#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=”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>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 :

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.

Ahmad Code