Form alanlarında biz aksini belirtmedikçe tüm alanların doldurulmasına gerek yoktur. Bu nedenle tasarımda formlar her zaman üzerinde iki kere düşünülmesi gereken elemanlardır. Formda istenilen bir değerin girilmemesi durumunda verilecek olan bir uyarı kullanıcı/ziyaretçiyi bilgilendirir ve buna göre hareket etmesi sağlanır. Bilgi girişinin sağlandığı bu elemanlar bu yüzden her zaman suistimale açıktırlar. Adobe Dreamweaver CS4 kullanarak önce basit bir form yapacağız ve sonra bu formda boş bırakılan yerlerde bir uyarı mesajının görünmesini sağlayacağız. Dilerseniz hemen başlayalım.

Öncelikle Dreamweaver’da boş bir Html dosya açalım. Sonra bir form oluşturalım. Bu formda kullanıcıdan adını ve e-posta adresini yazmasını isteyelim. 2 tane metin girdi elemanı ekleyelim. Sonrasında form menüsünden gönderme butonumuzu koyarak formumuzu tamamlayalım.

Hemen hemen aşağıdaki gibi bir form alanına sahip olmamız gerekiyor.

Şimdi fare ile formumuzun Ad soyad isteyen İnput bölümüne bir kere tıklayıp seçili hale getiriyoruz. Bu aşamadan sonra üst menüden Spry bölümüne geliyoruz. Burada Spry Validation Text Field butonuna tıklıyoruz. Böylece metin girdi alanımızda Spry js kullanarak bir form kontrolü sağlamış olduk. Aynı işlemi e-posta adresini istediğimiz metin girdi alanı için de yapalım.

Dokümanı .html uzantılı olarak kaydedelim ve tarayıcımızda izleyelim. Ad soyad veya e-posta alanlarından birini boş bırakıp formu onaylamaya çalıştığınızda form ögesinin yanında “A value is required” mesajı alacağız.

Dikkat ettiyseniz forma Text validation opsiyonunu eklediğimizde SpryValidationTextField.js ve SpryValitadionTextField.css isimli iki dosya da oluşuyor. Formun kontrolünü sağlayan ana js dosyası ve stilleri barındıran stil dosyası da çalışmamızın olduğu dizinde kayıt oluyor.

Stil dosyasında yapacağınız değişikliklerle uyarı mesajının daha iyi görünmesini sağlayabilir ve görünümünü özelleştirebilirsiniz. Sadece metin girdi alanlarında değil Textarea, Radio buton gibi diğer form ögelerinde de aynı kontrolü sağlayabilirsiniz. Umarım yararlı olur.

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ı