WEB DİZAYN
Form Box
Form Box uygulaması tamamen bize yeni bir alternatif sağlıyor.Değişik tasarımlar yapmamızı sağlayan bu jQuery uygulaması oldukça kullanışlı buluyorum. Menü kısmından kullanıcı girişi form girişi yapmamızı sağlıyor. Head kısmına aşağıdaki kodları yerleştiriyoruz.
< script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'> script>
< script type='text/javascript' src='js/formbox.js'>< /script>
< link rel="stylesheet" type="text/css" href="css/style.css" />
Sonrada Body kısmına bu kod parçasını ekliyoruz ve bitti. Sadece hangi programlama ile yazacaksınız Veritabanı kodlarını eklemeniz size yeterli olacaktır.< script type='text/javascript' src='js/formbox.js'>< /script>
< link rel="stylesheet" type="text/css" href="css/style.css" />
< div id="edgesline" class="edges">< /div>
< div id="tabs">
< ul id="tabMenu">
< li class="regular">< a href="#">AnaSayfa< /a>< /li>
< li class="dropdown">< a href="#tab1">GİRİŞ< /a>< /li>
< li class="dropdown">< a href="#tab2">Kaydol< /a>< /li>
< li class="dropdown">< a href="#tab3">Şifremi Unuttum< /a>< /li>
< li class="regular">< a href="home.html">Galeri< /a>< /li>
< li class="regular">< a href="home.html">Hakkımda< /a>< /li>
< li class="dropdown">< a href="#tab4">İletişim< /a>< /li>
< li class="edges"> < /li>
< /ul>
< /div>
< div id="tabContainer">
< ul id="tabPanes">
< li id="tab1">
< p>
< div class="formcontainer">
< div class="text">
< label for="username">Kullanıcı Adı< /label>
< input type="text" name="username" id="username" alt="Kayıt olduğunuz kullanıcı adını girmelisiniz.">
< /div>
< div class="text">
< label for="password">Parola< /label>
< input type="text" name="password" id="password" alt="Kayıt olduğunuz parolayı girmelisiniz.">
< /div>
< div class="text">
< br>
< input type="checkbox" name="rememberme" id="rememberme"> Hatıla Beni
< /div>
< /div>
< center>
< div class="block" id="bluebutton">
< button>Giriş< /button>
< /div>
< /center>
< /p>
< /li>
< li id="tab2">
< p>
< div class=" formcontainer">
< div class="text">
< label for="username">Kullanıcı Adı< /label>
< input type="text" name="desusername" id="desusername" alt="Min. 5 karakter ve bir tane sayı olmalıdır.">
< /div>
< div class="text">
< label for="despassword">Parola< /label>
< input type="text" name="despassword" id="despassword" alt="Min. 5 karakter ve bir tane sayı olmalıdır.">
< /div>
< div class="text">
< label for="password">Re-Parola< /label>
< input type="text" name="confpassword" id="confpassword" alt="Parola ile aynı olmalıdır.">
< /div>
< /div>
< center>
< div class="block" id="bluebutton">
< button>Kayıt button>
< /div>
< /center>
< /p>
< /li>
< p>
< div class="formcontainer">
< div class="text">
< label for="username">Kullanıcı Adı< /label>
< input type="text" name="username" id="username" alt="Göndermeden önce kullanıcı adını dikkaTLi girmelisiniz.">
< /div>
< br>
Kullanıcı adını girdikten sonra size en yakın zamanda parolanızı göndereceğiz...
< center>
< div class="block" id="bluebutton">
< button>Gönder< /button>
< /div>
< /center>
< /p>
< /li>
< li id="tab4">
< p>
< div class="formcontainer">
< div class="text">
Email Adresiniz: label>
< input type="text" name="youremail" id="youremail" alt="Please enter a valid e-mail address so we can reply back to you">
< /div>
< div class="text">
< label for="msgsubject">Konu
< input type="text" name="msgsubject" id="msgsubject" alt="What is your message concerning?">
< /div>
< div class="text">
< label for="password">Mesaj< /label>
< input type="text" name="msgtext" id="msgtext" alt="Your Message (Please keep it short). We'll get back to you asap!">
< /div>
< /div>
< center>
< div class="block" id="bluebutton">
< button>Gönder
< /div>
< /center>
< /div>
< /p>
< / li>
< /ul>
< /div>
< div id="tabs">
< ul id="tabMenu">
< li class="regular">< a href="#">AnaSayfa< /a>< /li>
< li class="dropdown">< a href="#tab1">GİRİŞ< /a>< /li>
< li class="dropdown">< a href="#tab2">Kaydol< /a>< /li>
< li class="dropdown">< a href="#tab3">Şifremi Unuttum< /a>< /li>
< li class="regular">< a href="home.html">Galeri< /a>< /li>
< li class="regular">< a href="home.html">Hakkımda< /a>< /li>
< li class="dropdown">< a href="#tab4">İletişim< /a>< /li>
< li class="edges"> < /li>
< /ul>
< /div>
< div id="tabContainer">
< ul id="tabPanes">
< li id="tab1">
< p>
< div class="formcontainer">
< div class="text">
< label for="username">Kullanıcı Adı< /label>
< input type="text" name="username" id="username" alt="Kayıt olduğunuz kullanıcı adını girmelisiniz.">
< /div>
< div class="text">
< label for="password">Parola< /label>
< input type="text" name="password" id="password" alt="Kayıt olduğunuz parolayı girmelisiniz.">
< /div>
< div class="text">
< br>
< input type="checkbox" name="rememberme" id="rememberme"> Hatıla Beni
< /div>
< /div>
< center>
< div class="block" id="bluebutton">
< button>Giriş< /button>
< /div>
< /center>
< /p>
< /li>
< li id="tab2">
< p>
< div class=" formcontainer">
< div class="text">
< label for="username">Kullanıcı Adı< /label>
< input type="text" name="desusername" id="desusername" alt="Min. 5 karakter ve bir tane sayı olmalıdır.">
< /div>
< div class="text">
< label for="despassword">Parola< /label>
< input type="text" name="despassword" id="despassword" alt="Min. 5 karakter ve bir tane sayı olmalıdır.">
< /div>
< div class="text">
< label for="password">Re-Parola< /label>
< input type="text" name="confpassword" id="confpassword" alt="Parola ile aynı olmalıdır.">
< /div>
< /div>
< center>
< div class="block" id="bluebutton">
< button>Kayıt button>
< /div>
< /center>
< /p>
< /li>
< div class="formcontainer">
< div class="text">
< label for="username">Kullanıcı Adı< /label>
< input type="text" name="username" id="username" alt="Göndermeden önce kullanıcı adını dikkaTLi girmelisiniz.">
< /div>
< br>
Kullanıcı adını girdikten sonra size en yakın zamanda parolanızı göndereceğiz...
< center>
< div class="block" id="bluebutton">
< button>Gönder< /button>
< /div>
< /center>
< /p>
< /li>
< li id="tab4">
< p>
< div class="formcontainer">
< div class="text">
< input type="text" name="youremail" id="youremail" alt="Please enter a valid e-mail address so we can reply back to you">
< /div>
< div class="text">
< label for="msgsubject">Konu
< input type="text" name="msgsubject" id="msgsubject" alt="What is your message concerning?">
< /div>
< div class="text">
< label for="password">Mesaj< /label>
< input type="text" name="msgtext" id="msgtext" alt="Your Message (Please keep it short). We'll get back to you asap!">
< /div>
< /div>
< center>
< div class="block" id="bluebutton">
< button>Gönder
< /div>
< /center>
< /div>
< /p>
< / li>
< /ul>
< /div>
Aşağıda Demo kısmından bakabilir ve demoyuda indirebilirsiniz...




