Form elementlerinin CSS tabanlı olarak sunulması tasarımsal öğelerin ön plana çıkartılması ile son yıllarda sıkça karşılaşıyoruz.
Web 2.0'ın getirisinden bu yönde çok yararlandık. Bakalım web 3.0 ne gibi gelişmeler getirecek.
CSS ile basit bir iletişim formu hazırlayalım.
Örneğimiz basit olacak ve günlük yorucu yazılım işlerinin ardından hafifletici bir etki yapacak :)
En azından ben CSS ile uzun dönem kodlamaların ardından ayırdığım birkaç dakikalık uygulamalar yaparak günlük stresimi atıyorum.
İlk olarak HTML tarafında oluşturacağımız form elementlerine biçim kazandıralım.
CSS dosyamızı hazırlayalım.
#iletisim{
margin:29px 0 26px 0;width:352px;float:left; font-size:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#FAF8F2; color:#313131;
}
#iletisim p{
background:url(images/iletisim-top.gif) no-repeat 0 0; width:352px; height:14px;
}
#iletisim p.bu{
background:url(images/iletisim-button.gif) no-repeat 0 0; width:352px; height:14px;
}
#iletisim form {
margin:0 0 0 0; height:315px; width:318px; border-left:#CBBD9A 1px solid; border-right:#CBBD9A 1px solid;
padding:11px 0 0 32px; font-size:0;
}
#iletisim form h2{
background:url(images/iletisim_icon.gif) no-repeat 0 6px #FAF8F2; font:normal 24px/29px Arial, Helvetica, sans-serif;
padding:0 0 0 24px; margin:0 0 11px 0; height:29px; width:191px; display:block; text-indent:0px; color:#765914;
}
#iletisim form label{
font-size:11px; text-transform:uppercase; line-height:14px; font-weight:bold; float:left; margin:5px 15px 0 0; padding:0 0 0 0;
display:block; width:73px;
}
#iletisim form input{
background:url(images/iletisim_input.gif) no-repeat 0 0 #E9DFC6 ; padding:1px; display:block; width:189px; height:22px;
border:none; float:left; margin:0 0 12px 0; color:#000000;
}
#iletisim form label.comment{
background:url(images/comm.gif) no-repeat 2px 3px; margin:0; padding:0 0 0 17px; font-size:11px;
text-transform:uppercase; line-height:14px; font-weight:bold; float:left; width:61px;
}
#iletisim form textarea{
background:url(images/text_area.gif) no-repeat 0 0 #E9DFC6; width:191px; height:83px; border:none; color:#000000;
margin:0 0 0 10px; float:left;
}
#iletisim form input.submit{
background:url(images/submit.gif) no-repeat 0 0; width:90px; height:10px; border:none; cursor:pointer;
margin:13px 0 0 0; font-size:0; padding:0 0px 0 0; float:right;
}
Şimdi neler yaptık kısaca değinelim.
CSS ile biraz uğraşmış olanlar için gayet açık şekilde görülebiliniyor.
Formun iletişim adında idlerinden oluşan ve p,input gibi elementlere yönelecek olan değerler tanımladım.
Bunlara boyutlar kazandırıp küçük gif dosyalarıyla biçimlendiriyoruz.
Örnek gif dosyalarımız şu şekilde :
Nesneleri yerleştirirken konumlarını belirttim.
Floatlar ile konumlarını belirledikten sonra margin ve paddingler ile bulunduklara noktalara uzaklıklarını ve diğer elementler ile aralarındaki mesafeleri belirledim.
no-repeat olarak tekrarlanmayacakları noktaları belirledim.
CSS dosyasının yapısını incelediğinizde basit bir yapıda hazırlandığı ve anlaşılabilirliği yüksektir.
Bu işlemin ardından HTML tarafında formumuzu oluşturalım.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<div id="iletisim">
<p></p>
<form name="iletisim" method="post" action="" >
<h2>İletişim Formu</h2>
<label>Adınız:</label>
<input type="text" name="textbox" value="" maxlength="25" />
<label>Soyadınız:</label>
<input type="text" name="textbox" value="" maxlength="25" />
<label>Email:</label>
<input type="text" name="textbox" value="" maxlength="50" />
<label class="comment">Mesaj:</label>
<textarea name="" cols="" rows=""></textarea>
<input type="submit" name="submit" class="submit" value="Gönder" />
</form>
<p class="bu"></p>
</div>
</html>
style.css adındaki css dosyamızı import ettikten sonra form elementlerimizi tanımlıyoruz.
Label nesnesini biçimlendirmeleri daha şık ve uyumlu olması için tercih ettim.
maxlength olarak en fazla girilebilecek uzunluğu belirttim.
CSS tarafında tanımladığımız idlerimizi ve classlarımızı da elementlerin başında belirttim.
İşte çalışmamızın son hali :)
Kolay Gelsin ...