Jquery ile Basit Bir Form Uygulaması

JQuerynin focus ve blur özelliklerini kullanmak

Jquery ile Basit Bir Form Uygulaması

 HTML Kodu:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="bes.css" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

        <script type="text/javascript">
            <!--
              $(document).ready(
                   function() {
                       $("input[type=text]").fadeTo("fast", 0.4);
                       
                       $("input[type=text]").focus(function(){
                           $(this).fadeTo("fast", 1).css("border", "1px solid orange");
                       });
                       
                       $("input[type=text]").blur(function(){
                           $(this).fadeTo("slow", 0.5).css("border", "none");
                       });
                       
                   });
               //-->
        </script>
    </head>
    <body>

        <form name="uyelik" method="post" action="uye_kayit.php">

            <div id="form1">

                <ul class="form_sutun">
                    <li>Adı:</li>
                    <li><input type="text" name="ad" /></li>
                    <li>Soyadı:</li>
                    <li><input type="text" name="soyad" /></li>
                    <li>Adresi:</li>
                    <li><input type="text" name="adres" /></li>
                    <li>Telefonu:</li>
                    <li><input type="text" name="telefon" /></li>
                    <li>Memleketi:</li>
                    <li><input type="text" name="memleketi" /></li>
                </ul>

                <ul class="form_sutun">
                    <li>Mezuniyeti:</li>
                    <li><input type="text" name="ad" /></li>
                    <li>Doğum Tarihi:</li>
                    <li><input type="text" name="soyad" /></li>
                    <li>Kan Grubu:</li>
                    <li><input type="text" name="adres" /></li>
                    <li><input type="submit" value="Gönder" /></li>
                </ul>

            </div>

        </form>

    </body>
</html>
 

  CSS Kodu:

#form1 {
    width:800px;
    height: 300px;
    background-color: bisque;
    margin: 30px auto;
}
.form_sutun {
    width: 40%;
    float: left;
    margin: 20px;
    background-color: cornflowerblue;
    list-style: none;
    padding: 20px;
}

#form1 input[type=text] {
    background-color: chartreuse;
    border: none;
}

#form1 input[type=submit] {
    background-color: goldenrod;
    border: none;
}

 

Jquery ile Basit Bir Form Uygulaması

16,639 Okunma Henüz yorum yapılmamış 17/01/2014 18:31:04 17/01/2014 18:33:35

Yorumunuzu Ekleyin
Görsel Liste


JQuery İle Basit Slider Yapımı

Kendi Kendinize

29,014 okuma, 15/01/2014

JQuery İle Basit Slider Yapımı
Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

28,353 okuma,

Easy Slider Jquery Plugin
Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

24,659 okuma,

Jquery Tab Menu Örneği
Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

24,489 okuma,

Kapsayan Tagı Silmek unwrap()
Jquery ile Basit Bir Slider

Jquery kullanarak yapılmış basit bir slider örneği

22,831 okuma,

Jquery ile Basit Bir Slider
Jquery İle Resim Boyutlandırma

Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.

22,007 okuma,

Jquery İle Resim Boyutlandırma
Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

18,564 okuma,

Jquery ile Resim Ortalamak
JQuery Seçicilerini Kullanmak (JQuery Selectors)

Bir HTML nesnesini, bir CSS clasını, bir ID ye sahip elemanı veya bir name'e sahip form nesnesini seçip nasıl JQuery efekti verebiliriz?

18,120 okuma,

JQuery Seçicilerini Kullanmak (JQuery Selectors)
Jquery ile Sürüklenebilir(Dragable) Uygulamalar Yapmak

jquery-ui eklentisini kullanarak sürüklenebilir (Dragable) bir uygulama nasıl yapılır?

15,544 okuma, 20/02/2014

Jquery ile Sürüklenebilir(Dragable) Uygulamalar Yapmak
JQuery ile Yapılmış Basit Image Zoom Örneği

Resmin üzerine gelince yan pencerede resmin zoom yapılması işlemi. w3school uygulamasının geliştirilmiş halidir.

2,775 okuma, 16/06/2020

JQuery ile Yapılmış Basit Image Zoom Örneği
Yükleniyor...
    Yükleniyor...