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ı

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...