Jquery Fancy Sliding Form (Jquery Form) | Forumlar - Seditio Cms

Cevapla

Yeni Konu

Yazd�r

Mail Yolla

Jquery Fancy Sliding Form (Jquery Form) on Facebook

Jquery Fancy Sliding Form (Jquery Form)

#6179

2011-10-13 01:11 GMT

Kaan

Administrators

User is:

Posts: 2772

Ülke:

İstanbul - 34

Meslek: Serbest Meslek

Age: 43

Jquery Fancy Sliding Form (Jquery 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.

?rn?imiz 5 tabl? bir jquery form niteli?inde. Her tabda alanlar?n doldurmam?z gerekmekte doldurmad?g?m?z takd?rde en sun 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.

tml]<!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

ne;

text-transform

percase;

}

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 class="step">

<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 class="step">

<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 class="step">

<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 class="step">

<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 class="step">

<legend>G?nder</legend>

<p>

T?m alanlar?n dolu olup olmad?g?n? kontrol ediniz.

</p>

<p class="submit">

<button id="registerButton" type="submit">Kay?t Ol</button>

</p>

</fieldset>

</form>

</div>

<div id="navigation" style="display

ne;">

<ul>

<li class="selected">

<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>

Konuyla İlgili Diğer Başlıklar
Jquery: Date Picker (Takvim) uygulaması
Facebook Style TextArea with Wall Posting Script using jQuery PH
Facebook Style Wall Posting and Comments System using jQuery PHP
Facebook Like URL data Extract Using jQuery PHP and Ajax
Facebook like Autosuggestion with jQuery, Ajax and PHP

Emlak, Oto Galeri, Rent A Car, ?iir, Edebiyat Script Sipari?lerinizi Verebilirsiniz.
Detaylar ??in: kaan@ntka.org

Seditio 170 ?ndir
Capte M?zik ?ndir
Seditio Toolbar ?ndir