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.
<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 */
<!–
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 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>
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>
<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>
<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>
<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>
<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>
<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>
</div>
Jika dijalankan pada browser, hasilnya akan tampak seperti gambar dibawah ini :
Anda Bisa downloadnya di : Download disini
Sekian dan terimakasih.
Baca Juga Tutorial Dibawah ini
Label:
Tutorial CSS,
Tutorial Website
Judul : Tutorial CSS : Form Cantik Dengan CSS
Ditulis oleh Ivan Silalahi
Rating postingan ini 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://kumpulantutorialwebsite.blogspot.com/2012/11/tutorial-css-form-cantik-dengan-css.html. Terima kasih sudah singgah membaca artikel ini. Jangan lupa like dan sharenya serta komentarnyaDitulis oleh Ivan Silalahi
Rating postingan ini 5 dari 5
5 komentar:
good
mantap dah.. tipsnya
terimakasih atas infonya
terimakasih atas infonya
mantrap
My blog
My Campus
Posting Komentar