Jquery Fancy Sliding Form (Jquery Form)

Slider Form
Jquey web geliştiriciler için oldukca kullanışlı bir kütüphane. Jquery bazen hayal gücü sınırlarımız zorlamamıza neden olmakta. Sistemlerimizde kullana bileceğimiz insan kaynakları, iletişim, sipariş vb. formları bugunkü örnegimizle dahada geliştire bilir ve hızlı çözümler sunabiliriz.

Örneğimiz 5 sekmeli bir jquery form niteliğinde.  Her sekmede alanların doldurmamız gerekmekte doldurmadığımız takdirde en son bölümde gönder dediğimizde java script uyarısı karşımıza geliyor ve boş geçmiş olduğumuz alanlar açık pembe ile belirgin hale geliyor.

Boş geçilen alanlar tab içerisinde oldugunda fark edilmesi güç bunu önlemek içinde tabların üzerine bir sonraki taba geçildiginde ikon beliriyor ve bu ikona göre nerede hata yapmış olduğumuzu görebiliyoruz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fancy Sliding Form with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/>
<meta name="description" content="Fancy Sliding Form with jQuery" />
<meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sliding.form.js"></script>
</head>
<style>
span.reference{
position:fixed;
left:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;

}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<body>
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset>
<legend>Hesap</legend>
<p>
<label for="username">Kullanıcı Adınız</label>
<input id="username" name="username" />
</p>
<p>
<label for="email">E posta</label>
<input id="email" name="email" placeholder="info@tympanus.net" type="email" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Şifre</label>
<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Kişisel Bilgiler</legend>
<p>
<label for="name">Adınız</label>
<input id="name" name="name" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="country">Ülke</label>
<input id="country" name="country" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="phone">Telefon</label>
<input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="website">Website</label>
<input id="website" name="website" placeholder="e.g. http://www.gumusluoglu.com" type="web" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Ödeme</legend>
<p>
<label for="cardtype">Kart</label>
<select id="cardtype" name="cardtype">
<option>Visa</option>
<option>Mastercard</option>
<option>American Express</option>
</select>
</p>
<p>
<label for="cardnumber">Kart Numarası</label>
<input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="secure">Güvenlik Kodu</label>
<input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="namecard">Kart üzerindeki isim</label>
<input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Ayarları</legend>
<p>
<label for="newsletter">Bülten</label>
<select id="newsletter" name="newsletter">
<option value="Daily" selected>Günlük</option>
<option value="Weekly">Haftalık</option>
<option value="Monthly">Aylık</option>
<option value="Never">Asla</option>
</select>
</p>
<p>
<label for="updates">Güncellemeler</label>
<select id="updates" name="updates">
<option value="1" selected>Paket 1</option>
<option value="2">Paket 2</option>
<option value="0">Güncelleme istemiyorum</option>
</select>
</p>
<p>
<label for="tagname">Bülten Etiket</label>
<input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Gönder</legend>
<p>
Tüm alanların dolu olup olmadıgını kontrol ediniz.
</p>
<p>
<button id="registerButton" type="submit">Kayıt Ol</button>
</p>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li>
<a href="#">Hesap</a>
</li>
<li>
<a href="#">Kişisel Bilgiler</a>
</li>
<li>
<a href="#">Ödeme</a>
</li>
<li>
<a href="#">Ayarlar</a>
</li>
<li>
<a href="#">Gönder</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Demo

2 thoughts on “Jquery Fancy Sliding Form (Jquery Form)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir