Jquery kayıt formu. jQuery ile adım adım kayıt

> Giriş Formu >

>

hatırlamak >
>

>

>

Adım 2 - Genel Stiller

İlk olarak, tüm kenar boşluklarını, dolguyu, kenarlıkları vb. kaldırın. kullanacağımız elemanlardan.

Giriş Formu,
.login-form h1,
.login-form aralığı,
.login-form girişi,
.login-form etiketi (
kenar boşluğu: 0;
dolgu: 0;
sınır: 0;
anahat: 0;
}

Ardından, form kapsayıcısını biçimlendireceğiz. Göreceli konumlandırma, sabit genişlik ve yükseklik, arka plan rengi, yuvarlatılmış köşeler ve gölgeler ekleyeceğiz.

Giriş Formu (
pozisyon: göreceli;
genişlik: 200 piksel;
yükseklik: 200 piksel;
dolgu: 15px 25px 0 25px;
üst kenar boşluğu: 15 piksel;
imleç: varsayılan;

arka plan rengi: # 141517;

Webkit-border-radius: 5px;
-moz-border-radius: 5px;
sınır yarıçapı: 5 piksel;

Webkit-box-shadow: 0px 1px 1px 0px rgba (255, 255, 255, .2), iç metin 0px 1px 1px 0px rgb (0, 0, 0);
-moz-box-shadow: 0px 1px 1px 0px rgba (255, 255, 255, .2), iç metin 0px 1px 1px 0px rgb (0, 0, 0);
kutu gölgesi: 0px 1px 1px 0px rgba (255, 255, 255, .2), iç metin 0px 1px 1px 0px rgb (0, 0, 0);
}

Oku oluşturmak için: önce seçicisini kullanacağız.

Giriş formu: önce (
pozisyon: mutlak;
üst: -12 piksel;
sol: 10 piksel;

genişlik: 0 piksel;
yükseklik: 0 piksel;
içerik: "";

kenarlık-alt: 10 piksel katı # 141517;
sağ kenarlık: 10 piksel katı # 141517;
üst kenarlık: 10 piksel katı şeffaf;
sol kenarlık: 10 piksel düz şeffaf;
}

Formun başlığı için bazı stiller ekleyelim (renk, yazı tipi ve boyut vb.).

Giriş formu h1 (
satır yüksekliği: 40 piksel;
yazı tipi ailesi: "Sayısız Pro", sans-serif;
yazı tipi boyutu: 22 piksel;
yazı tipi ağırlığı: normal;
renk: # e4e4e4;
}

Adım 3 - Form Alanları için Ortak Stiller

İlk olarak, girişler için temel stilleri ayarlayalım.

satır yüksekliği: 14 piksel;
kenar boşluğu: 10 piksel 0;
dolgu: 6px 15px;
sınır: 0;
anahat: yok;

yazı tipi ailesi: Helvetica, sans-serif;
yazı tipi boyutu: 12 piksel;
yazı tipi ağırlığı: kalın;
metin gölgesi: 0px 1px 1px rgba (255, 255, 255, .2);

Webkit-border-radius: 26px;
-moz-border-radius: 26px;
sınır yarıçapı: 26 piksel;

Webkit geçişi: tüm .15'ler giriş-çıkış kolaylığı;
-moz geçişi: tüm .15'lerin giriş-çıkış kolaylığı;
-o-geçiş: tüm .15'lerin giriş-çıkış kolaylığı;
geçiş: tüm .15s kolay giriş-çıkış;
}

Ardından giriş ve şifre alanlarını şekillendireceğiz. Gradyan gri bir arka plan ekleyeceğiz ve gölgeler bırakacağız. Ayrıca 170 piksellik sabit bir genişlik ve metin için bir renk ekleyeceğiz.

Giriş formu girişi [type = text],
.login-form girişi [type = password],
.js .login-form aralığı (
renk: # 686868;
genişlik: 170 piksel;

Webkit-box-shadow: 1px 1px 1px 0px rgba (255, 255, 255, .6);
-moz-box-shadow: 1px 1px 1px 0px rgba (255, 255, 255, .6);
kutu gölgesi: 1px 1px 1px 0px rgba (255, 255, 255, .6);

arka plan: # 989898;
arka plan: -moz-doğrusal-gradyan (üstte, #ffffff %0, # 989898 %100);
arka plan: -webkit-gradyan (doğrusal, sol üst, sol alt, renk durdurma (%0, #ffffff), renk durdurma (%100, # 989898));
arka plan: -webkit-doğrusal-gradyan (üstte, #ffffff %0, # 989898 %100);
arka plan: -o-doğrusal-gradyan (üst, #ffffff %0, # 989898 %100);
arka plan: -ms-doğrusal-gradyan (üstte, #ffffff %0, # 989898 %100);
arka plan: doğrusal gradyan (üst, #ffffff %0, # 989898 %100);
}

Bu alanların üzerine geldiğimizde gölgelerini değiştireceğiz.

Giriş formu girişi [tür = metin]: üzerine gelin,
.login-form girişi [tür = şifre]: üzerine gelin (
-webkit-box-shadow: 1px 1px 1px 0px rgba (255, 255, 255, .6), 0px 0px 5px rgba (255, 255, 255, .5);
-moz-box-shadow: 1px 1px 1px 0px rgba (255, 255, 255, .6), 0px 0px 5px rgba (255, 255, 255, .5);
kutu gölgesi: 1px 1px 1px 0px rgba (255, 255, 255, .6), 0px 0px 5px rgba (255, 255, 255, .5);
}

Aktif durum için CSS3 gradyanını biraz daha hafif olana değiştireceğiz.

Giriş formu girişi [tür = metin]: odak,
.login-form girişi [tür = şifre]: odak (
arka plan: # e1e1e1;
arka plan: -moz-doğrusal-gradyan (üstte, #ffffff %0, # e1e1e1 %100);
arka plan: -webkit-gradyan (doğrusal, sol üst, sol alt, renk durdurma (%0, #ffffff), renk durdurma (%100, # e1e1e1));
arka plan: -webkit-doğrusal-gradyan (üstte, #ffffff %0, # e1e1e1 %100);
arka plan: -o-doğrusal-gradyan (üst, #ffffff %0, # e1e1e1 %100);
arka plan: -ms-doğrusal-gradyan (üstte, #ffffff %0, # e1e1e1 %100);
arka plan: doğrusal gradyan (üst, #ffffff %0, # e1e1e1 %100);
}

Adım 4 - Gönder Düğmesi

Düğmeyi sağa kaydırarak sağa yerleştirin: sağa.

Giriş formu girişi [tür = gönder] (
Sağa çık;
imleç: işaretçi;

renk: # 445b0f;

Webkit kutusu gölgesi: 1px 1px 1px 0px rgba (255, 255, 255, .45), 0px 1px 1px 0px rgba (0, 0, 0, .3);
-moz-box-shadow: 1px 1px 1px 0px rgba (255, 255, 255, .45), 0px 1px 1px 0px rgba (0, 0, 0, .3);
kutu gölgesi: 1px 1px 1px 0px rgba (255, 255, 255, .45), 0px 1px 1px 0px rgba (0, 0, 0, .3);
}

Fareyle üzerine gelindiğinde gölgeleri değiştireceğiz ve aktif durumda onları kaldıracağız.

Giriş formu girişi [tür = gönder]: üzerine gelin (
-webkit-box-shadow: 1px 1px 3px 0px rgba (255, 255, 255, .8), 0px 1px 1px 0px rgba (0, 0, 0, .6);
-moz-box-shadow: 1px 1px 3px 0px rgba (255, 255, 255, .8), 0px 1px 1px 0px rgba (0, 0, 0, .6);
kutu gölgesi: 1px 1px 3px 0px rgba (255, 255, 255, .8), 0px 1px 1px 0px rgba (0, 0, 0, .6);
}

Giriş formu girişi [tür = gönder]: aktif (
-webkit-box-shadow: yok;
-moz-box-shadow: yok;
kutu gölgesi: yok;
}

Düğme için yeşil bir degrade ekleyelim.

Giriş formu girişi [tür = gönder],
.js .login-form span.checked: önce (
arka plan: # a5cd4e;
arka plan: -moz-doğrusal-gradyan (üstte, # a5cd4e %0, # 6b8f1a %100);
arka plan: -webkit-gradyan (doğrusal, sol üst, sol alt, renk durdurma (%0, # a5cd4e), renk durdurma (%100, # 6b8f1a) ) ;
arka fon: -webkit-doğrusal-gradyan (Tepe, # a5cd4e 0% , # 6b8f1a 100% ) ;
arka fon: -o-doğrusal-gradyan (Tepe, # a5cd4e 0% , # 6b8f1a 100% ) ;
arka fon: -ms-doğrusal-gradyan (Tepe, # a5cd4e 0% , # 6b8f1a 100% ) ;
arka fon: lineer-gradyan (Tepe, # a5cd4e 0% , # 6b8f1a 100% ) ;
}

Adım 5 - Onay kutusu stilleri

Şimdi en zor kısım geliyor, çünkü diğer form alanlarının görünümünü değiştirdiğimiz gibi onay kutularının görünümünü CSS ile değiştiremiyoruz.

Bulduğum en kolay yol, onay kutusunu bir yayılma etiketiyle değiştirmek.

Şu şekilde çalışacak: önce onay kutusunu gizleyip span etiketini bir onay kutusu gibi görünecek şekilde biçimlendireceğiz ve ardından bu onay kutusunu (işaretli/işaretsiz) jQuery ile güncelleyeceğiz.

Bazı kullanıcılar JavaScript'i devre dışı bıraktığından, bir geri dönüş eklememiz gerekiyor. Bunun için ekleyeceğiz "js" jQuery kullanarak sınıftan gövde etiketine. Böylece, JavaScript etkinleştirilirse, sayfa yüklendiğinde gövde etiketine "js" sınıfı eklenir ve JavaScript devre dışı bırakılırsa, sınıf eklenmez. Bu nedenle, yalnızca JavaScript'i etkinleştirilmiş kullanıcılar stil onay kutusunu görecektir.

İlk olarak, onay kutusunu gizleriz.

.js .Giriş Formu giriş [ tip = onay kutusu ] {
konum: sabit;
sol: -9999 piksel;
}

Ardından span etiketini istediğimiz yere yerleştireceğiz.

.Giriş Formu açıklık {
konum: akraba;
kenar boşluğu: 15 piksel;
batmadan yüzmek: sol;
}

Ardından span etiketi için bazı stiller ekleyelim (width, height, border, vb.).

.js .Giriş Formu açıklık {
Genişlik: 16 piksel;
boy uzunluğu: 16 piksel;
imleç: Işaretçi;

Webkit-border-radius : 2 piksel;
-moz-sınır-yarıçapı : 2 piksel;
sınır yarıçapı : 2 piksel;
}

"İşaretli" durumu oluşturmak için, açıklığa küçük bir kare ekleyeceğiz ve merkeze yerleştireceğiz.

.js .Giriş Formu açıklık .kontrol: önce{
içerik: "" ;
konum: mutlak;
Tepe: 4 piksel;
sol: 4 piksel;
Genişlik: 8 piksel;
boy uzunluğu: 8 piksel;

Webkit-kutusu-gölge : 0 piksel 1 piksel 1 piksel 0 piksel rgba (255 , 255 , 255 , .45) , iç metin 0 piksel 1 piksel 1 piksel 0 piksel rgba (0 , 0 , 0 , .3) ;
-moz-box-gölge : 0 piksel 1 piksel 1 piksel 0 piksel rgba (255 , 255 , 255 , .45) , iç metin 0 piksel 1 piksel 1 piksel 0 piksel rgba (0 , 0 , 0 , .3) ;
kutu-gölge : 0 piksel 1 piksel 1 piksel 0 piksel rgba (255 , 255 , 255 , .45) , iç metin 0 piksel 1 piksel 1 piksel 0 piksel rgba (0 , 0 , 0 , .3) ;
}

Etiket etiketini onay kutusunun sağına yerleştireceğiz ve bazı temel stiller (yazı tipi, renk vb.) ekleyeceğiz.

.Giriş Formu etiket {
konum: mutlak;
Tepe: 1 piksel;
sol: 25 piksel;
font ailesi: sans Serif;
yazı tipi ağırlığı: gözü pek;
yazı Boyutu: 12 piksel;
renk: # e4e4e4;
}

Başında "js" sınıfı olan tüm stiller yalnızca JavaScript etkinleştirilmişse uygulanacaktır.

6. Adım - jQuery

İlk önce Google API kullanarak jQuery kitaplığının en son sürümünü bağlayacağız, isterseniz kendi sunucunuzda barındırabilirsiniz, bu sizin seçiminiz. Ardından, kapanış etiketinden önce HTML dosyasının altına aşağıdaki kodu ekleyin .

< komut dosyası kaynağı = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> senaryo >
< senaryo >
$( belge ) .hazır(işlev() {

// JavaScript'in etkin olup olmadığını kontrol edin
$("vücut") .addClass("js") ;

// Yükte onay kutusunu işaretle
$(".login-form aralığı") .addClass("kontrol") .çocuklar("giriş") .attr("kontrol", NS) ;

// fonksiyonu tıklayın
$(".login-form aralığı") .üzerinde("Tıklayın", işlev() {

Eğer ($(Bugün nasılsın) .çocuklar("giriş") .attr("kontrol") ) {
$(Bugün nasılsın) .çocuklar("giriş") .attr("kontrol", YANLIŞ) ;
$(Bugün nasılsın) .kaldırSınıf("kontrol") ;
}

Başka {
$(Bugün nasılsın) .çocuklar("giriş") .attr("kontrol", NS) ;
$(Bugün nasılsın) .addClass("kontrol") ;
}
} ) ;
} ) ;
senaryo >

İlk olarak, body etiketine "js" sınıfını ekleyeceğiz.

Herhangi bir sorunuz varsa, en kısa sürede yanıt almak için forumumuzu kullanmanızı öneririz.

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

Bu yöntem, giriş ve kayıt formlarını sitenizin her sayfasında kullanıcılara sunmak istiyorsanız faydalı olacaktır. Kullanıcılar siteye girerken veya kayıt olurken başka bir sayfaya yönlendirilmeyecek, gerekli tüm işlemleri "çıkıştan çıkmadan" tek bir sayfada gerçekleştirebileceklerdir.

Pop-up formların görünümü CSS3 kullanılarak gerçekleştirilir, eklentinin toplam ağırlığı hiç de büyük değildir, modal pencerenin yanıtı ve yüklenmesi pratikte gecikme olmadan gerçekleşir.
%100 duyarlı bir düzen, form modunun yüksekliği ve genişliği, kullanıcı cihazlarının ekran boyutlarına uyacak şekilde otomatik olarak ayarlanır.

Bir örneğe baktık, şimdi web sitemizde nasıl kullanılacağını öğrenmek için modal bir pencerenin ve formların tüm ana bileşenlerine bir göz atalım.
Oturum açma ve kayıt formlarını içeren açılır pencere, popüler javascript kitaplığı, yürütülebilir jQuey eklentisi ve oluşturulan CSS stilleri üzerine kurulmuştur. Tüm bu araçların sitenize bağlı olması gerekir. jQuey kitaplığının en son güncel sürümü doğrudan Google'dan bağlanabilir, main.js eklenti dosyasının kendisi ve hazır oluşturulmuş stiller seti style.css arşivde bulunabilir.
Kapanış etiketinden önce Javascript, CSS stilleri kopyalanabilir ve sitenizin stylesheet.css dosyasına eklenebilir.

HTML Yapısı:

Karartılmış bir arka plan üzerinde kalıcı pencerelerin temel kabı ve denetimleri olan yerleşik formlar sayfanın gövdesine yerleştirilir. Daha iyi anlaşılması için sektörleri sınırlandırdım ve yorumlar ekledim. Tüm tasarım öğeleri belirli sınıflar aracılığıyla CSS ile sıkı bir şekilde bağlantılıdır, bu nedenle formları sitelerinizin genel tasarımına uyacak şekilde yeniden tasarlamak kolaydır.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >giriş < li>< a href= "#0" >kayıt < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >e-posta < input class = id= "signin-email" type= "email" placeholder= "E-posta" > < span class = "cd-error-message" >İşte hata mesajı! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Parola < input class = "tam genişlikte dolgunun sınırı vardır" id = "signin-password" type = "metin" yer tutucu = "(! LANG: Şifre" > !}< a href= "#0" class = "hide-password" >Saklamak < span class = "cd-error-message" >İşte hata mesajı! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Beni hatırla < p class = "fieldset" > < input class = "full-width" type= "submit" value= "İçeri gel" > < p class = "cd-form-bottom-message" >< a href= "#0" >Parolanızı mı unuttunuz? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Kullanıcı adı < input class = "tam genişlikte dolgunun sınırı vardır" id = "kayıt-kullanıcı adı" type = "metin" yer tutucusu = "Kullanıcı adı"> < span class = "cd-error-message" >İşte hata mesajı! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >e-posta < input class = "tam genişlikte dolgunun sınırı vardır" id = "kayıt-e-posta" type = "email" yer tutucu = "(! LANG: E-posta" > !}< span class = "cd-error-message" >İşte hata mesajı! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Parola < input class = "tam genişlikte dolgunun sınırı vardır" id = "kayıt-şifresi" type = "metin" yer tutucu = "(! LANG: Şifre" > !}< a href= "#0" class = "hide-password" >Saklamak < span class = "cd-error-message" >İşte hata mesajı! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >katılıyorum< a href= "#0" >Koşullar < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Bir hesap oluşturun"> < div id= "cd-reset-password" > < p class = "cd-form-message" >Parolanızı mı unuttunuz? Lütfen e-mail adresinizi giriniz. Yeni bir şifre oluşturmak için bir bağlantı alacaksınız. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >e-posta < input class = "tam genişlikte dolgunun sınırı vardır" id = "reset-email" type = "email" placeholder = "(! LANG: E-posta" > !}< span class = "cd-error-message" >İşte hata mesajı! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Parola Yenile"> < p class = "cd-form-bottom-message" >< a href= "#0" >Girişe geri dön < a href= "#0" class = "cd-close-form" >Kapat

• giriş
• kayıt

E-posta İşte hata mesajı!

Parola Saklamak İşte hata mesajı!

Beni hatırla

Parolanızı mı unuttunuz?

Kullanıcı adı İşte hata mesajı!

E-posta İşte hata mesajı!

Parola Saklamak İşte hata mesajı!

şartlara katılıyorum

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 İşte hata mesajı!

Girişe geri dön

Kapat

CSS Stilleri:

Temel şablon ve form kontrolleri, yazar popüler, düz stilde (Düz), minimalizme net bir vurgu yaparak yaptı. Gereksiz hiçbir şey yok, orta derecede şeffaf gölgelendirme arka planı, okunması kolay renkler, iyi seçilmiş yazı tipi ve giriş alanlarını belirtmek için simgeler. CSS özellikleriyle 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; imleç: işaretçi; görünürlük: gizli; opaklık: 0; -webkit-geçişi: opaklık 0,3s 0, görünürlük 0 0,3s; -moz-geçişi: opaklık 0,3s 0, görünürlük 0 0,3s; geçiş: opaklık 0,3 s 0, görünürlük 0 0.3s;) .cd-user-modal .is-visible (görünürlük: görünür; opaklık: 1; -webkit-geçiş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;) .cd-user-modal .is-visible .cd-user-modal-container (-webkit-transform: translateY (0); -moz- transform: translateY (0); -ms-transform: translateY (0); -o-transform: translateY (0); transform: translateY (0);) .cd-user-modal-container (konum: göreli; genişlik: %90; maksimum wi dth: 600 piksel; arka plan: #FFF; kenar boşluğu: 3em otomatik 4em; imleç: otomatik; sınır yarıçapı: 0.25em; -webkit-transform: translateY (-30 piksel); -moz-dönüşüm: çeviriY (-30 piksel); -ms-dönüşüm: çeviriY (-30 piksel); -o-dönüşüm: çevirY (-30 piksel); dönüştür: çevirY (-30 piksel); -webkit-geçiş-özelliği: -webkit-dönüşüm; -moz-geçiş-özelliği: -moz-dönüşümü; geçiş özelliği: dönüşüm; -webkit-geçiş-süresi: 0.3s; -moz-geçiş-süresi: 0.3s; geçiş süresi: 0,3 sn; ) .cd-user-modal-container .cd-switcher: after (içerik: ""; ekran: tablo; clear: her ikisi;) .cd-user-modal-container .cd-switcher li (genişlik: %50; kayan nokta : sol; metin hizalama: merkez;) .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 (ekran: blok; genişlik: %100; yükseklik: 50 piksel; satır yüksekliği : 50px; arka plan: # d2d8d8; renk: # 809191;) .cd-user-modal-container .cd-switcher a.selected (background: #FFF; color: # 505260;) @media yalnızca ekran ve (min-width : 600px) (.cd-user-modal-container (marj: 4em auto;) .cd-user-modal-container .cd-switcher a (yükseklik: 70px; satır yüksekliği: 70px;)) .cd-form ( dolgu: 1. 4em; ) .cd-form .fieldset (konum: göreli; kenar boşluğu: 1.4em 0;) .cd-form .fieldset: birinci-çocuk (kenar-üst: 0;) .cd-form .fieldset: son-çocuk (kenar- alt: 0;) .cd-form etiketi (font-size: 14px; font-size:0.875rem;) .cd-form label.image-replace ( / * metni simgeyle değiştir * / ekran: satır içi blok; pozisyon: mutlak; sol: 15 piksel; üst: %50; alt: otomatik; -webkit-transform: translateY (-50%); -moz-dönüşüm: çeviriY (-50%); -ms-dönüşüm: çeviriY (-50%); -o-dönüşüm: çevirY (-50%); transform: translateY (-50%); yükseklik: 20 piksel; genişlik: 20 piksel; taşma: gizlenmiş; metin girintisi: 100% ; Beyaz boşluk: şimdi rap; renk: şeffaf; Metin gölgesi: Yok; arka plan-tekrar: tekrarsız; arka plan konumu: 50% 0 ; } / * Giriş alanları için simgeler * / .cd formu etiket .cd-kullanıcı adı { arka plan görüntüsü: url("../img/cd-icon-kullaniciadi.svg") ; } .cd formu etiket .cd-e-posta { arka plan görüntüsü: url("../img/cd-icon-email.svg") ; } .cd formu etiket .cd-şifre { arka plan görüntüsü: url("../img/cd-icon-password.svg") ; } .cd formu giriş { kenar boşluğu: 0 ; dolgu malzemesi: 0 ; sınır yarıçapı: 0.25em; } .cd formu giriş .Tam genişlik { Genişlik: 100% ; } .cd formu giriş .dolgulu { dolgu malzemesi: 12 piksel 20 piksel 12 piksel 50 piksel; } .cd formu giriş .sınırlıdır { sınır: 1 piksel sağlam # d2d8d8; -webkit-görünüm : Yok; -moz-görünüm : Yok; -ms-görünüm : Yok; -o-görünüm : Yok; dış görünüş : Yok; } .cd formu giriş .sınırlıdır: odak { sınır rengi: #343642 ; kutu-gölge: 0 0 5 piksel rgba(52 , 54 , 66 , 0.1 ) ; anahat: Yok; } .cd formu giriş .has-hatası { sınır: 1 piksel sağlam # d76666; } .cd formu giriş [ tip = parola ] { / * Gizle düğmesi için boşluk * / dolgu-sağ: 65 piksel; } .cd formu giriş [ tip = Sunmak ] { dolgu malzemesi: 16 piksel 0 ; imleç: Işaretçi; arka fon: # 2f889a; renk: #FFF; yazı tipi ağırlığı: gözü pek; sınır: Yok; -webkit-görünüm : Yok; -moz-görünüm : Yok; -ms-görünüm : Yok; -o-görünüm : Yok; dış görünüş : Yok; } .dokunmak yok .cd formu giriş [ tip = Sunmak ] : üzerine gelmek, .dokunmak yok .cd formu giriş [ tip = Sunmak ] : odak { arka fon: # 3599ae; anahat: Yok; } .cd formu .şifreyi gizle { Görüntüle: satır içi blok; konum: mutlak; sağ: 0 ; Tepe: 0 ; dolgu malzemesi: 6 piksel 15 piksel; sınır-sol: 1 piksel sağlam # d2d8d8; Tepe: 50% ; alt: Oto; -webkit-dönüşüm : çevirY (-50% ) ; -moz-dönüşümü : çevirY (-50% ) ; -ms-dönüşüm : çevirY (-50% ) ; -o-dönüşüm : çevirY (-50% ) ; dönüştürmek: çevirY (-50% ) ; yazı Boyutu: 14 piksel; yazı Boyutu: 0.875 rem; renk: #343642 ; } .cd formu .cd-hata-mesajı { Görüntüle: satır içi blok; konum: mutlak; sol: -5 piksel; alt: -35 piksel; arka fon: rgba(215 , 102 , 102 , 0.9 ) ; dolgu malzemesi: .8em; z-endeksi: 2 ; renk: #FFF; yazı Boyutu: 13 piksel; yazı Boyutu: 0,8125 rem; sınır yarıçapı: 0.25em; / * tıklamaları ve dokunmaları engelle * / işaretçi olayları: Yok; görünürlük: gizlenmiş; opaklık: 0 ; -webkit-geçiş : opaklık 0.2s 0 , görünürlük 0 0.2s; -moz-geçiş : opaklık 0.2s 0 , görünürlük 0 0.2s; geçiş: opaklık 0.2s 0 , görünürlük 0 0.2s; } .cd formu .cd-hata-mesajı:: sonrasında { / * hata mesajının köşesi * / içerik: "" ; konum: mutlak; sol: 22 piksel; alt: 100% ; boy uzunluğu: 0 ; Genişlik: 0 ; sınır-sol: 8 piksel sağlam şeffaf; sınır-sağ: 8 piksel sağlam şeffaf; sınır-alt: 8 piksel sağlam rgba(215 , 102 , 102 , 0.9 ) ; } .cd formu .cd-hata-mesajı.görünür { opaklık: 1 ; görünürlük: gözle görülür; -webkit-geçiş : opaklık 0.2s 0 , görünürlük 0 0 ; -moz-geçiş : opaklık 0.2s 0 , görünürlük 0 0 ; geçiş: opaklık 0.2s 0 , görünürlük 0 0 ; } @medya sadece ekran ve (minimum genişlik: 600 piksel) { .cd formu { dolgu malzemesi: 2em; } .cd formu .fieldset { kenar boşluğu: 2em 0 ; } .cd formu .fieldset: ilk çocuk { kenar boşluğu: 0 ; } .cd formu .fieldset: son çocuk { kenar boşluğu-alt: 0 ; } .cd formu giriş .dolgulu { dolgu malzemesi: 16 piksel 20 piksel 16 piksel 50 piksel; } .cd formu giriş [ tip = Sunmak ] { dolgu malzemesi: 16 piksel 0 ; } } .cd-form-mesajı { dolgu malzemesi: 1.4em 1.4em 0 ; yazı Boyutu: 14 piksel; yazı Boyutu: 0.875 rem; satır yüksekliği: 1.4 ; Metin hizalama: merkez; } @medya sadece ekran ve (minimum genişlik: 600 piksel) { .cd-form-mesajı { dolgu malzemesi: 2em 2em 0 ; } } .cd-form-alt-mesaj { konum: mutlak; Genişlik: 100% ; sol: 0 ; alt: -30 piksel; Metin hizalama: merkez; yazı Boyutu: 14 piksel; yazı Boyutu: 0.875 rem; } .cd-form-alt-mesaj a { renk: #FFF; metin-dekorasyon: altını çizmek; } .cd-yakın-form { / * stil X düğmesi sağ üst * / Görüntüle: engellemek; konum: mutlak; Genişlik: 40 piksel; boy uzunluğu: 40 piksel; sağ: 0 ; Tepe: -40 piksel; arka fon: url("../img/cd-icon-close.svg") tekrarsız merkez merkez; metin girintisi: 100% ; Beyaz boşluk: şimdi rap; taşma: gizlenmiş; } @medya sadece ekran ve (minimum genişlik: 1170 piksel) { .cd-yakın-form { Görüntüle: Yok; } } # cd-giriş, # cd-kayıt, # cd-reset-şifre { Görüntüle: Yok; } # cd-giriş.seçildi, # cd-kayıt.seçildi, # cd-reset-şifre.seçildi { Görüntüle: engellemek; }

Cd kullanıcı modu (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; imleç: işaretçi; görünürlük: gizli; opaklık: 0; -webkit-geçişi: opaklık 0,3s 0, görünürlük 0 0,3s; -moz-geçişi: opaklık 0,3s 0, görünürlük 0 0,3s; geçiş: opaklık 0,3s 0, görünürlük 0 0.3s;) .cd-user-modal.is-visible (görünürlük: görünür; opaklık: 1; -webkit-geçiş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;) .cd-user-modal.is-visible .cd-user-modal-container (-webkit-transform: translateY (0); -moz-transform) : translateY (0); -ms-transform: translateY (0); -o-transform: translateY (0); transform: translateY (0);) .cd-user-modal-container (konum: göreli; genişlik: 90 %; maksimum genişlik: 600 piksel; arka plan: #FFF; kenar boşluğu: 3em otomatik 4em; imleç: otomatik; sınır yarıçapı: 0,25em; -webkit-transform: translateY (-30 piksel); -moz-transform: çevirY (-30 piksel); -ms-dönüşüm: çevirY (-30 piksel); -o-dönüşüm: çevirY (-30 piksel); dönüştürmek: çevirY (-30 piksel); -webkit-geçiş-özelliği: -webkit-dönüşüm; -moz-geçiş-özelliği: -moz-dönüşümü; geçiş özelliği: dönüşüm; -webkit-geçiş-süresi: 0.3s; -moz-geçiş-süresi: 0.3s; geçiş süresi: 0,3 sn; ) .cd-user-modal-container .cd-switcher: after (içerik: ""; ekran: tablo; clear: her ikisi;) .cd-user-modal-container .cd-switcher li (genişlik: %50; kayan nokta : sol; metin hizalama: merkez;) .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 (ekran: blok; genişlik: %100; yükseklik: 50 piksel; satır yüksekliği : 50px; arka plan: # d2d8d8; renk: # 809191;) .cd-user-modal-container .cd-switcher a.selected (background: #FFF; color: # 505260;) @media yalnızca ekran ve (min-width : 600 piksel) (.cd-user-modal-container (marj: 4em auto;) .cd-user-modal-container .cd-switcher a (yükseklik: 70px; satır yüksekliği: 70px;)) .cd-form ( dolgu: 1.4em;) .cd-form .fieldset (konum: göreli; kenar boşluğu: 1.4em 0;) .cd-form .fieldset: first-child (margin-top: 0;) .cd-form .fieldset: last -child (kenar boşluğu: 0;) .cd-form etiketi (font-siz e: 14 piksel; yazı tipi boyutu: 0.875rem; ) .cd-form label.image-replace (/ * metni simgeyle değiştirin * / display: satır içi blok; konum: mutlak; sol: 15 piksel; üst: %50; alt: otomatik; -webkit-transform: translateY (- %50); -moz-transform: translateY (-50%); -ms-transform: translateY (-50%); -o-transform: translateY (-50%); transform: translateY (-50%); yükseklik : 20 piksel; genişlik: 20 piksel; taşma: gizli; metin girintisi: %100; beyaz boşluk: nowrap; renk: şeffaf; metin gölgesi: yok; arka plan tekrarı: tekrar yok; arka plan konumu: %50 0; ) / * Giriş alanı simgeleri * / .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; kenarlık 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 (kenarlık: 1px katı # d2d8d8; -webkit-görünümü: yok; -moz-görünümü: yok; -ms-görünümü: yok; -o-görünümü: yok; görünüm: yok;) .cd-form input.has-border: odak (kenarlık -color: # 343642; kutu-gölge: 0 0 5px rgba (52, 54, 66, 0.1); anahat: yok;) .cd-form input.has-error (kenarlık: 1px katı # d76666;) .cd- form girişi (/ * Gizle düğmesi için boşluk * / dolgu-sağ: 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; -o-görünüm: yok; görünüm: yok; ) .no-touch .cd-form girişi: üzerine gelin, .no-touch .cd-form girişi: odak (arka plan: # 3599ae; anahat: yok;) .cd-form .hide-password (ekran: satır içi blok; konum: mutlak; sağ: 0; üst: 0; dolgu: 6 piksel 15 piksel; kenar-sol: 1 piksel katı # d2d8d8; üst: %50; alt: otomatik; -webkit-transform: translateY (-50%); -moz- transform: translateY (-50%); -ms-transform: translateY (-50%); -o-transform: translateY (-50%); transform: translateY (-50%); yazı tipi boyutu: 14 piksel; yazı tipi- boyut: 0.875rem; renk: # 343642;) .cd-form .cd-hata mesajı (ekran: satır içi blok; konum: mutlak; sol: -5 piksel; alt: -35 piksel; arka plan: rgba (215, 102, 102, 0.9); dolgu: .8em; z-endeksi: 2; renk: #FFF; yazı tipi boyutu: 13 piksel; yazı tipi boyutu: 0.8125rem; kenarlık yarıçapı: 0.25em; / * tıklamaları ve dokunmaları önleyin * / işaretçi -events: yok; görünürlük: gizli; opaklık: 0; -webkit-geçişi: opaklık 0,2s 0, görünürlük 0 0,2s; -moz-geçişi: opaklık 0,2s 0, görünürlük 0 0,2s; geçiş: opaklık 0,2s 0, ziyaret bility 0 0.2s; ) .cd-form .cd-hata-mesajı :: after (/ * hata mesajının köşesi * / içerik: ""; konum: mutlak; sol: 22 piksel; alt: %100; yükseklik: 0; genişlik: 0; border -sol: 8px katı saydam; kenar-sağ: 8px katı saydam; kenarlık-alt: 8px katı rgba (215, 102, 102, 0.9);) .cd-form .cd-error-message.is-visible (opaklık) : 1; görünürlük: görünür; -webkit-geçişi: opaklık 0.2s 0, görünürlük 0 0; -moz-geçişi: opaklık 0. 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 medya ekranı ve (min-width: 600px) (.cd-form (dolgu: 2em;) .cd-form .fieldset (margin: 2em 0;) .cd-form .fieldset: first-child (margin- üst: 0;) .cd-form .fieldset: last-child (marj-alt: 0;) .cd-form input.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: 14px; yazı tipi-boyutu: 0.875rem; satır yüksekliği: 1.4; metin hizalaması: merkez;) @sadece medya ekranı ve (min-genişlik: 600 piksel) (.cd-form-message (dolgu: 2em 2em 0;)) .cd-form-bottom-message (konum: mutlak; genişlik: %100; sol: 0; alt: -30 piksel; metin hizalama: merkez; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0.875rem;) .cd-form-bottom-message a (renk: #FFF; metin-dekorasyonu: altı çizili;) .cd-close-form (/ * sağ üst düğmenin X stili * / ekran: blok; konum: mutlak; genişlik: 40 piksel; yükseklik: 40 piksel; sağ: 0; üst: -40 piksel; arka plan: url ("../ img / cd-icon-close" .svg ") tekrarsız merkez merkezi; metin girintisi: 100 %; boşluk: nowrap; taşma: gizli; ) @media only screen ve (min-width: 1170px) (.cd-close-form (ekran: yok;)) # cd-login, # cd-signup, # cd-reset-password (ekran: yok;) # cd-login.is-seçili, # cd-signup.is-seçili, # cd-reset-password.is-seçili (ekran: blok;)

Soluk geçiş efektinde, modun kapanışta kaybolmasını sağlamak için bir gecikme eklendi.

Not:. Tüm giriş alanlarının varsayılan yazı tipi boyutu 16 pikseldir. Bu, mobil cihazlarda görüntülendiğinde oluşan otomatik ölçeklendirmeyi engeller.

Yazarın, eklentinin burjuva versiyonu yer almaktadır. Aynı yerde, orijinali indirebilirsiniz.
Rusça sürümünü Yandex.Disk'imden alabilirsiniz, tüm gerekli dosyalar dikkatlice tek bir arşivde toplanmıştır, bundan önce, bu harika jQuery eklentisinin çalışmasının tamamen uyarlanmış, canlı örneğine bakmayı unutmayın:

Tüm saygımla, Andrew

Bu makalede, öğreneceksiniz kayıt ve yetkilendirme formu nasıl oluşturulur HTML, JavaScript, PHP ve MySql kullanarak. Bu tür formlar, türünden bağımsız olarak hemen hemen her sitede kullanılmaktadır. Hem forum hem de çevrimiçi mağaza ve sosyal ağlar (örneğin, Facebook, Twiter, Odnoklassniki gibi) ve diğer birçok site türü için oluşturulurlar.

Yerel bilgisayarınızda bir siteniz varsa, umarım buna zaten sahipsinizdir. Onsuz hiçbir şey çalışmayacak.

Veritabanında tablo oluşturma

Kullanıcı kaydını uygulamak için öncelikle bir Veritabanına ihtiyacımız var. Zaten sahipseniz, harika, aksi takdirde oluşturmanız gerekir. Bu yazımda bunu nasıl yapacağınızı detaylı bir şekilde anlatıyorum.

Ve böylece bir Veritabanımız var (kısaltılmış olarak veritabanı), şimdi bir tablo oluşturmamız gerekiyor kullanıcılar hangi kayıtlı kullanıcılarımızı ekleyeceğiz.

Veritabanında tablo nasıl oluşturulur, makalede de anlattım. Bir tablo oluşturmadan önce hangi alanları içereceğini tanımlamamız gerekir. Bu alanlar kayıt formundaki alanlara karşılık gelecektir.

Böylece formumuzun hangi alanlara sahip olacağını düşündük, hayal ettik ve bir tablo oluşturduk. kullanıcılar bunun gibi alanlarla:

• İD- Tanımlayıcı. Alan İD veritabanındaki her tablonun sahip olması gerekir.
• ilk adı- Adı kaydetmek için.
• Soyadı- Soyadlarını kaydetmek için.
• e-posta- Posta adresini kaydetmek için. Giriş olarak e-posta kullanacağız, bu nedenle bu alan benzersiz olmalı, yani BENZERSİZ bir dizine sahip olmalıdır.
• email_status- Postanın onaylanıp onaylanmadığını gösteren alan. Posta onaylanırsa 1 değerine, aksi takdirde 0 değerine sahip olacaktır. Varsayılan olarak bu alan 0 değerine sahip olacaktır.
• parola- Şifreyi kaydetmek için.

“VARCHAR” türündeki tüm alanların varsayılan değeri NULL olmalıdır.

Kayıt formunuzda daha fazla alan olmasını istiyorsanız, onları da buraya ekleyebilirsiniz.

Her şey, bizim masamız kullanıcılar hazır. Bir sonraki adıma geçelim.

Veritabanı Bağlantısı

Veritabanını oluşturduk, şimdi ona bağlanmamız gerekiyor. PHP MySQLi uzantısını kullanarak bağlanacağız.

Sitemizin klasöründe adında bir dosya oluşturun. dbconnect.php, ve içine aşağıdaki betiği yazıyoruz:

DB bağlantı hatası... Hata açıklaması: ".mysqli_connect_error ()."

"; çıkış ();) // Bağlantı kodlamasını ayarlayın $ mysqli-> set_charset (" utf8 "); // Kolaylık olması için buraya sitemizin adını içerecek bir değişken ekleyelim $ address_site =" http: // testsite.local " ;?>

Bu dosya dbconnect.php form işleyicileri için bağlı olması gerekir.

Değişkene dikkat edin $ address_site, burada üzerinde çalışacağım test sitemin adını belirttim. Buna göre sitenizin adını belirtmelisiniz.

Site yapısı

Şimdi sitemizin HTML yapısına bir göz atalım.

Sitenin üstbilgisini ve altbilgisini ayrı dosyalara taşıyacağız, başlık.php ve altbilgi.php... Bunları tüm sayfalara ekleyeceğiz. Yani, ana (dosya index.php), kayıt formunun bulunduğu sayfaya (dosya form_register.php) ve yetkilendirme formunun bulunduğu sayfaya (dosya form_auth.php).

Bağlantılarımızla engelle, kayıt ve yetki, tüm sayfalarda görüntülenecek şekilde site başlığına ekleyin. Bir bağlantı girilecek kayıt formu sayfası(dosya form_register.php) ve diğeri ile sayfaya İzin formu(dosya form_auth.php).

header.php dosyasının içeriği:

Sitemizin adı

Sonuç olarak, ana sayfa şöyle görünür:

Elbette siteniz tamamen farklı bir yapıya sahip olabilir ama bu bizim için şu an önemli değil. Ana şey, kayıt ve yetkilendirme için bağlantılar (düğmeler) olmasıdır.

Şimdi kayıt formuna geçelim. Zaten anladığınız gibi, dosyada var form_register.php.

Veritabanına gidin (phpMyAdmin'de), tablo yapısını açın kullanıcılar ve hangi alanlara ihtiyacımız olduğunu görün. Bu, ad ve soyadı girmek için alanlara, posta adresi (E-posta) girmek için bir alana ve bir şifre girmek için bir alana ihtiyacımız olduğu anlamına gelir. Ve güvenlik amacıyla captcha'ya girmek için bir alan ekleyeceğiz.

Sunucuda, kayıt formunun işlenmesinin bir sonucu olarak, kullanıcının kaydolamayacağı için çeşitli hatalar meydana gelebilir. Bu nedenle, kullanıcının kaydın neden başarısız olduğunu anlaması için bu hatalarla ilgili mesajların görüntülenmesi gerekir.

Formu görüntülemeden önce, oturumdan gelen hata mesajlarını görüntülemek için bir blok ekleyin.

Ve bir şey daha, kullanıcı zaten oturum açmışsa ve ilgi uğruna doğrudan tarayıcının adres çubuğuna yazarak kayıt sayfasına girer. site_adresi / form_register.php, o zaman bu durumda, kayıt formu yerine, zaten kayıtlı olduğunu belirten bir unvan görüntüleyeceğiz.

Genel olarak, dosya kodu form_register.phpşöyle aldık:

Zaten kayıtlısınız

Tarayıcıda kayıt formu sayfası şöyle görünür:

Kullanarak gerekli nitelik, tüm alanları gerekli hale getirdik.

Kayıt formu koduna dikkat edin. captcha görüntüleniyor:

Resmin src özniteliğinin değerinde dosyanın yolunu belirledik captcha.php bu captcha'yı oluşturur.

Dosya koduna bakalım captcha.php:

Kod iyi yorumlanmış, bu yüzden sadece bir noktaya odaklanacağım.

Fonksiyonun içinde imageTtfText (), yazı tipinin yolu belirtildi verdana.ttf... Yani captcha'nın doğru çalışması için bir klasör oluşturmalıyız. yazı tipleri ve yazı tipi dosyasını oraya koyun verdana.ttf... İnternetten bulup indirebilir veya bu makaledeki malzemelerle arşivden alabilirsiniz.

HTML yapısını bitirdik, devam etme zamanı.

jQuery ile geçerlilik için e-postayı kontrol etme

Herhangi bir form, hem istemci tarafında (JavaScript, jQuery kullanarak) hem de sunucu tarafında girilen verilerin geçerliliğini kontrol etmelidir.

E-posta alanına özellikle dikkat etmeliyiz. Girilen posta adresinin geçerli olması çok önemlidir.

Bu giriş alanı için email (type = "email") tipini belirledik, bu bizi yanlış formatlara karşı biraz uyarır. Ancak bu yeterli değildir, çünkü tarayıcının bize sağladığı kod denetçisi aracılığıyla özelliğin değerini kolayca değiştirebilirsiniz. tip ile birlikte e-postaüzerinde Metin, işte bu kadar, çekimiz artık geçerli olmayacak.

Ve bu durumda, daha güvenilir bir kontrol yapmamız gerekiyor. Bunun için JavaScript'ten jQuery kütüphanesini kullanacağız.

jQuery kitaplığını bağlamak için dosyada başlık.php etiketler arasında , kapanış etiketinden önce , şu satırı ekleyin:

Bu satırın hemen ardından e-posta doğrulama kontrol kodunu ekleyin. Buraya girilen şifrenin uzunluğunu kontrol etmek için bir kod ekliyoruz. Uzunluğu en az 6 karakter olmalıdır.

Bu script yardımıyla girilen e-posta adresinin geçerliliğini kontrol ediyoruz. Kullanıcı yanlış bir E-posta girdiyse, bununla ilgili bir hata görüntüler ve formu gönderme düğmesini devre dışı bırakırız. Her şey yolundaysa, hatayı kaldırır ve formu göndermek için düğmeyi etkinleştiririz.

Ve böylece, müşteri tarafında formu doğrulamayı bitirdik. Şimdi sunucuya gönderebiliriz, burada da birkaç kontrol yapacağız ve verileri veritabanına ekleyeceğiz.

Kullanıcı kaydı

İşlenmek üzere formu dosyaya gönderiyoruz register.php, POST yöntemiyle. Öznitelik değerinde belirtilen bu işleyici dosyasının adı eylem... Ve gönderme yöntemi öznitelik değerinde belirtilir. yöntem.

Bu dosyayı açma register.php ve yapmamız gereken ilk şey, bir oturum başlatmak için bir fonksiyon yazmak ve daha önce oluşturduğumuz dosyayı bağlamak. dbconnect.php(Bu dosyada veritabanı ile bağlantı kurduk). Yine de, hemen hücreleri ilan edelim hata mesajları ve başarı_mesajları oturumun global dizisinde. V error_mesages formun işlenmesi sırasında ortaya çıkan tüm hata mesajlarını kaydedeceğiz ve başarı_mesajları, neşeli mesajlar kaydedeceğiz.

Devam etmeden önce kontrol etmeliyiz form hiç gönderildi mi... Saldırgan bir özniteliğin değerine bakabilir eylem formdan ve bu formu hangi dosyanın işlediğini öğrenin. Ve tarayıcının adres çubuğuna aşağıdaki adresi yazarak doğrudan bu dosyaya gitmeyi düşünebilir: http: //arees_site/register.php

Bu nedenle, global POST dizisinde, adı formdaki "Kayıt Ol" butonumuzun adıyla eşleşen bir hücrenin varlığını kontrol etmemiz gerekiyor. Böylece "Kayıt Ol" butonuna tıklanıp tıklanmadığını kontrol ediyoruz.

Saldırgan doğrudan bu dosyaya gitmeye çalışırsa bir hata mesajı alır. $ address_site değişkeninin sitenin adını içerdiğini ve dosyada bildirildiğini hatırlatalım. dbconnect.php.

Hata! ana sayfa.

"); } ?>

Oturumdaki captcha değeri, oluşturulduğunda dosyaya eklendi. captcha.php... Bir hatırlatma olarak, size dosyadan bu kod parçasını tekrar göstereceğim. captcha.php captcha değerinin oturuma eklendiği yer:

Şimdi doğrulamanın kendisine geçelim. Dosyada register.php, if bloğunun içinde "Kayıt Ol" düğmesinin tıklanıp tıklanmadığını kontrol ettiğimiz veya daha doğrusu yorumun belirtildiği yer " // (1) Bir sonraki kod parçası için yer"Biz yazarız:

// Elde edilen captcha'yı kontrol edin // Satırın başındaki ve sonundaki boşlukları kesin $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! boş ($ captcha)) (// Alınan değeri oturumdaki değerle karşılaştırın. if (($ _ SESSION ["rand"]! = $ captcha) ) && ($ _SESSION ["rand"]! = "")) (// Captcha doğru değilse, kullanıcıyı kayıt sayfasına geri döndürürüz ve orada yanlış captcha girdiğine dair bir hata mesajı görüntüleriz. . $ error_message = "

Hata! yanlış captcha girdin

"; // Hata mesajını oturuma kaydedin. $ _SESSION [" error_messages "] = $ error_message; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: " . $ Address_site . "/ form_register.php"); // Betik çıkışını durdur ();) // (2) Bir sonraki kod parçası için yer) else (// Captcha geçilmediyse veya boşsa çıkış ( "

Hata! Doğrulama kodu, yani captcha kodu yoktur. Ana sayfaya gidebilirsiniz.

"); }

Ardından, POST dizisinden alınan verileri işlememiz gerekiyor. Öncelikle global POST dizisinin içeriğini, yani formumuzdan giriş alanlarının isimlerine karşılık gelen isimlere sahip hücreler olup olmadığını kontrol etmemiz gerekiyor.

Eğer hücre varsa bu hücreden satırın başından ve sonundan boşlukları keseriz, aksi halde kullanıcıyı kayıt formu ile sayfaya geri yönlendiririz.

Ayrıca boşlukları kısalttıktan sonra, değişkene bir satır ekliyoruz ve bu değişkenin boş olup olmadığını kontrol ediyoruz, eğer boş değilse devam edin, aksi takdirde kullanıcıyı kayıt formu ile sayfaya geri yönlendiriyoruz.

Bu kodu belirtilen konuma yapıştırın " // (2) Bir sonraki kod parçası için yer".

/ * $ _POST global dizisindeki formdan gönderilen veri olup olmadığını kontrol ederiz ve gönderilen verileri normal değişkenler içine alırız * / If (isset ($ _ POST ["first_name"])) (// dizenin başı ve sonundan $ first_name = trim ($ _ POST ["first_name"]); // Değişkende boşluk olup olmadığını kontrol edin if (! boş ($ first_name)) (// Güvenlik için özel karakterleri şuna dönüştürün HTML varlıkları $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Adınızı giriniz

Eksik ad alanı

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasının çıkışını durdur (); ) if ( isset ($ _ POST ["last_name"])) (// Dizenin başından ve sonundan boşlukları kırp $ last_name = trim ($ _ POST ["last_name"]); if (! boş ($ last_name) )) (// Güvenlik için özel karakterleri HTML varlıklarına dönüştürün $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Soyadınızı giriniz

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasını durdur çıkış (); )) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Soyadı alanı eksik

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasını durdur çıkış (); ) if ( isset ($ _ POST ["email"])) (// Satırın başındaki ve sonundaki boşlukları kırpın $ email = trim ($ _ POST ["email"]); if (! boş ($ email) )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) E-posta adresinin biçimini ve benzersizliğini kontrol etmek için kodun yeri) başka (// Hata mesajını oturuma kaydedin. $ _SESSION [ "hata_mesajları"]. = "

E-postanızı giriniz

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasını durdur çıkış (); )) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasının çıkışını durdur (); ) if ( isset ($ _ POST ["parola"])) (// Dizenin başındaki ve sonundaki boşlukları kırpın $ password = trim ($ _ POST ["password"]); if (! boş ($ password )) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // paprolü şifrele $ password = md5 ($ password. "top_secret");) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages" "]. = "

Şifrenizi girin

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasını durdur çıkış (); )) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasının çıkışını durdur (); ) // (4) Veritabanına kullanıcı ekleme kodu için yer

Özellikle önemli olan alan e-posta... Alınan posta adresinin biçimini ve veritabanındaki benzersizliğini kontrol etmeliyiz. Yani, aynı posta adresiyle kayıtlı herhangi bir kullanıcı var mı?

Belirtilen yerde " // (3) Posta adresinin biçimini ve benzersizliğini kontrol etmek için kod yeri"aşağıdaki kodu ekleyin:

// Alınan e-posta adresinin biçimini normal ifadeyi kullanarak kontrol edin $ reg_email = "/^**@(+(*+)*\.)++/i"; // Alınan e-posta adresinin formatı normal ifade ile eşleşmiyorsa if (! Preg_match ($ reg_email, $ email)) (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Geçersiz bir e-posta girdiniz

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasını durdur çıkış (); ) // Veritabanında zaten böyle bir adres olup olmadığını kontrol ediyoruz $ Result_query = $ mysqli-> sorgu ("SELECT` email` FROM `users` WHERE` email` = "". $ Email. "" "); // Alınan satır sayısı tam olarak bir ise, bu nedenle bu e-posta adresine sahip bir kullanıcı zaten kayıtlı if ($ sonuç_query-> num_rows == 1) (// Eğer sonuç false değilse if (($ satır = $ sonuç_query) -> fetch_assoc()! = false) (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Bu posta adresine sahip bir kullanıcı zaten kayıtlı

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Address_site." / Form_register.php ");) else (// Hata mesajını kaydedin oturuma . $ _SESSION ["error_messages"]. = "

Veritabanı sorgusunda hata

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php ");) / * seçimi kapat * / $ sonuç_query-> kapat (); // Komut dosyasını durdur çıkış ();) / * seçimi kapat * / $ sonuç_query-> kapat ();

Ve böylece tüm kontrolleri bitirdik, sıra kullanıcıyı veritabanına eklemeye geldi. Belirtilen yerde " // (4) Veritabanına kullanıcı ekleme kodu için yer"aşağıdaki kodu ekleyin:

// Veritabanına kullanıcı ekleme isteği $ sonuç_query_insert = $ mysqli-> sorgu ("INSERT INTO` users` (ad, soyadı, e-posta, şifre) DEĞERLER ("". $ Ad. "", "". $ Soyadı . " "," ". $ e-posta." "," ". $ şifre." ")"); if (! $ result_query_insert) (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Veritabanı isteğine kullanıcı eklenemedi

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasının çıkışını durdur (); ) else ( $ _SESSION ["success_messages"] = "

Kayıt başarıyla tamamlandı!!!
Artık kullanıcı adınızı ve şifrenizi kullanarak giriş yapabilirsiniz.

"; // Kullanıcıyı yetkilendirme sayfası başlığına gönder (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); üstbilgi (" Konum: ". $ Address_site." / Form_auth.php ");) / * İsteği tamamlama * / $ sonuç_query_insert-> kapat (); // Veritabanı bağlantısını kapat $ mysqli-> kapat ();

Veritabanına kullanıcı ekleme isteğinde bir hata oluşursa, oturuma bu hata ile ilgili bir mesaj ekliyoruz ve kullanıcıyı kayıt sayfasına döndürüyoruz.

Aksi takdirde, her şey yolunda giderse, oturuma bir mesaj da ekleriz, ancak zaten daha hoştur, yani kullanıcıya kaydın başarılı olduğunu söyleriz. Ve yetkilendirme formunun olduğu sayfaya yönlendiriyoruz.

E-posta adresinin biçimini ve şifrenin uzunluğunu kontrol etmek için komut dosyası dosyada başlık.php, bu nedenle bu formdaki alanlar üzerinde de hareket edecektir.

Oturum ayrıca dosyada başlatılır başlık.php, yani dosyada form_auth.php oturumu başlatmanıza gerek yok, çünkü bir hata alacağız.

Dediğim gibi, e-posta adresinin biçimini ve şifrenin uzunluğunu kontrol etmek için kullanılan komut dosyası burada da çalışır. Bu nedenle, kullanıcı yanlış bir e-posta adresi veya kısa bir şifre girerse, hemen bir hata mesajı alacaktır. ve düğme içeri gel inaktif hale gelecektir.

Hataları ortadan kaldırdıktan sonra, düğme içeri gel aktif hale gelir ve kullanıcı formu işleneceği sunucuya gönderebilecektir.

Kullanıcı yetkilendirme

Değer atfetmek için eylem yetkilendirme handikapının bir dosyası var yetki.php, bu, formun bu dosyada işleneceği anlamına gelir.

Ve böylece dosyayı aç yetki.php ve yetkilendirme formunu işlemek için kodu yazın. Yapılacak ilk şey bir oturum başlatmak ve dosyayı bağlamaktır. dbconnect.php veritabanına bağlanmak için.

// Form işlenirken oluşabilecek hataları eklemek için bir hücre bildirin. $ _SESSION ["hata_mesajları"] = ""; // Başarılı mesajlar eklemek için hücreyi bildirin $ _SESSION ["success_messages"] = "";

/ * Formun gönderilip gönderilmediğini yani Login butonuna tıklanıp basılmadığını kontrol edin. Evet ise, devam edin, değilse, kullanıcıya doğrudan bu sayfaya gittiğine dair bir hata mesajı görüntüleyin. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! boş ($ _ POST ["btn_submit_auth"])) (// (1) Sonraki kod parçası için boşluk) else (exit ("

Hata! Bu sayfaya doğrudan girdiniz, dolayısıyla işlenecek veri yok. Ana sayfaya gidebilirsiniz.

"); }

// Elde edilen captcha'yı kontrol edin if (isset ($ _ POST ["captcha"])) (// Satırın başındaki ve sonundaki boşlukları kesin $ captcha = trim ($ _ POST ["captcha"]); if (! Boş ($ captcha )) (// Alınan değeri oturumdaki değerle karşılaştırın. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Captcha doğru değilse, kullanıcıyı yetkilendirme sayfasına geri döndürüyoruz ve orada yanlış captcha girdiğine dair bir hata mesajı görüntüleyeceğiz. $ error_message = "

Hata! yanlış captcha girdin

"; // Hata mesajını oturuma kaydedin. $ _SESSION [" error_messages "] = $ error_message; // Kullanıcıyı yetkilendirme sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: " . $ Address_site . "/ form_auth.php"); // Betik çıkışını durdur ();)) else ($ error_message = "

Hata! Captcha giriş alanı boş olmamalıdır.

"; // Hata mesajını oturuma kaydedin. $ _SESSION [" error_messages "] = $ error_message; // Kullanıcıyı yetkilendirme sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: " . $ Adres_sitesi . "/ form_auth.php"); // Betik çıkışını durdur ();) // (2) Posta adresini işleme yeri // (3) Şifreyi işleme yeri // (4) Yer veritabanına sorgu yapma) else (// captcha geçilmediyse çıkış ("

Hata! Doğrulama kodu, yani captcha kodu yoktur. Ana sayfaya gidebilirsiniz.

"); }

Kullanıcı doğrulama kodunu doğru girdiyse, devam edin, aksi takdirde yetkilendirme sayfasına geri göndeririz.

Posta adresini kontrol etme

// Satırın başındaki ve sonundaki boşlukları kesin $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! boş ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Normal ifadeyi kullanarak alınan e-posta adresinin biçimini kontrol edin $ reg_email = " /^**@(+(*+)*\.)++/i "; // Alınan e-posta adresinin formatı normal ifade ile eşleşmiyorsa if (! preg_match ($ reg_email, $) email)) (// Oturum hata mesajına kaydet. $ _SESSION ["error_messages"]. = "

Yanlış bir e-posta girdiniz

"; // Kullanıcıyı yetkilendirme sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_auth.php "); // Komut dosyası çıkışını durdur (); )) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Posta adresinin (e-posta) girileceği alan boş bırakılmamalıdır.

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_register.php "); // Komut dosyasını durdur çıkış (); )) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

E-posta alanı eksik

"; // Kullanıcıyı yetkilendirme sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_auth.php "); // Betik çıkışını durdur (); ) // (3) Parolayı işlemek için alan

Kullanıcı bir posta adresini yanlış bir biçimde girdiyse veya posta adresi alanının değeri boşsa, bu konuda bir mesaj görüntülediğimiz yetkilendirme sayfasına geri göndeririz.

Parola kontrolu

İşlenecek bir sonraki alan şifre alanıdır. Belirtilen yere " // (3) Parolanın işleneceği yer", Biz yazarız:

If (isset ($ _ POST ["parola"])) (// Dizenin başındaki ve sonundaki boşlukları kesin $ password = trim ($ _ POST ["password"]); if (! Empty ($ password) )) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Şifreyi şifrele $ password = md5 ($ password. "top_secret");) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages" "]. = "

Şifrenizi girin

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_auth.php "); // Komut dosyasını durdurun çıkış (); )) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Şifre girmek için alan yok

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_auth.php "); // Komut dosyasını durdurun çıkış (); )

Burada, md5 () işlevini kullanarak, alınan şifreyi şifreliyoruz, çünkü veritabanında şifreli formda şifrelerimiz var. Bizim durumumuzda şifrelemede ek bir gizli kelime " top_secret"kullanıcıyı kaydederken kullanılan olmalıdır.

Şimdi mail adresi alınan mail adresine ve şifresi alınan şifreye eşit olan bir kullanıcı örneğinde veritabanına sorgu yapmanız gerekiyor.

// Kullanıcının seçimine göre veritabanında sorgu. $ result_query_select = $ mysqli-> sorgu ("SELECT * FROM` users` WHERE email = "". $ email. "" AND password = "". $ password. "" "); if (! $ result_query_select) (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Veritabanından kullanıcı getirmede hata iste

"; // Kullanıcıyı kayıt sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_auth.php "); // Komut dosyasının çıkışını durdur (); ) else ( // Veritabanında bu tür verilere sahip bir kullanıcı olup olmadığını kontrol edin, ardından bir hata mesajı görüntüleyin if ($ sonuç_query_select-> num_rows == 1) (// Girilen veriler veritabanındaki verilerle eşleşiyorsa, kaydedin oturum dizisine giriş ve şifre $ _SESSION ["email"] = $ email; $ _SESSION ["password"] = $ password; // Kullanıcıyı ana sayfa başlığına döndür ("HTTP / 1.1 301 Kalıcı Olarak Taşındı" ); header ("Location:". $ Address_site . "/ index.php"));) else (// Hata mesajını oturuma kaydedin. $ _SESSION ["error_messages"]. = "

Yanlış kullanıcı adı ve/veya şifre

"; // Kullanıcıyı yetkilendirme sayfası başlığına döndür (" HTTP / 1.1 301 Kalıcı Olarak Taşındı "); başlık (" Konum: ". $ Adres_sitesi." / Form_auth.php "); // Komut dosyası çıkışını durdur (); ))

siteden çıkış yap

Ve yaptığımız son şey siteden ayrılma prosedürü... Şu anda, başlıkta yetkilendirme sayfasına ve kayıt sayfasına bağlantılar gösteriyoruz.

Site başlığında (dosya başlık.php), oturumu kullanarak kullanıcının zaten oturum açıp açmadığını kontrol ederiz. Değilse, kayıt ve yetkilendirme bağlantılarını görüntüleriz, aksi takdirde (yetki verilmişse), kayıt ve yetkilendirme bağlantıları yerine bağlantıyı görüntüleriz. Çıktı.

Dosyadan değiştirilmiş kod parçası başlık.php:

kayıt

Çıktı

Siteden çıkış linkine tıkladığınızda dosyaya ulaşıyoruz. çıkış.php, burada oturumdan posta adresi ve şifre ile hücreleri yok ediyoruz. Bundan sonra, kullanıcıyı bağlantının tıklandığı sayfaya geri döndürüyoruz. çıktı.

dosya kodu çıkış.php:

Bu kadar. Şimdi nasıl olduğunu biliyorsun Kayıt ve yetkilendirme formlarını uygulamak ve işlemek sitenizdeki kullanıcı. Bu formlar hemen hemen her sitede bulunur, bu nedenle her programcı onları nasıl oluşturacağını bilmelidir.

Ayrıca, hem istemci tarafında (tarayıcıda, JavaScript, jQuery kullanarak) hem de sunucu tarafında (PHP dilini kullanarak) giriş verilerinin nasıl doğrulanacağını öğrendik. Biz de öğrendik siteden ayrılma prosedürünü uygulayın.

Tüm komut dosyaları test edildi ve çalışıyor. Bu küçük sitenin dosyalarının bulunduğu arşivi bu bağlantıdan indirebilirsiniz.

Gelecekte, anlatacağım bir makale yazacağım. Bir de anlatacağım bir yazı yazmayı planlıyorum (sayfayı yeniden yüklemeden). Bu nedenle, yeni makalelerin yayınlanmasından haberdar olmak için siteme abone olabilirsiniz.

Herhangi bir sorunuz varsa lütfen iletişime geçin, ayrıca makalede herhangi bir hata görürseniz lütfen bana bildirin.

Ders planı (Bölüm 5):

1. Giriş formu için HTML yapısı oluşturun
2. Alınan verileri işliyoruz
3. Kullanıcının selamını site başlığında görüntüleriz

Makaleyi beğendin mi?

1. "jFormer" çevrimiçi formları oluşturmak için eklenti

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

2. jQuery kullanarak adım adım kayıt formu

Adım adım doldurma ile temiz bir form. Aşağıda bir form doldurma göstergesi bulunmaktadır.

3. Adım adım form

Formu birkaç adımda doldurmak ve doldurmanın doğruluğunu kontrol etmek.

4. Site için iletişim formu

Bilgi girişinin doğruluğunun doğrulanması, javascript kullanılarak mesaj gönderilmeden önce "anında" gerçekleştirilir.

5. jQuery kullanarak formlar arasında animasyonlu geçiş

Animasyonlu jQuery, site oturum açma, kayıt ve şifre kurtarma alanları arasında geçiş yapar. Demo sayfasında, efekti görmek için sarı bağlantıya tıklayın.

6. PHP ödeme formu

Bir ziyaretçiye herhangi bir sayfadan site sahibiyle hızlı bir şekilde iletişim kurma yeteneği vermek için benzer bir çözüm kullanılabilir. Demo sayfasında, formu dışarı kaydırmak için aşağıdaki oka tıklayın.

7. jQuery ve CSS3 kullanarak PHP kayıt formu

Bilgi girişinin doğruluğunu teyit eden form.

8. PHP Facebook tarzı kayıt formu

CSS, PHP ve jQuery ile uygulanan güzel kayıt formu.

9. jQuery "SheepIt" İletişim Formu

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

10. İletişim formu "Fantezi AJAX İletişim Formu"

Girilen bilgilerin doğrulanması ile güzel temiz PHP geri bildirim formu. Teknolojiler: CSS, PHP, jQuery.

11. Sitede yetkilendirme / kayıt sistemi

12. Veri gönderme formu

Doldurmanın doğruluğunu kontrol etmek.

13. jQuery "İletişim kurulabilir" eklentisi

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