jQuery qeydiyyatı və avtorizasiya forması. PHP, MySQL və jQuery istifadə edərək əla qeydiyyat sisteminin yaradılması. Fantastik AJAX Əlaqə Forması

Hər şey PHP-nin nəzarəti altında baş verir və məlumatlar MySQL verilənlər bazasında saxlanılır.

Sistem Web-kreation tərəfindən hazırlanmış əla sürüşmə panelindən istifadə edir.

Əvvəlcə qeydiyyatdan keçmiş istifadəçilər haqqında bütün məlumatları ehtiva edən bir cədvəl yaratmalıyıq. Sorğu kodu mənbə arxivindəki table.sql faylında mövcuddur.

Biz id-i auto_increment seçimi ilə tam ədəd kimi təyin edirik - o, hər bir yeni qeydiyyatdan keçmiş istifadəçi üçün avtomatik təyin olunacaq. Həmçinin, usr unikal açar kimi müəyyən edilir - cədvəldə eyni istifadəçi adı olan iki qeydə icazə verilmir.

Daha sonra, istifadəçi adı daxil edildikdə, qeydiyyat prosesində göstərilən xassələrdən istifadə edəcəyik.

Cədvəl yaratdıqdan sonra serverinizdə kodu işə sala bilmək üçün connect.php faylında verilənlər bazanıza qoşulmaq üçün dəyişənləri doldurmalısınız.

Əvvəlcə səhifəmizə Veb yaratma formasını yerləşdirməliyik.

Demo məlumatları

• Salam !



• 
  
  Paneli bağlayın
  

Kodun bir neçə yerində $_SESSION["usr"] və ya $_SESSION["id"] təyin edilib-edilmədiyini yoxlayan PHP ifadələri var. Onlar yalnız səhifənin ziyarətçisi qeydiyyatdan keçmiş istifadəçi olduqda doğrudur, bu da bizə qeydiyyatdan keçmiş ziyarətçilərə gizli məzmunu göstərməyə imkan verir.

Formadan sonra səhifənin qalan məzmununu yerləşdiririk.

jQuery slide-out paneli
PHP və jQuery istifadə edərək sadə qeydiyyat idarəsi

Bəzi mətn...

Kodda xüsusi bir şey yoxdur.

İndi formanı tam qeydiyyat və giriş sisteminə çevirəcəyik. Tapşırığı həll etmək üçün sizə adi PHP kodundan başqa bir şey lazımdır. Bütün kod iki hissəyə bölünür.

Bir şey əlavə etməyi planlaşdırırsınızsa, hər şeyi bir neçə yerə bölmək yaxşıdır fərdi fayllar və lazım olduqda onları yandırın. Bu yanaşma böyük layihələrin hazırlanmasına və eyni zamanda saytın müxtəlif hissələrində kodun təkrar istifadəsinə kömək edir.

Burada onun necə həyata keçirildiyi göstərilir.

Burada tzRemember kukisi “Məni yadda saxla” qutusunu qeyd etməmiş istifadəçinin sistemdən çıxmalı olduğunu müəyyən etmək üçün nəzarət elementi kimi çıxış edir. Əgər kuki yoxdursa (brauzerin yenidən işə salınmasına görə) və ziyarətçi “məni yadda saxla” seçimini yoxlamayıbsa, sessiyanı silirik.

Sessiyanın özü iki həftə ərzində aktiv qalacaq (session_set_cookie_params bölməsində göstərildiyi kimi).

Və burada demo.php-nin ikinci hissəsidir.

Əks halda($_POST["göndər"]=="Qeydiyyatdan keç")
{
// Əgər sorğu Qeydiyyat formasından göndərilibsə
$err = massiv();
if(strlen($_POST["istifadəçi adı"])32)
{
$err="İstifadəçi adı 3 ilə 32 simvol arasında olmalıdır!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["istifadəçi adı"]))
{
$err="İstifadəçinin adı etibarsız simvollardan ibarətdir!";
}
if(!checkEmail($_POST["e-poçt"]))
{
$err="Sənin e-poçt ünvanı səhv!";
}
if(!count($err))
{
// Heç bir səhv yoxdursa
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1,100000)),0,6);
// Təsadüfi parol yaradın
$_POST["e-poçt"] = mysql_real_escape_string($_POST["e-poçt"]);
$_POST["istifadəçi adı"] = mysql_real_escape_string($_POST["istifadəçi adı"]);
// məlumat hazırlamaq
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
DƏYƏRLƏR(
"".$_POST["istifadəçi adı"]."",
"".md5($pass)."",
"".$_POST["e-poçt"]."",
"".$_SERVER["REMOTE_ADDR"]."",
İNDİ()
)");
əgər(mysql_təsirlənmiş_sətirlər($link)==1)
{
send_mail("demo-test@site",
$_POST["e-poçt"],
"Qeydiyyat sisteminin nümayişi - parolun yaradılması",
"Şifrəniz: ".$pass);
$_SESSION["msg"]["reg-success"]="Biz sizə yeni parolunuzla e-məktub göndərdik!";
}
else $err="Bu istifadəçi adı artıq istifadə olunur!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
başlıq("Yer: demo.php");
çıxış;
}
$script = "";
if($_SESSION["msg"])
{
// Skript yüklənmə səhifəsində slayd çubuğunu göstərir
$script = "

$(funksiya()(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

Biz bütün müəyyən edilmiş səhvləri sonradan $_SESSION dəyişəninə təyin edilən $err massivində saxlayırıq. Bu yolla, brauzer yönləndirildikdən sonra hələ də ona daxil ola bilərsiniz.

Bəzi saytlar forma təqdim edildikdə və ya növbəti dəfə səhifə yeniləndikdə məlumatların artıq təqdim edildiyi barədə xəbərdarlıq ala bilər. Bu problem ola bilər, çünki bu, dublikat qeydiyyatlara və serverdə əlavə yüklənməyə səbəb olur.

Brauzeri eyni səhifəyə yönləndirərək xətanın qarşısını almaq üçün başlıq funksiyasından istifadə edirik. Bu, brauzer onu forma sorğusu kimi tanımadan səhifənin görünüşünü yeniləyir. Nəticədə səhifə yenilənir və məlumat ötürülmür.

Lakin qarşılaşdığımız bütün səhvləri saxlamaq üçün $_SESSION istifadə etdiyimiz üçün səhv istifadəçiyə göstərilən kimi bütün dəyişənləri sıfırlamağımız çox vacibdir. Əks halda, o, hər səhifə görünüşündə göstəriləcək.

Həmçinin istifadə olunur əlavə skript, mesajın istifadəçiyə görünməsi üçün yükləmə səhifəsində bir bar göstərir.

Sürüşən panel öz stil cədvəlindən istifadə edir. Beləliklə, yalnız səhifəmiz üçün bir stil yaratmalıyıq.

Sürüşən panelin öz jQuery-i var.

Birinci sətirə Google CDN-dən jQuery kitabxanası daxildir. Bunun ardınca şəffaflıq elementləri üçün IE6 PNG üçün yamaq gəlir. Sonra panel skripti daxil edilir

$script dəyişəni lazım olduqda yükləmə səhifəsində paneli göstərir.

IN Twitter şəbəkələri Səhifənin təmiz və iddiasız dizaynla işini izləyə bilərsiniz. Səhifənin yuxarı sağ tərəfinə baxın, orada sistemə avtorizasiya düyməsini görəcəksiniz, üzərinə klikləməklə məlumatları doldurmaq üçün formaları görəcəksiniz. Bu gün sizə öz veb saytınızda oxşar effekti necə edəcəyinizi söyləyəcəyik. Əslində, çox sadədir. Bundan əlavə, bu, səhifədə yer qənaət etməyə kömək edəcək və ziyarətçilərinizə rahatlıq hissi əlavə edəcəkdir. Bu yazıda biz sizə bütün sistemin necə işlədiyinə dair addımlar atacağıq və bu bələdçi jQuery öyrənmək istəyənlər üçün də faydalı olacaq. İrəli!

HTML kodu

Əvvəlcə HTML kodu ilə başlamalısınız. HTML kodu çox sadədir - o, "fieldset" teqi ilə birlikdə gedən "a" teqini ehtiva edir və bunun sayəsində forma göstərilir.

Sadəcə bunu koda kopyalayın yeni səhifə:

Hesabınız var? daxil olun


İstifadəçi adı və ya E-poçt

parol

məni xatırla

Şifrəni unutmusan?

İstifadəçi adınızı unutmusunuz?

Giriş düyməsini və giriş formasını müəyyən etmək üçün CSS-dən istifadə etməlisiniz. Aşağıdakı kod tam olaraq bu funksiyanı yerinə yetirir.

Sadəcə olaraq bu kodu css faylınıza köçürün və ya stilinizi təyin etdiyiniz HTML kodunuza əlavə edin. Bu kodlar avtorizasiya düyməsini müəyyən edir.

#konteyner (
eni: 780px;
marja: 0 avtomatik;
mövqe: nisbi;
}

#məzmun(
eni: 520px;
minimum hündürlük: 500px;
}
a:link, a:ziyaret edildi (
rəng:#27b;
mətn dekorasiyası:yoxdur;
}
a: sürüşdürün (
mətn dekorasiyası:altını çəkmək;
}
bir img (
sərhəd eni: 0;
}
#topnav(
doldurma:10px 0px 12px;
font ölçüsü: 11px;
xəttin hündürlüyü: 23px;
mətni düzün: sağa;
}
#topnav a.giriş (
fon:#88bbd4;
doldurma:4px 6px 6px;
mətn dekorasiyası:yoxdur;
şrift çəkisi: qalın;
rəng:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
sərhəd radiusu: 4px;
*arxa fon:şəffaf url("şəkillər/signin-nav-bg-ie.png") təkrar olunmur 0 0;
*doldurma:4px 12px 6px;
}
#topnav a.signin:hover (
fon:#59B;
*arxa fon:şəffaf url("şəkillər/signin-nav-bg-hover-ie.png") təkrar olunmur 0 0;
*doldurma:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*fon mövqeyi:0 3px!vacib;
}

a.giriş(
mövqe: qohum;
kənar-sol: 3px;
}
a.giriş aralığı(
background-image:url("şəkillər/toggle_down_light.png");
fon-təkrar:təkrar yoxdur;
fon mövqeyi: 100% 50%;
doldurma:4px 16px 6px 0;
}
#topnav a.menyu-açıq(
fon:#ddeef6!vacib;
rəng:#666!vacib;
kontur: heç biri;
}
#kiçik_qeydiyyat(
ekran:daxili;
üzmək: heç biri;
xəttin hündürlüyü: 23px;
haşiyə: 25px 0 0;
eni: 170px;
}
a.signin.menu-açıq span(
background-image:url("şəkillər/toggle_up_dark.png");
rəng:#789;
}

Və sonra giriş formasının tərifi gəlir:

#giriş_menyu(
-moz-border-radius-topleft:5px;
-moz-border-radius-sol alt:5px;
-moz-border-radius-aşağı sağ:5px;
-webkit-border-yuxarı-sol-radius:5px;
-webkit-border-aşağı-sol-radius:5px;
-webkit-sərhəd-aşağı-sağ-radius:5px;
ekran: heç biri;
fon rəngi:#ddeef6;
mövqe: mütləq;
eni: 210px;
z indeksi: 100;
sərhəd: 1px şəffaf;
mətni düzün: sola;
doldurma: 12px;
yuxarı: 24,5px;
sağ: 0px;
kənar-yuxarı: 5px;
kənar-sağ: 0px;
*sağ kənar: -1px;
rəng:#789;
font ölçüsü: 11px;
}

#giriş_menyu girişi, #giriş_menyu girişi (
ekran: blok;
-moz-border-radius:4px;
-webkit-border-radius:4px;
haşiyə: 1px bərk #ACE;
font ölçüsü: 13px;
kənar: 0 0 5px;
doldurma: 5px;
eni: 203px;
}
#giriş_menyu p(
marja: 0;
}
#giriş_menyu a (
rəng:#6AC;
}
#giriş_menyu etiketi (
font-weight:normal;
}
#giriş_menyu p.xatırla(
doldurma: 10px 0;
}
#giriş_menyu p.unutdum, #giriş_menyu p.tamamlandı (
aydın:hər ikisi;
kənar: 5px 0;
}
#giriş_menyu p a (
rəng:#27B!vacib;
}
#giriş_göndər(
-moz-border-radius:4px;
-webkit-border-radius:4px;
fon:#39d url("şəkillər/bg-btn-blue.png") təkrar-x sürüşdürün 0 0;
haşiyə:1px bərk #39D;
rəng:#fff;
mətn kölgəsi:0 -1px 0 #39d;
doldurma: 4px 10px 5px;
font ölçüsü: 11px;
kənar: 0 5px 0 0;
şrift çəkisi: qalın;
}
#signin_submit::-moz-focus-inner (
doldurma: 0;
sərhəd: 0;
}
#giriş_göndər:göstər, #giriş_göndər:fokus (
fon mövqeyi:0 -5px;
kursor: göstərici;
}

Javascript ilə işləmək vaxtıdır

Deyəsən, HTML kodları və CSS olduqca mürəkkəb və qarışıqdır, lakin javascript-də hər şey çox sadədir. Sadəcə olaraq, giriş düyməsi kliklədikdə formanı göstərəcək və gizlədəcək bu javascript kodunu kopyalayın, hətta klik giriş formasından kənarda olsa belə.

$(sənəd).ready(funksiya() (

$(".giriş").klik(funksiya(e))
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menyu-açıq");
});

$("fieldset#signin_menu").mouseup(funksiya() ()
yalan qaytar
});
$(sənəd).siçan(funksiya(e))
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menyu-açıq");
$("fieldset#signin_menu").gizlət();
}
});

});

Yuxarıdakı koda görə, ziyarətçi giriş düyməsini kliklədikdə, yeni xüsusiyyət. Əvvəlcə giriş forması göstərilir ("filedset" teqinə bükülmüşdür), sonra ".signin" sinfinə bükülmüş link arxa fon şəklini dəyişən başqa bir "menyu-açıq" sinfi əlavə edir.

Bu koddakı başqa bir hadisə də budur ki, ziyarətçilər giriş formasına deyil, səhifənin hansısa yerinə klik etdikdə, forma özü bağlanır. Başqa sözlə, "menyu-açıq" sinfi ".signin" sinfi ilə əlaqədən çıxarılır və orijinal fon şəklini ona qaytarır.

İpuculara gəlincə?

$(funksiya()(
$("#forgot_username_link").tipsy((ağırlıq: "w"));
});

Biz ümumiyyətlə ipucu jQuery plaginindən istifadə etməyi məsləhət görürük. Alət məsləhətinin məzmunu keçidlə əlaqəli "başlıq" atributunda yazılanlardır. Siz şərq, qərb, cənub və ya şimala nisbətən alət ipucunun yerini dəyişə bilərsiniz. Bu, yuxarıdakı kodda göstərilən "ağırlıq" parametri vasitəsilə həyata keçirilir. Biz sizə bu plaqinə həsr olunmuş sayta keçid təqdim edirik, burada onun imkanlarını daha ətraflı araşdırıb plaqini yükləyə bilərsiniz. …

Nəhayət

Bu məqalədən bütün kodu köçürmüsünüzsə, lütfən, qovluq strukturunu dəyişməyin. Onu dəyişdirsəniz, kod işləməyəcək. Verilmiş kod jQuery ilə açılan giriş formasının yaradılmasına sadəcə bir nümunədir. Təcrübənizdə uğurlar!

Səhifəni yenidən yükləmədən dinamik keçid imkanı ilə giriş və qeydiyyat formalarının funksiyalarına cavabdehdir. Pəncərə göründükdən sonra istifadəçi asanlıqla birindən digərinə keçə bilər və lazım olduqda parolun dəyişdirilməsi seçimini seçə bilər.
Bu gün biz bütün bunların kiçik, lakin çox güclü jQuery plagininin və yeni CSS3 standartlarının kombinasiyası ilə necə edilə biləcəyinə baxacağıq.

Giriş və qeydiyyat formalarını saytınızın hər səhifəsində istifadəçilərə təqdim etmək istəyirsinizsə, bu üsul faydalı olacaq. Sayta daxil olarkən və ya qeydiyyatdan keçərkən istifadəçilər başqa səhifəyə yönləndirilməyəcək və bütün funksiyaları yerinə yetirə biləcəklər. zəruri tədbirlər“kassa aparatından çıxmadan”, hamısı bir səhifədə.

Dekor görünüş pop-up formaları CSS3 istifadə edərək həyata keçirilir, plaqinin ümumi çəkisi heç də böyük deyil, modal pəncərənin cavabı və yüklənməsi demək olar ki, gecikmədən baş verir.
100% cavab verən düzən, formalarla modalın hündürlüyü və eni avtomatik olaraq istifadəçi cihazlarının ekran ölçülərinə uyğun olaraq təyin olunur.

Biz nümunəyə baxdıq, indi modal pəncərənin və formaların bütün əsas komponentlərinə daha yaxından nəzər salaq ki, onlardan saytınızda necə istifadə edəcəyinizi öyrənək.
Giriş və qeydiyyat formaları ilə açılan pəncərənin işləməsi məşhur javascript kitabxanası, jQuey icra olunan plagin və yaradılan CSS üslubları üzərində qurulub. Bütün bu alətlər saytınıza qoşulmalıdır. sonuncu cari versiya jQuey kitabxanaları birbaşa Google-dan qoşula bilər, main.js plagin faylının özü və hazır style.css üslub dəsti arxivdə tapıla bilər.
Javascript bağlanma teqindən əvvəl yazılır, css üslubları kopyalana və saytınızın .css üslub faylına əlavə oluna bilər.

Qaranlıq fonda modal pəncərələrin əsas konteyneri və idarəetmə elementləri olan daxili formalar səhifənin gövdəsində yerləşdirilir. Daha yaxşı başa düşmək üçün sektorları ayırdım və şərhlər əlavə etdim. Bütün dizayn elementləri müəyyən siniflər vasitəsilə CSS ilə sıx birləşdirilir, buna görə də saytlarınızın ümumi dizaynına uyğun formaların dizaynını dəyişdirmək çətin deyil.

• Giriş
• Qeydiyyat

E-poçt Səhv mesajı burada!

parol Gizlət Budur səhv mesajı!

Məni xatırla

Şifrəni unutmusan?

İstifadəçi adı Səhv mesajı burada!

E-poçt Səhv mesajı burada!

parol Gizlət Budur səhv mesajı!

razıyam şərtlər

Şifrəni unutmusan? E-poçt ünvanınızı daxil edin. Yeni parol yaratmaq üçün bir keçid alacaqsınız.

E-poçt Səhv mesajı burada!

Girişə qayıt

Əsas şablon və forma nəzarətləri, müəllif tərəfindən məşhur, düz üslub(Düz), minimalizmə aydın vurğu ilə. Əlavə heç nə yoxdur, orta səviyyədə şəffaf fon kölgələmə, asan oxunan rənglər, yaxşı seçilmiş şrift və giriş sahələrini göstərmək üçün nişanlar. İstifadə etməklə CSS xüsusiyyətləri, istənilən forma elementini asanlıqla dəyişdirə bilərsiniz.

cd-user-modal (mövqe: sabit; yuxarı: 0; sol: 0; en: 100%; hündürlük: 100%; fon: rgba(52, 54, 66, 0.9); z-index: 3; daşqın-y : avtomatik; kursor: göstərici; görünmə: gizli; qeyri-şəffaflıq: 0; -webkit-keçid: qeyri-şəffaflıq 0,3s 0, görünmə 0,3s; -moz-keçid: qeyri-şəffaflıq 0,3s 0, görünmə 0 0,3s; keçid: qeyri-şəffaflıq 0,3s 0, görünmə 0 0.3s; ) , görünmə 0 0; keçid: qeyri-şəffaflıq 0.3s 0, görünmə 0 0; ) : translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0) ; transform: translateY(0); ) .cd-user-modal-container (mövqe: nisbi; en: 90 %; maksimum en: 600px; fon: #FFF; kənar: 3em avtomatik 4em; kursor: avtomatik; sərhəd- radius: 0.25em;-webkit-transform: translateY(-30px);-moz-transform: translateY(-30px ); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); çevirmək: translateY(-30px); -webkit-keçid-xassəsi: -webkit-transform; -moz-keçid-xassəsi: -moz-transform; keçid-xassəsi: çevirmək; -webkit-keçid müddəti: 0.3s; -moz-keçid müddəti: 0.3s; keçid müddəti: 0.3s; ) .cd-user-modal-container .cd-switcher:after ( content: ""; display: table; clear: both; ) .cd-user-modal-container .cd-switcher li ( en: 50%; float : sol; mətni align: mərkəz; ) .cd-user-modal-container .cd-switcher li:first-child a ( sərhəd-radius: .25em 0 0 0; ) .cd-user-modal-container .cd -keçirici li:son uşaq a ( sərhəd radiusu: 0 .25em 0 0; ) .cd-user-modal-container .cd-dəyişdirici a ( displey: blok; en: 100%; hündürlük: 50px; xəttin hündürlüyü : 50px; fon: #d2d8d8; rəng: #809191; ) .cd-user-modal-container .cd-switcher a.seçilmiş (fon: #FFF; rəng: #505260; ) yalnız @media ekranı və (min-en) : 600px) ( .cd-user-modal-container ( margin: 4em auto; ) .cd-user-modal-container .cd-switcher a ( hündürlük: 70px; xətt hündürlüyü: 70px; ) ) .cd-forma ( doldurma: 1.4em; ) .cd-forma .fieldset (mövqe: nisbi; kənar: 1.4em 0; ) .cd-forma .fieldset:birinci uşaq (margin-top: 0; ) .cd-form .fieldset:son -child ( margin-alt: 0; ) .cd-forma etiketi ( şrift ölçüsü: 14px; şrift ölçüsü: 0.875rem ) .cd-form label.image-replace ( /* mətni işarə ilə əvəz edin */ displey: inline-block; mövqe: mütləq; sol: 15px; yuxarı: 50%; alt: avtomatik; -webkit-transform: translateY(- 50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); hündürlük : 20px; en: 20px; daşqın: gizli; mətn girintisi: 100%; ağ boşluq: nowrap; rəng: şəffaf; mətn kölgəsi: heç biri; fon-təkrar: təkrar olunmur; fon mövqeyi: 50% 0; ) /* Giriş sahəsinin nişanları */ .cd-forma etiketi. cd-istifadəçi adı ( fon şəkli: url(". ./img/cd-icon-username.svg"); ) .cd-form label.cd-email (fon şəkli: url("../img/cd-icon-email.svg"); ) .cd -forma etiketi.cd-parol (fon şəkli: url("../img/cd-icon-password.svg"); ) .cd-forma daxiletməsi ( kənar: 0; doldurma: 0; sərhəd radiusu: 0.25 em; ) .cd-forma girişi.tam genişlik (en: 100%; ) .cd-forma girişi.doldurma var ( padding: 12px 20px 12px 50px; ) .cd-forma girişi.has-barder ( sərhəd: 1px) bərk #d2d8d8; -webkit-görünüş: heç biri; -moz-görünüş: heç biri; -ms-görünüş: heç biri; -o-görünüş: heç biri; görünüş: heç biri; ) .cd-forma girişi.has-border:focus ( sərhəd) -rəng: #343642; qutu-kölgə: 0 0 5px rgba(52, 54, 66, 0.1); kontur: heç biri; ) .cd-forma girişi.has-xəta ( haşiyə: 1px bərk #d76666; ) .cd- forma girişi ( /* Gizlət düyməsi üçün boşluq */ padding-sağ: 65px; ) .cd-forma girişi (doldurma: 16px 0; kursor: göstərici; fon: #2f889a; rəng: #FFF; şrift çəkisi: qalın; haşiyə : none; -webkit-görünüş: heç biri; -moz-görünüş: heç biri; -ms-görünüş: heç biri; -o-görünüş: heç biri; görünüş: heç biri; ) .no-touch .cd-forma girişi:hover, .no-touch .cd-forma girişi:fokus ( fon: #3599ae; kontur: heç biri; ) .cd-form .gizlət-parol ( ekran: inline-block; mövqe: mütləq; sağ: 0; yuxarı: 0; doldurma: 6px 15px; haşiyə-sol: 1px bərk #d2d8d8; yuxarı: 50%; alt: avtomatik; -webkit-transform: translateY(-50%); -moz- transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font ölçüsü: 14px; font- ölçü: 0.875rem; rəng: #343642; ) .cd-form .cd-xəta mesajı ( displey: inline-block; mövqe: mütləq; sol: -5px; alt: -35px; fon: rgba(215, 102, 102, 0.9); dolgu: .8em; z-indeks: 2; rəng: #FFF; şrift ölçüsü: 13px; şrift ölçüsü: 0.8125rem; sərhəd radiusu: 0.25em; /* kliklərin və toxunuşların qarşısını alır */ göstərici -hadisələr: heç biri; görünmə: gizli; qeyri-şəffaflıq: 0; -webkit-keçid: qeyri-şəffaflıq 0,2s 0, görünmə 0,2s; -moz-keçid: qeyri-şəffaflıq 0,2s 0, görünmə 0,2s; keçid: qeyri-şəffaflıq 0,2s görmə qabiliyyəti 0 0,2s; ) .cd-form .cd-error-message::after ( /* xəta mesajı küncü */ məzmunu: ""; mövqe: mütləq; sol: 22px; alt: 100%; hündürlük: 0; en: 0; sərhəd - sol: 8px tam şəffaf; haşiyə-sağ: 8px bərk şəffaf; haşiyə-alt: 8px bərk rgba(215, 102, 102, 0.9); ) .cd-form .cd-error-message.is-visible ( qeyri-şəffaflıq: 1 ; görünürlük: görünən; -webkit-keçid: qeyri-şəffaflıq 0.2s 0, görünmə 0 0; -moz-keçid: qeyri-şəffaflıq 0. 2s 0, görünürlük 0 0; keçid: qeyri-şəffaflıq 0.2s 0, görünürlük 0 0; ) @media yalnız ekran və (min-en: 600px) ( .cd-forma ( padding: 2em; ) .cd-form .fieldset ( kənar: 2em 0; ) .cd-form .fieldset:first-child ( margin- top: 0; ) .cd-forma .fieldset:son-child (margin-alt: 0; ) .cd-forma girişi. has-padding ( padding: 16px 20px 16px 50px; ) .cd-form girişi ( padding: 16px 0; ) ) .cd-form-message ( dolgu: 1.4em 1.4em 0; şrift ölçüsü: 14px; şrift ölçüsü: 0.875rem; sətir hündürlüyü: 1.4; mətni align: mərkəz; ) @media yalnız ekran və (min-en: 600px) ( .cd-form-message ( padding: 2em 2em 0; ) ) .cd-form-bottom-message ( mövqe: mütləq; en: 100%; sol: 0; alt: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; ) .cd-form-bottom-message a (rəng: #FFF; text-decoration: underline; ) .cd-close-form ( / * yuxarı sağ düymə X üslubu */ ekran: blok; mövqe: mütləq; en: 40px; hündürlük: 40px; sağ: 0; yuxarı: -40px; fon: url("../img/cd-icon-close.svg" ") təkrar mərkəz mərkəzi; mətn girintisi: 100%; ağ boşluq: nowrap; daşqın: gizli; ) @media yalnız ekran və (min-en: 1170px) ( .cd-close-form ( display: none; ) ) #cd-login, #cd-signup, #cd-reset-password ( display: none; ) # cd-login.is-seçilmiş, #cd-signup.is-seçilmiş, #cd-reset-password.is-seçilmişdir (ekran: blok; )

Görünüş keçid effektində modal pəncərənin bağlandığı zaman sönməsi üçün gecikmə əlavə edildi.

Qeyd:. Bütün daxiletmə sahələrinin şrift ölçüsü standart olaraq 16px olaraq təyin edilmişdir. Bu, mobil cihazlarda baxıldıqda baş verən avtomatik miqyaslamanın qarşısını alır.

Müəllifin, plaqinin burjua versiyası yer alır. Eyni yerdə orijinalı yükləyə bilərsiniz.
Rus versiyası, Yandex.Diskimdən götürə bilərsiniz, hər şey zəruri fayllar, diqqətlə bir arxivdə qablaşdırılır, bundan əvvəl bu gözəl jQuery plagininin tam uyğunlaşdırılmış canlı nümunəsinə baxmağı unutmayın:

Bütün hörmətlə, Endryu

Əlaqə formalarının yaradılması: əks əlaqə, şərh, giriş forması, daxil edilmiş məlumatların düzgünlüyünün yoxlanılması ilə qeydiyyat forması.

Səliqəli forma ilə addım-addım doldurulması. Aşağıda formanın doldurulmasının göstəricisidir.

Doldurmanın düzgünlüyünün yoxlanılması ilə formanın bir neçə addımda doldurulması.

Daxil edilmiş məlumatların düzgünlüyünün yoxlanılması javascript-dən istifadə edərək mesaj göndərilməzdən əvvəl "tezliklə" həyata keçirilir.

Giriş forması, qeydiyyat forması və parol bərpa sahəsi arasında jQuery istifadə edərək animasiyalı keçid. Demo səhifəsində effekti görmək üçün sarı linkə klikləyin.

Belə bir həll ziyarətçiyə istənilən səhifədən sayt sahibi ilə tez əlaqə saxlamaq imkanı vermək üçün istifadə edilə bilər. Demo səhifəsində formanı açmaq üçün aşağıdakı oxu klikləyin.

Daxil edilmiş məlumatların təsdiqi ilə forma.

CSS, PHP və jQuery ilə həyata keçirilən gözəl qeydiyyat forması.

Mesaj göndərməzdən əvvəl yeni sahələr əlavə etmək imkanı həyata keçirilib.

Məlumat daxiletməsinin təsdiqi ilə gözəl səliqəli PHP rəy forması. Texnologiyalar: CSS, PHP, jQuery.

Doldurmanın düzgünlüyünün yoxlanılması ilə.

Tez bir mesaj göndərmək üçün gedən rəy formasını tətbiq etmək.