Tasarımını beğendiğininiz sitelerde mutlaka gözünüze çarpan noktalardan biriside formlardaki CSS uygulamaları olmuştur. En azından bu benim için öyle. Gezindiğim ve takip ettiğim sitelerde mutlaka CSS kullanımına çok dikkat ediyorum ve bunu sadece ben değil webmaster olan herkes yapıyor. Bu açıdan CSS’in önemini bir kez daha kavramış olduk.

Buradan yola çıkarak sizlerde sitenizin görünümünün sağlam olmasını isteyeceksinizdir. Bunun için bir çok şey var. İşte bunlardan biri olan “form”ları inceleyeceğiz… Kodlarımızı yazmaya başlayalaım.

1. Adım : CSS Kodlarımızı Yazalım ;

 .kutu {

background:url(kutu.png);
color:#FFFFFF;
padding-left:10px;
padding-top:15px;
padding-right:10px;
border:0px;
width:202px;
height:52;

}

“Background” komutu ile arkaplan resmimizi çağırdık. Onun hemen altında yer alan “color” komutu ile yazımızın rengini belirledik. “Padding” komutları ile yazımızın hizasını belirledik. “Border” ile kenarlıkları 0 değerine getirerek yok etmiş olduk. “Width” ve “Height” komutları ile arkaplan resmimizin boyutlarını ayarlayarak forma uygun hale getirdik.

2. Adım : HTML Kodlarımızı Yazalım ;

 <form name=”form1″ method=”post” action=”">
<input class=”kutu” type=”text” name=”textfield”>
</form>

HTML kodlarımızıda yazdıktan sonra işlemimiz bitmiş demektir. Bitmiş halini görmek için buraya tıklayıp demoya gidebilirsiniz.