Tutorial CSS : Form Cantik Dengan CSS

Tutorial CSS : Form Cantik Dengan CSS - Hallo sahabat RMC-Network, Pada Artikel yang anda baca kali ini dengan judul Tutorial CSS : Form Cantik Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. selamat membaca.

Hai sahabat setia blog ini, kali ini saya akan membagikan tutorial css untuk membuat form website kita terlihat cantik dan elegant. dalam hal ini saya mengasumsikan bahwa anda-anda sebelumnya sudah tahu atau minimal sudah pernah mendengar apa itu css. Hampir seluruh website sekarang ini sudah menggunakan CSS untuk mempercantik tampilan website mereka. Apa sih keunggulan CSS ?? pasti anda bertanya demikian ,

Keunggulan CSS adalah dengan css tampilan website kita menjadi indah simpel dan enak dipandang mata, dan yang paling utama adalah website kita tidak akan berat. berat berarti saat dibuka dalam jendela browser, loadingnya tidak akan terlalu lama 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 berdasarkan 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 datang 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, hasilnya akan tampak seperti gambar dibawah ini :

Anda Bisa downloadnya di :  Download disini

Sekian dan terimakasih.

Demikianlah Artikel Tutorial CSS : Form Cantik Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.