Bu yazımızda sizlere bir iki küçük Css taktiği ile Web Formlarımızı nasıl daha güzel hale getireceğimizi anlatacağız. Tabi önce işin mutfak kısmından başlıyoruz ve Xhtml ile formumuzu yazıyoruz…Klasik manada bir iletişim formu tasarlayalım. Bu formumuzda kullanıcımızdan adını, e-posta adresini, bırakmak istediği yorumunu alalım ve göndermek için gönderim butonumuzu koyalım. Basit olarak yapılmış ve Dreamweaver ile elde edilmiş kodlar aşağıdadır.

<form id=”form1″ name=”form1″ method=”post” action=”form.php”>
<label> Adınız </label>
<input type=”text” name=”textfield” id=”textfield” /><br />

<label> E-Posta</label>
<input type=”text” name=”textfield2″ id=”label” /><br />

<label>Yorumunuz</label>
<textarea name=”textarea” cols=”25″ rows=”5″></textarea><br />
<label>� </label><input type=”submit” value=”Gönder” class=”submit” />
</form>
Kodları kopyalayıp bir .html dokümanı içine kaydedin. Bu haliyle formumuz aşağıdaki gibi bir görünüme sahip olmalı. Bu aşamadan sonra Xhtml ile kodladığımız form öğelerinin Css ile görünümlerine şekil verme işini yapacağız.

Klasik olarak web formlarda kullandığımız ana kodların başında input, label gibi etiketler gelir. Bu etiketler hem form öğelerinin oluşturulmasında hem de hizalanmasında (aligment) kullanılır. Css dosyamızı oluşturalım ve stil.css adını vererek aşağıda yer alan kodları ekleyelim. Daha sonra kodlarımızın yaptığı işi tek tek anlatacağız.

label {
float: left;
width: 100px;
font:bold 12px arial, verdana, helvetica, sans-serif;
color:#333;
}

input {
width: 180px;
margin-bottom: 5px;
background:#fff;
color:#222;
border:2px solid #c0c0c0;
}

textarea{
width: 300px;
height: 150px;
background:#fff;
color:#222;
border:2px solid #c0c0c0;
}

.submit {
width:80px;
border:2px solid #c0c0c0;
margin-top:2px;
}

Yukarıdaki Css kodlarında gördüğünüz üzere Xhtml dosyamızda atıfta bulunduğumuz birçok etiketin Css ile belli stillere sahip olmasını sağladık. Label etiketi üzerinde hizalama yapabilmek için sola yaslı olmasını, 100 piksellik bir genişliğe sahip olmasını istedik. Bundan sonra da yazıtipi ve büyüklüğünü belirleyerek etiketimizi kapattık.

Bir diğer önemli parametre olan input etiketi içinse benzeri şeyleri yaptık. Burada dikkat edeceğiniz üzere input etiketine belirli bir genişlik verdik ve kenarlık değeri atayarak form öğesinin daha güzel görünmesini sağladık. Kenarlık rengini dilediğimiz bir renk ile değiştirebiliriz.

Benzer işlemleri ziyaretçimizin yorumlarını alacağımız Textarea etiketi için de uyguladık. Son aşamada ise gönderim butonumuza yeni bir stil tanımlayarak bu stil ile davranmasını sağladık. Böylelikle istersek gönderim butonumuza bir arkaplan resmi bile tanımlayabiliriz. Bu aşamadan sonra formumuz aşağıdaki gibi görünmeli.

Gördüğünüz üzere Xhtml dokümanımızı sadece form öğelerini göstermek için kullandık ve üzerinde herhangi bir değişiklik yapmadık. Web Formlarımızda bu gibi küçük Css değişiklikleri ile birçok farklı görünüm elde edebiliriz. Form elemanlarına yükseklik ve genişlik vererek boyutlarını ayarlayabilir, farklı kenarlık renkleri vererek görünümünü özelleştirebilir, farklı margin değerleri vererekte birbirlerinden uzaklıklarını ayarlayabilirsiniz.

Ben yine sizlere örnek olması için aynı form üzerinde bir iki değişiklik yaptım. Bu formun kaynak kodlarını örnek sayfasında bulabilirsiniz. Css ve Xhtml kodlarını alıp kullanabilir ve dilediğiniz gibi değiştirebilirsiniz.

İLERİ DÜZEY FORM TASARIM VE ÖRNEKLERİ

Css ve Xhtml birleşimi yanısıra Js, Ajax kullanılarak oluşturulmuş ve çeşitlendirilmiş onlarca form tasarımını internette bulmak mümkün. Bilhassa SmashingMagazine.com’da yer alan bu makale ve Noupe.com’da yer alan buradaki gönderi sizlere birçok örnek sunmakta. Ayrıca AjaxRain.com sitesinin Form bölümüne de göz atabilirsiniz.

Umarım Css ve Xhtml ile formlara yapılabilecek olan basit müdahalelerle nasıl güzel görünümler kazandırılabileceğini sizlere aktarabilmişimdir. Bir başka makalemizde görüşmek üzere.

Örnek Form Sayfası

Sitenin güzel tasarımı ve kolay üye olunabilmesi de artı özelliklerinden. Sanıyorum bu modelde ve anlayışta bir Türk web sitesi yok. Şayet varsa ve beni yorumlarınızla bilgilendirirseniz çok sevinirim. Unutmadan sitenin adresini tekrarlayalım; Xhtml Challenge…