Web sitelerimizde yer alan formları submit ederken butonlar yerine sitemizde yer alan daha önce css leri hazırlanmış olan linkler yer alabilir. Hazır linklerimiz dururken css leri ile hazırlanmış olarak birdaha yeniden botunların css lerini ayarlamakla ugraşmak istemiyebiliriz. Bu örneğimizde linklere submit özelliği vermeyi ögreneceğiz.

İlk olarak linkimizden başlayalım.

<a href="javascript:document.login.submit()" class="join">Giriş</a>

Web projelerimizde yer alan ürünlere veya galerilere resimleri yüklemek için klasil dosya yükleme, dosyalar yüklenirken bir seferde sınırlandırma getirerek yükleme yapmamızı sağlıyor. Bir foto galeriye normal form file sistemi ile 1,3,5, gibi sınırlı yülemeler yapabiliyoruz. Bu örneğimize sayfamızı yenilemeden ajax ile fotograf dosyalarını yükleme işlemini uygulayacağız. Bu uygulamadaki asıl amaç çoklu dosya yükleme işlemleri yapmayı öğrenmek.

Web sistemlerimizde yer alan iletişim formlarını jquery ve ajax ile daha görsel ve kullanışlı bir hale getirebiliriz. Bu örneğimizde buton veya linke tıklanıldığında iletişim formumuz ekrana geliyor ve gerekli alanların doğruluk kontrolü yapılarak eposta yoluyoruz.Bu iletişim formu SimpleModal üzerine kurulmuştur. OnOpen, onShow ve onClose geriçağırımlarının kullanımı yanı sıra SimpleModal ile Ajax kullanımı gösterir.

Web sitemizde yer alan; ürün, haber, kitap, hikaye vb gibi verilere kullanıcıların yorum yapmaları ve düşünceleri yazmalarını sağlayan formlar oldukca popülerdir. Bu örnegimizde kullanıcı adı ve mesajını yazdığı anda sayfa yenilemesi olmadan Ajax ile mesahı veri tabanına kaydediyoruz ve mesajların yer aldığı “Son Mesajlar” bölümünde gösteriyoruz.

Formlarımızda yer alan bölümlerin eksiksiz ve uygunbir şekilde kullanıcı tarafından doldurulup doldurulmadığını post edildikten sonra kontrol edebileceğimiz gibi, kullanıcı formu doldururken de kontrol edebiliriz. Bu örneğimizde kullanıcı verileri girip onaylamadan önce formda boş veya yalnış bir veri varmı kontrol edeceğiz.

Javascript Kodlarımız:

Web sitelerimizde yer alan kullanıcı kayıt, login veya adres gibi formlarımızın tasarımları , efektleri, sitemiz ile uyumu, kullanış açısından rahatlığı bizimbir artımızdır. Bu örneğimizde css ve jquery ile derlenmiş bir form tasarımı örneği yapacağız.

CSS Kodlarımız;

<style type="text/css">
body                       { font:12px/1.3 Arial, Sans-serif; }
form                       { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div                        { clear:both;position:relative;margin:0 0 10px; }
label                      { cursor:pointer;display:block; }
input[type="text"]         { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
input[type="text"]:focus   { border-color:#777; }
input[name="zip"]          { width:150px; }

/* submit button */
input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }
</style>

Bu uygulamamızda sitemizde ve projelerimizde Accordion (açılır) bölümler oluşturmayı öğreneceğiz.
Uygulamamızda açılır uygulama olarak bir form oluşturuyoruz. Fromumuz bir file upload formudur.
Uygulamamızda aşağıdaki javascript ile açılır formumuzun kontrolünü sağlıyoruz. Formumuz sayfa açıldığında gizli olarak geliyor, class’ı warnlink olan link tıklanıldığında aşağıdaki javascript çalışıyor ve form ekrana geliyor .

<script type="text/javascript">
$(document).ready(function(){

	$(".warnlink").click(function(){
		$(".selldiv").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});

});
</script>