Ali @mintik
16 Temmuz 2020 12:22

Giriş formu

login

Css3 ve jQuery slayt kullanılarak hazırlanmış bir giriş formu örneği. İlk bakışta sadece giriş formu gibi görünen örnekte sign up linkine tıkladığınızda sayfa yenilenmeden üyelik formuna  dönüşüyor. kullanıcı adı ve şifrenin girilmesi için varolan iki adet input  alanı  sign up linkine tıklandığında üç adet input  alanı oluyor.  Never mind linkine  tıkladığınızda ise form alanı slayt olarak küçülüyor ve üç tane görünen input alanından bir tanesi kayboluyor ve geriye görünen iki tane input alanı kalıyor.

Ayrıca input  alanları için Css3 geçişler ve dönüşümler kullanılarak güze  bir  efekt eklenmiş. E-mail, şifre yada username alanlarından herhangi birine tıkladığınızda input alanındaki sol çizgi 0.5rem miktarı kalınaşıyor. Resimdede görebilirsiniz. Tıklanmış olan input alanı ile tıklanmamış olan input alanı birbirinden farklı görünüyor.

  Kullanım

  • Head etiketleri arasına eklemenz gereken bölümler.

Js adresi :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Css :

body {
 font-family: "Open Sans";
 background: #27ae60;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
 outline: none;
}
form {
 padding: 1rem;
 background: #fff;
 border-radius: 0.25rem;
 box-shadow: 0rem 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.35);
}
input {
 margin-bottom: 1rem;
 display: block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
input:not([type=submit]) {
 text-align: center;
 padding: 0.25rem 0.5rem;
 border-radius: 0.15rem;
 border: 2px solid #2cc36b;
 -webkit-transition: border 0.5s ease;
 -moz-transition: border 0.5s ease;
 -o-transition: border 0.5s ease;
 transition: border 0.5s ease;
 box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.15) inset;
 font-size: 1.5rem;
 font-weight: 300;
 width: 100%;
}
input:not([type=submit]):focus {
 border-left-width: 0.5rem;
}
.signup-fields {
 display: none;
}
input[type=submit] {
 border: 0rem;
 width: 100%;
 background-color: #27ae60;
 color: white;
 margin-bottom: 0rem;
 font-size: 1.4rem;
 padding: 0.3rem 0rem;
}
input[type=submit]:hover {
 cursor: pointer;
 background-color: #36d278;
 -webkit-transition: background 0.5s ease;
}
input[type=submit]:active {
 -webkit-transition-duration: 0s;
 background-color: #229955;
}
#signup.on {
 color: #fff;
}
.main {
 margin: 2.5rem auto 0rem;
 width: 16rem;
}
.main .extras {
 text-align: center;
 font-size: 0.8rem;
 margin-top: 1rem;
}
.main .extras a {
 text-decoration: none;
 font-weight: 300;
 color: #75e0a2;
}
.main .extras a:hover {
 color: #fff;
 text-decoration: underline;
}

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<section>
 <div class="main">
 <form method="POST" action="" accept-charset="UTF-8">
 <input placeholder="username" name="username" type="text" />
 <input placeholder="password" name="password" type="password" value="" />
 <div class="signup-fields">
 <input id="email" placeholder="email" name="email" type="email" value="" />
 </div>
 <input id="submit" type="submit" value="log in" />
 </form>
 <div class="extras">
 <a id="signup" href="#">sign up</a>
 </div>
 </div>
</section>

 

JavaScript :

<script>
 $('#signup').click(function(){
 if($(this).hasClass("on"))
 {
 $(".signup-fields").slideUp();
 $(this).removeClass('on').html("sign up");
 $('#submit').attr('value','log in');
 $('#verb').html('continue');
 }
 else
 { 
 $(".signup-fields").slideDown();
 $(this).addClass('on').html("nevermind, log in");
 $('#submit').attr('value','sign up');
 $('#verb').html('begin');
 }
});
 </script>

 

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • sahra:

    Güzel ve basit kullanım. Oldukça işime yarayacak....

  • isimsiz:

    Senin sitenden buyurindir.org sitemize köpek gibi link çıkışı yapılmış?...

  • fhghg:

    YouPhpTube scriptini kullanan hazır bi site var mı peki varsa ismi nedir?...

  • Ali:

    Eski butonlarda sorun vardı diye yenilerini ekledim. Acaba sende hala eski buto...

  • HASBA:

    hocam nasıl alıcam demoya indire başıyorum hiç birşey olmuyor...

  • Araç çubuğuna atla