Jquery'de kayıt ve yetkilendirme formu. PHP, MySQL ve jQuery kullanarak harika bir kayıt sistemi oluşturma. Fantezi AJAX İletişim Formu

Her şey PHP altında çalışır ve veriler MySQL veritabanında saklanır.

Sistem, Web-kreation tarafından geliştirilen mükemmel bir kayar panel kullanır.

Öncelikle kayıtlı kullanıcılara ait tüm verileri içerecek bir tablo oluşturmamız gerekiyor. Sorgu kodu kaynak arşivdeki table.sql dosyasında mevcuttur.

Kimliği auto_increment seçeneğiyle bir tamsayı olarak tanımlıyoruz - her yeni kayıtlı kullanıcıya otomatik olarak atanacaktır. Ayrıca usr benzersiz bir anahtar olarak tanımlanır; tabloda aynı kullanıcı adına sahip iki kaydın bulunmasına izin verilmez.

Daha sonra kayıt işlemi sırasında kullanıcı adı girildiğinde belirtilen özellikleri kullanacağız.

Tabloyu oluşturduktan sonra, kodu sunucunuzda çalıştırabilmeniz için connect.php dosyasındaki veritabanınıza bağlanmak için değişkenleri doldurmanız gerekir.

Öncelikle sayfamıza bir Web oluşturma formu yerleştirmemiz gerekiyor.

Demo verileri

• Merhaba !



• 
  
  Paneli kapat
  

Kodun çeşitli yerlerinde $_SESSION["usr"] veya $_SESSION["id"] öğesinin tanımlanıp tanımlanmadığını kontrol eden PHP ifadeleri bulunur. Bunlar yalnızca sayfa ziyaretçisinin kayıtlı bir kullanıcı olması durumunda geçerlidir; bu da kayıtlı ziyaretçiler için gizli içeriği göstermemize olanak tanır.

Formdan sonra sayfa içeriğinin geri kalanını yerleştiriyoruz.

jQuery Kayar Panel
Kolay kayıt yönetimi PHP'yi kullanma ve jQuery

Bazı metin...

Kodda özel bir şey yok.

Şimdi formu eksiksiz bir kayıt ve giriş sistemine dönüştüreceğiz. Sorunu çözmek için normal PHP kodundan başka bir şeye ihtiyacınız olacak. Kodun tamamı iki bölüme ayrılmıştır.

Bir şey eklemeyi planlıyorsanız, her şeyi birkaç parçaya bölmek en iyisidir. ayrı dosyalar ve gerektiğinde bunları açın. Bu yaklaşım, büyük projelerin geliştirilmesine ve aynı zamanda sitenin farklı bölümlerinde kodun yeniden kullanılmasına yardımcı olur.

Burada nasıl uygulandığı anlatılıyor.

Burada tzRemember çerezi, "Beni hatırla" onay kutusunu işaretlemeyen bir kullanıcının oturumu kapatıp kapatmayacağını belirlemek için bir kontrol öğesi görevi görür. Çerez eksikse (tarayıcının yeniden başlatılması nedeniyle) ve ziyaretçi “beni hatırla” seçeneğini işaretlemediyse oturumu sileriz.

Oturumun kendisi iki hafta boyunca aktif kalacaktır (session_set_cookie_params parametresinde ayarlandığı gibi).

Ve işte demo.php'nin ikinci kısmı.

Else if($_POST["gönder"]=="Kayıt")
{
// Kayıt formundan istek gönderilirse
$hata = dizi();
if(strlen($_POST["kullanıcı adı"])32)
{
$err="Kullanıcı adı 3 ila 32 karakter uzunluğunda olmalıdır!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["kullanıcı adı"]))
{
$err="Kullanıcı adı geçersiz karakterler içeriyor!";
}
if(!checkEmail($_POST["email"]))
{
$err = Sizin e-posta adresi yanlış!";
}
if(!count($hata))
{
// Eğer hata yoksa
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000))),0.6);
// Rastgele bir şifre oluştur
$_POST["e-posta"] = mysql_real_escape_string($_POST["e-posta"]);
$_POST["kullanıcı adı"] = mysql_real_escape_string($_POST["kullanıcı adı"]);
// verileri hazırla
mysql_query(" INSERT INTO tz_members(usr,pass,e-posta,regIP,dt)
DEĞERLER(
"".$_POST["kullanıcı adı"]."",
"".md5($geçiş).",
"".$_POST["e-posta"]."",
"".$_SERVER["REMOTE_ADDR"]."",
ŞİMDİ()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["e-posta"],
"Kayıt sisteminin gösterimi - şifre oluşturma",
"Şifreniz: ".$pass);
$_SESSION["msg"]["reg-success"]="Size yeni şifrenizi içeren bir e-posta gönderdik!";
}
else $err="Bu kullanıcı adı zaten kullanımda!";
}
if(count($hata))
{
$_SESSION["msg"]["reg-err"] = implode("
",$hata);
}
başlık("Konum: demo.php");
çıkış;
}
$komut = "";
if($_SESSION["mesaj"])
{
// Komut dosyası yükleme sayfasında kayan bir panel gösteriyor
$komut = "

$(işlev())(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

Tanımlanan tüm hataları, daha sonra $_SESSION değişkenine atanan $err dizisinde saklıyoruz. Bu şekilde, tarayıcı yeniden yönlendirildikten sonra ona erişim korunur.

Bazı siteler, bir form gönderildiğinde veya sayfanın bir sonraki yenilenmesinde verilerin zaten gönderildiğine dair bir uyarı alabilir. Bu, yinelenen kayıtlara ve sunucuda gereksiz yüke yol açacağından bir sorun olabilir.

Tarayıcıyı aynı sayfaya yönlendirerek hata oluşmasını önlemek için başlık işlevini kullanırız. Bu, tarayıcının onu bir form isteği olarak tanımasına gerek kalmadan sayfanın görünümünü günceller. Sonuç olarak sayfa yenilenir ve hiçbir veri aktarılmaz.

Ancak tespit edilen tüm hataları saklamak için $_SESSION kullandığımızdan, kullanıcıya hata gösterilir gösterilmez tüm değişkenleri sıfırlamamız çok önemlidir. Aksi halde her sayfa görünümünde görüntülenecektir.

Ayrıca kullanılmış ek komut dosyası, indirme sayfasında mesajın kullanıcıya görünür olmasını sağlayan bir çubuk gösterir.

Kayan panel kendi stil dosyasını kullanır. Yani tek yapmamız gereken sayfamız için bir stil oluşturmak.

Kayar panelin kendi jQuery dosyası vardır.

İlk satır Google CDN'den jQuery kütüphanesini içerir. Daha sonra şeffaflık öğeleri için bir IE6 PNG yaması geliyor. Daha sonra panel komut dosyası açılır

$script değişkeni, gerekirse yükleme sayfasındaki paneli gösterir.

İÇİNDE Twitter ağları Sayfanın temiz ve sade bir tasarımla çalıştığını görebilirsiniz. Sayfanın sağ üst kısmına bakın, sisteme giriş yapmak için bir düğme göreceksiniz, üzerine tıkladığınızda veri doldurma formlarını göreceksiniz. Bugün size kendi web sitenizde benzer bir etkiyi nasıl yaratacağınızı anlatacağız. Aslında çok basit. Ayrıca sayfada yerden tasarruf etmenize ve ziyaretçilerinize rahatlık hissi katmanıza yardımcı olacaktır. Bu yazımızda tüm bu sistemin nasıl çalıştığını adım adım anlatacağız ve bu rehber jQuery öğrenmek isteyenler için de faydalı olacaktır. İleri!

HTML Kodu

Öncelikle HTML koduyla başlamanız gerekir. HTML kodu çok basittir - formun görüntülenmesine yardımcı olan "fieldset" etiketiyle birlikte gelen "a" etiketini içerir.

Bunu kodunuza kopyalamanız yeterli yeni sayfa:

Hesabınız var mı? Kayıt olmak


Kullanıcı adı ya da email

Şifre

Beni Hatırla

Parolanızı mı unuttunuz?

Kullanıcı adını mı unuttun?

İhtiyacın olacak CSS kullanma Yetkilendirme butonunu ve giriş formunu tanımlamak için. Aşağıdaki kod tam olarak bu işlevi yerine getiriyor.

Bu kodu css dosyanıza kopyalayın veya stili tanımladığınız HTML kodunuza ekleyin. Bu kodlar giriş butonunu tanımlar.

#konteyner (
genişlik:780 piksel;
kenar boşluğu:0 otomatik;
konum: göreceli;
}

#içerik (
genişlik:520 piksel;
minimum yükseklik: 500 piksel;
}
a:bağlantı, a:ziyaret edildi (
renk:#27b;
metin dekorasyonu: yok;
}
a: üzerine gelin (
metin dekorasyonu:altı çizili;
}
bir resim (
kenar genişliği:0;
}
#topnav (
dolgu:10 piksel 0 piksel 12 piksel;
yazı tipi boyutu: 11 piksel;
satır yüksekliği:23 piksel;
metin hizalama:sağ;
}
#topnav a.oturum açma (
arka plan:#88bbd4;
dolgu:4 piksel 6 piksel 6 piksel;
metin dekorasyonu: yok;
yazı tipi ağırlığı:kalın;
renk:#fff;
-webkit-sınır-yarıçapı:4px;
-moz-sınır-yarıçapı:4px;
sınır yarıçapı:4px;
*arka plan:şeffaf url("images/signin-nav-bg-ie.png") tekrarlamasız 0 0;
*dolgu:4 piksel 12 piksel 6 piksel;
}
#topnav a.oturum açma:hover (
arka plan:#59B;
*arka plan:şeffaf url("images/signin-nav-bg-hover-ie.png") tekrarsız 0 0;
*dolgu:4 piksel 12 piksel 6 piksel;
}
#topnav a.signin, #topnav a.signin:hover (
*background-position:0 3px!önemli;
}

a.oturum açma(
konum:göreceli;
kenar boşluğu-sol:3px;
}
a.oturum açma aralığı(
arka plan resmi:url("resimler/toggle_down_light.png");
arka plan tekrarı: tekrarlama yok;
arka plan konumu:%100 %50;
dolgu:4 piksel 16 piksel 6 piksel 0;
}
#topnav a.menü-açık (
arka plan:#ddeef6!önemli;
renk:#666!önemli;
taslak:yok;
}
#küçük_kayıt (
ekran:satır içi;
kayan nokta: yok;
satır yüksekliği:23 piksel;
kenar boşluğu:25 piksel 0 0;
genişlik:170 piksel;
}
a.signin.menu-açık yayılma alanı (
arka plan resmi:url("images/toggle_up_dark.png");
renk:#789;
}

Daha sonra giriş formunun tanımı geliyor:

#oturum açma_menü (
-moz-border-radius-topleft:5px;
-moz-kenarlık-yarıçapı-sol alt:5px;
-moz-sınır-yarıçap-sağ alt:5px;
-webkit-sınır-üst-sol-yarıçap:5px;
-webkit-kenarlık-alt-sol-yarıçap:5px;
-webkit-kenarlık-alt-sağ-yarıçap:5px;
görüntü yok;
arka plan rengi:#ddeef6;
konum:mutlak;
genişlik:210 piksel;
z-endeksi:100;
kenarlık:1 piksel şeffaf;
metin hizalama:sol;
dolgu:12 piksel;
üst: 24,5 piksel;
sağ: 0px;
kenar boşluğu üst:5 piksel;
sağ kenar boşluğu: 0px;
*sağ kenar boşluğu: -1px;
renk:#789;
yazı tipi boyutu: 11 piksel;
}

#signin_menu girişi, #signin_menu girişi (
Ekran bloğu;
-moz-sınır-yarıçapı:4px;
-webkit-sınır-yarıçapı:4px;
kenarlık:1 piksel katı #ACE;
yazı tipi boyutu:13 piksel;
kenar boşluğu:0 0 5px;
dolgu:5 piksel;
genişlik:203 piksel;
}
#signin_menu p (
kenar boşluğu:0;
}
#signin_menu a (
renk:#6AC;
}
#signin_menu etiketi (
yazı tipi ağırlığı:normal;
}
#signin_menu p.hatırla (
dolgu:10px 0;
}
#signin_menu s.unuttum, #signin_menu s.tamamlandı (
ikisini de temizle;
kenar boşluğu:5px 0;
}
#signin_menu pa (
renk:#27B!önemli;
}
#signin_submit (
-moz-sınır-yarıçapı:4px;
-webkit-sınır-yarıçapı:4px;
arka plan:#39d url("images/bg-btn-blue.png") tekrarlama-x kaydırma 0 0;
kenarlık:1 piksel katı #39D;
renk:#fff;
metin gölgesi:0 -1px 0 #39d;
dolgu:4 piksel 10 piksel 5 piksel;
yazı tipi boyutu: 11 piksel;
kenar boşluğu:0 5 piksel 0 0;
yazı tipi ağırlığı:kalın;
}
#signin_submit::-moz-focus-inner (
dolgu:0;
sınır:0;
}
#signin_submit:hover, #signin_submit:odaklanma (
arka plan konumu:0 -5px;
imleç:işaretçi;
}

Javascript ile çalışma zamanı

Öyle görünüyor ki, HTML kodları ve CSS oldukça karmaşık ve kafa karıştırıcıdır, ancak javascript'te her şey çok basittir. Tıklama, giriş formunun dışında yapılmış olsa bile, giriş düğmesine tıkladığınızda formu görüntüleyip gizlemenizi sağlayacak bu javascript kodunu kopyalamanız yeterlidir.

$(document).ready(function() (

$(".signin").click(function(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menü-açık");
});

$("fieldset#signin_menu").mouseup(function() (
yanlış döndür
});
$(document).mouseup(function(e) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menü-açık");
$("fieldset#signin_menu").hide();
}
});

});

Yukarıda verilen koda göre bir ziyaretçi giriş butonuna tıkladığında, yeni özellik. İlk olarak, oturum açma formu görüntülenir (“filedset” etiketinde bulunur), ardından “.signin” sınıfında yer alan bağlantı, arka plan görüntüsünün değişmesi nedeniyle başka bir “menü açma” sınıfı ekler.

Bu koddaki bir diğer olay ise ziyaretçiler giriş formuna değil de sayfanın herhangi bir yerine tıkladıklarında formun kendi kendine kapanmasıdır. Yani "menu-open" sınıfının ".signin" sınıfıyla olan bağlantısı kaldırılır ve orijinal arka plan görüntüsüne döndürülür.

İpuçlarına gelince?

$(işlev() (
$("#kullanıcı_adı_bağlantısını unuttum").tipsy((yerçekimi: "w"));
});

Genellikle jQuery eklentisini kullanmanızı öneririz – çakırkeyif. Araç ipucunun içeriği, bağlantıyla ilişkili "başlık" özelliğinde yazılanlardır. Araç ipucunun konumunu doğuya, batıya, güneye veya kuzeye göre değiştirebilirsiniz. Bu, yukarıdaki kodda belirtilen "yerçekimi" parametresi kullanılarak uygulanır. Size, yeteneklerini daha ayrıntılı olarak inceleyebileceğiniz ve eklentiyi indirebileceğiniz, bu eklentiye özel bir web sitesinin bağlantısını sağlıyoruz. ...

Nihayet

Bu makaledeki kodun tamamını kopyaladıysanız lütfen klasör yapısını değiştirmeyin. Eğer değiştirirseniz kod çalışmayacaktır. Bu kod jQuery kullanarak giriş açılır formu oluşturmanın yalnızca bir örneğidir. Uygulamanızda iyi şanslar!

Sayfayı yeniden yüklemeden dinamik olarak geçiş yapma özelliği ile oturum açma ve kayıt formlarının işlevlerine uyarlanabilir. Pencere göründükten sonra kullanıcı kolayca birinden diğerine geçebilir ve gerekirse şifreyi değiştirme seçeneğini seçebilir.
Bugün tüm bunların küçük ama çok işlevsel bir jQuery eklentisi ve yeni CSS3 standartlarının birleşimi kullanılarak nasıl uygulanabileceğine bakacağız.

Giriş ve kayıt formlarını sitenizin her sayfasında kullanıcıların kullanımına sunmak istiyorsanız bu yöntem faydalı olacaktır. Kullanıcılar siteye giriş yaparken veya kayıt olurken başka bir sayfaya yönlendirilmeyecek ve tüm işlemleri gerçekleştirebileceklerdir. gerekli eylemler“ödemeden çıkmadan”, her şey tek sayfada.

Dekor dış görünüş Açılır formlar CSS3 kullanılarak uygulanır, eklentinin toplam ağırlığı hiç de büyük değildir, kalıcı pencerenin yanıtı ve yüklenmesi neredeyse hiç gecikmeden gerçekleşir.
%100 duyarlı düzen, formlar içeren modal pencerenin yüksekliği ve genişliği, kullanıcı cihazlarının ekran boyutlarına göre otomatik olarak ayarlanır.

Örneğe baktık, şimdi web sitenizde nasıl kullanılacağını öğrenmek için kalıcı pencerenin ve formların tüm ana bileşenlerine ayrıntılı olarak bakalım.
Oturum açma ve kayıt formlarını içeren açılır pencere, popüler javascript kitaplığı, çalıştırılabilir jQuey eklentisi ve oluşturulan CSS stilleri üzerine kurulmuştur. Tüm bu araçların sitenize bağlı olması gerekir. Sonuncu şimdiki versiyonu jQuey kütüphaneleri doğrudan Google'dan bağlanabilir; main.js eklenti dosyası ve hazır bir dizi stil.css arşivde bulunabilir.
Javascript kapanış etiketinden önce yazılır, CSS stilleri kopyalanıp sitenizin style.css dosyasına eklenebilir.

Koyu bir arka plan üzerinde modal pencerelerin temel kabı ve kontrolleri olan yerleşik formlar sayfanın gövdesine yerleştirilir. Daha iyi anlaşılması için sektörleri farklılaştırdım ve yorumlar ekledim. Tüm tasarım öğeleri belirli sınıflar aracılığıyla CSS'ye sıkı bir şekilde bağlıdır, bu nedenle formların tasarımını sitelerinizin genel tasarımına göre değiştirmek zor değildir.

• Giriş
• Kayıt

E-posta Hata mesajı burada!

Şifre Saklamak Burada bir hata mesajı var!

Beni Hatırla

Parolanızı mı unuttunuz?

Kullanıcı Adı Hata mesajı burada!

E-posta Hata mesajı burada!

Şifre Saklamak Burada bir hata mesajı var!

katılıyorum Şartlar

Parolanızı mı unuttunuz? Lütfen e-mail adresinizi giriniz. Yeni bir şifre oluşturmak için bir bağlantı alacaksınız.

E-posta Hata mesajı burada!

Girişe dön

Yazar, popüler olandaki temel şablonu ve form kontrollerini oluşturdu. düz stil(Düz), minimalizme açık bir vurgu ile. Gereksiz hiçbir şey yok, orta derecede şeffaf koyulaşan bir arka plan, okunması kolay renkler, iyi seçilmiş yazı tipi ve giriş alanlarını gösteren simgeler. Kullanarak CSS özellikleri, herhangi bir form öğesini kolayca değiştirebilirsiniz.

Cd-user-modal ( konum: sabit; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; arka plan: rgba(52, 54, 66, 0,9); z-endeksi: 3; taşma-y : otomatik; görünürlük: gizli; opaklık: 0; -webkit-geçiş: opaklık 0,3 saniye; 0,3 saniye görünürlük ) .cd-user-modal.is-visible görünür; opaklık: 1; -webkit-geçiş: opaklık 0,3s 0, görünürlük 0 0; -moz-geçiş: opaklık 0,3s 0, görünürlük 0 0; geçiş: opaklık 0,3s 0, görünürlük 0 0; -modal.is-visible .cd-user-modal-container ( -webkit-transform: TranslateY(0); -moz-transform : TranslateY(0); -ms-transform: TranslateY(0); -o-transform: TranslateY(0); .cd-user-modal-container ( konum: göreceli; genişlik: %90; maksimum genişlik: 600 piksel; kenar boşluğu: 3em otomatik 4em; border-radius: 0,25em; -webkit-transform: TranslateY(- 30 piksel); -ms-transform: TranslateY(-30px); -o-dönüştürme: TranslateY(-30px); dönüşüm: TranslateY(-30px); -webkit-geçiş-özelliği: -webkit-transform; -moz-geçiş-özelliği: -moz-transform; geçiş özelliği: dönüşüm; -webkit-geçiş-süresi: 0,3 saniye; -moz-geçiş-süresi: 0,3s; geçiş süresi: 0,3 saniye; ) .cd-user-modal-container .cd-switcher:after ( içerik: ""; görüntüleme: tablo; temizle: her ikisi de; ) .cd-user-modal-container .cd-switcher li ( genişlik: %50; float : sol; text-align: center; ) .cd-user-modal-container .cd-switcher li:first-child a ( border-radius: .25em 0 0 0; ) .cd-user-modal-container .cd -switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( display: blok; width: 100%; height: 50px; line-height : 50 piksel; arka plan: #d2d8d8; renk: #809191; .cd-user-modal-container .cd-switcher a.selected ( arka plan: #FFF; renk: #505260; ) yalnızca medya ekranı ve (minimum genişlik: 600px) ( .cd-user-modal-container ( kenar boşluğu: 4em otomatik; ) .cd-user-modal-container .cd-switcher a ( height: 70px; line-height: 70px; ) ) .cd-form ( dolgu : 1,4em; ) .cd-form .fieldset ( konum: göreceli; kenar boşluğu: 1,4em 0; ) .cd-form .fieldset:first-child ( kenar boşluğu üst: 0; ) .cd-form .fieldset:last - çocuk ( kenar boşluğu alt: 0; ) .cd-form etiketi ( yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0,875 rem; ) .cd-form label.image-replace ( /* metni simgeyle değiştirin */ display: inline-block; konum: mutlak; sol: 15 piksel; üst: %50; alt: otomatik; -webkit-transform: TranslateY(- %50); -moz-transform: TranslateY(-%50); -ms-transform: TranslateY(-%50); : nowrap; arka plan gölgesi: tekrarlama yok; ) /* Giriş alanları için simgeler */ .cd-form label.cd-kullanıcı adı ( arka plan resmi: url(". ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( arka plan resmi: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( arka plan resmi: url("../img/cd-icon-password.svg"); ) .cd-form girişi ( kenar boşluğu: 0; dolgu: 0; kenar yarıçapı: 0,25 em; ) .cd-form input.full-width ( genişlik: 100%; ) .cd-form input.has-padding ( dolgu: 12px 20px 12px 50px; ) .cd-form input.has-border ( border: 1px katı #d2d8d8; -webkit-görünümü: yok; -o-görünümü: yok; .cd-form girişi.has-border:focus -color: #343642; (52, 54, 66, 0.1); taslak: yok ) .cd-form input.has-error ( border: 1px katı #d76666; ) .cd- form input ( /* Gizle düğmesi için boşluk */ padding-right: 65px; ) .cd-form girişi ( dolgu: 16px 0; imleç: işaretçi; arka plan: #2f889a; renk: #FFF; yazı tipi ağırlığı: kalın; kenarlık: yok; -webkit-görünüm: yok; -moz-görünüm: yok; -ms-görünüm: yok; görünüm: yok; ) .no-touch .cd-form girişi:hover, .no-touch .cd-form girişi:focus ( arka plan: #3599ae; taslak: yok; ) .cd-form .hide-password ( display: inline-block; konum: mutlak; üst: 0; kenarlık-sol: 1px katı #d2d8d8; alt: otomatik; transformY(-%50); -ms-transform: TranslateY(-%50); 50%); boyut: 0,875rem; renk: #343642; .cd-form .cd-error-message (görüntü: satır içi blok; konum: mutlak; sol: -5 piksel; alt: -35 piksel; arka plan: rgba(215) , 102, 102, 0,9); dolgu: #FFF; yazı tipi boyutu: 0,8125rem; /* tıklamaları ve dokunmaları önle: yok; görünürlük: gizli; 0,2s 0, görünürlük 0,2s; görünürlük 0 0,2s; ) .cd-form .cd-error-message::after ( /* hata mesajı köşesi */ içerik: ""; konum: mutlak; sol: 22 piksel; alt: %100; yükseklik: 0; genişlik: 0; kenarlık - sol: 8px katı şeffaf; kenarlık-sağ: 8px katı şeffaf; 8px katı rgba(215, 102, 102, 0,9); görünürlük: görünür -webkit geçişi: opaklık 0,2s ; 2s 0, görünürlük 0 0; geçiş: opaklık 0,2s 0, görünürlük 0 0; ) Yalnızca @media ekranı ve (minimum genişlik: 600 piksel) ( .cd-form ( dolgu: 2em; ) .cd-form .fieldset ( kenar boşluğu: 2em 0; ) .cd-form .fieldset:first-child ( kenar boşluğu- top: 0; ) .cd-form .fieldset:last-child ( marj-bottom: 0; ) .cd-form girişi.has-padding ( dolgu: 16px 20px 16px 50px; ) .cd-form girişi ( dolgu: 16px 0; ) .cd-form-message ( dolgu: 1,4em 1,4em 0; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0,875 rem; satır yüksekliği: 1,4; text-align: center; ) @media yalnızca ekran ve ( min-width: 600px) ( .cd-form-message ( dolgu: 2em 2em 0; )) .cd-form-bottom-message ( konum: mutlak; genişlik: %100; sol: 0; alt: -30 piksel; metin -hizalama: orta; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0,875 rem; .cd-form-bottom-message a ( renk: #FFF; metin dekorasyonu: altı çizili; ) .cd-close-form ( / * stili X düğmesi sağ üst */ ekran: blok; konum: mutlak genişlik: 40 piksel; url("../img/cd-icon-close.svg ") tekrarlanmayan merkez merkez; %; beyaz boşluk: şimdirap; taşma: gizli; ) @media only ekranı ve (min-width: 1170px) ( .cd-close-form ( display: none; )) #cd-login, #cd-signup, #cd-reset-password ( display: none; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected ( display: blok; )

Solmaya geçiş efektinde, modun kapatıldığında düzgün bir şekilde sönmesini sağlamak için bir gecikme eklenmiştir.

Not:. Tüm giriş alanlarının yazı tipi boyutu varsayılan olarak 16 piksele ayarlanmıştır. Bu, mobil cihazlarda görüntülerken oluşan otomatik yakınlaştırmayı önler.

Yazarın, eklentinin burjuva versiyonu yer almaktadır. Orada orijinali indirebilirsiniz.
Rusça versiyonunu Yandex.Diskimden alabilirsiniz, işte bu kadar gerekli dosyalar, dikkatlice tek bir arşivde paketlenmiştir; bundan önce bu harika jQuery eklentisinin nasıl çalıştığına dair tamamen uyarlanmış, canlı bir örneğe bakmayı unutmayın:

Saygılarımla, Andrew

İletişim formlarının oluşturulması: geri bildirim, yorumlar, giriş formu, girilen bilgilerin doğruluğunun kontrol edildiği kayıt formu.

ile düzgün şekil adım adım doldurma. Aşağıda bir form tamamlama göstergesi bulunmaktadır.

Formun birkaç adımda doldurulması ve doğru doldurulduğunun kontrol edilmesi.

Girilen bilgilerin doğruluğunun doğrulanması, javascript kullanılarak mesaj gönderilmeden önce anında gerçekleştirilir.

Site giriş formu, kayıt formu ve şifre kurtarma alanı arasında jQuery kullanılarak animasyonlu geçiş. Efekti görmek için demo sayfasında sarı bağlantıya tıklayın.

Ziyaretçiye herhangi bir sayfadan site sahibiyle hızlı bir şekilde iletişime geçme fırsatı vermek için benzer bir çözüm kullanılabilir. Demo sayfasında formu açmak için aşağıdaki oka tıklayın.

Girilen bilgilerin doğruluğunun doğrulandığı form.

CSS, PHP ve jQuery kullanılarak uygulanan güzel bir kayıt formu.

Mesaj göndermeden önce yeni alanlar ekleme özelliği uygulandı.

Girilen bilgilerin doğruluğunun doğrulandığı hoş, derli toplu PHP geri bildirim formu. Teknolojiler: CSS, PHP, jQuery.

Doğru dolumun doğrulanmasıyla.

Hızlı bir şekilde mesaj göndermek için giden bir geri bildirim formu uygulamak.