Formularz rejestracyjny JQuery. Rejestracja krok po kroku w JQuery

> Forma loginu >

>

Zapamiętaj >
>

>

>

Krok 2 - Style ogólne

Najpierw usuń wszystkie marginesy, dopełnienie, obramowania itp. elementów, których będziemy używać.

Forma loginu,
.login-formularz h1,
rozpiętość formularza .login,
wejście .login-formularz,
etykieta .login-formularz (
margines: 0;
wypełnienie: 0;
granica: 0;
zarys: 0;
}

Następnie nadamy styl kontenerowi formularza. Dodamy względne pozycjonowanie, stałą szerokość i wysokość, kolor tła, zaokrąglone rogi i cienie.

Forma loginu (
pozycja: względna;
szerokość: 200px;
wysokość: 200px;
padding: 15px 25px 0 25px;
margines górny: 15px;
kursor: domyślny;

kolor tła: # 141517;

Webkit-obramowanie-promień: 5px;
-moz-border-radius: 5px;
promień obramowania: 5px;

Webkit-box-shadow: 0px 1px 1px 0px rgba (255, 255, 255, .2), wstawka 0px 1px 1px 0px rgb (0, 0, 0);
-moz-box-shadow: 0px 1px 1px 0px rgba (255, 255, 255, .2), wstawka 0px 1px 1px 0px rgb (0, 0, 0);
box-shadow: 0px 1px 1px 0px rgba (255, 255, 255, .2), wstawka 0px 1px 1px 0px rgb (0, 0, 0);
}

Aby utworzyć strzałkę, użyjemy selektora: przed.

Formularz logowania: przed (
pozycja: bezwzględna;
góra: -12px;
lewy: 10px;

szerokość: 0px;
wysokość: 0px;
zadowolony: "";

border-bottom: 10px solid # 141517;
obramowanie po prawej: 10px stałe # 141517;
border-top: 10px stałe przezroczyste;
obramowanie po lewej: stałe przezroczyste 10px;
}

Dodajmy kilka stylów nagłówka formularza (kolor, czcionka i rozmiar itp.).

Formularz logowania h1 (
wysokość linii: 40px;
rodzina czcionek: „Myriad Pro”, bezszeryfowa;
rozmiar czcionki: 22px;
grubość czcionki: normalna;
kolor: # e4e4e4;
}

Krok 3 — Ogólne style pól formularza

Najpierw ustawmy podstawowe style dla danych wejściowych.

wysokość linii: 14px;
margines: 10px 0;
dopełnienie: 6px 15px;
granica: 0;
zarys: brak;

rodzina czcionek: Helvetica, bezszeryfowa;
rozmiar czcionki: 12px;
grubość czcionki: pogrubiona;
text-shadow: 0px 1px 1px rgba (255, 255, 255, .2);

Webkit-obramowanie-promień: 26px;
-moz-border-radius: 26px;
promień obramowania: 26px;

Przejście z webkitu: łatwość wychodzenia wszystkich 0,15;
-moz-transition: wszystkie 0,15 s łatwo wychodzą;
-o-przejście: wszystkie 0,15 s luzy;
przejście: wszystkie 0,15 s rozluźnienie;
}

Następnie stylizujemy pola login i hasło. Dodamy gradientowe szare tło i cienie. Dodamy również stałą szerokość 170px i kolor tekstu.

Wprowadzanie formularza logowania [typ = tekst],
.login-form input [typ = hasło],
.js .zakres formularza logowania (
kolor: # 686868;
szerokość: 170px;

Webkit-box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .6);
-moz-box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .6);
box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .6);

tło: # 989898;
tło: -moz-linear-gradient (góra, #ffffff 0%, # 989898 100%);
background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, #ffffff), zatrzymanie koloru (100%, # 989898));
tło: -webkit-linear-gradient (góra, #ffffff 0%, # 989898 100%);
tło: -o-linear-gradient (góra, #ffffff 0%, # 989898 100%);
background: -ms-linear-gradient (góra, #ffffff 0%, # 989898 100%);
tło: gradient liniowy (góra, #ffffff 0%, # 989898 100%);
}

Gdy najedziemy na te pola, zmienimy ich cienie.

Wejście w formularzu logowania [typ = tekst]: najedź,
.login-form input [typ = hasło]: najedź (
-webkit-box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .6), 0px 0px 5px rgba (255, 255, 255, .5);
-moz-box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .6), 0px 0px 5px rgba (255, 255, 255, .5);
box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .6), 0px 0px 5px rgba (255, 255, 255, .5);
}

Dla stanu aktywnego zmienimy gradient CSS3 na nieco jaśniejszy.

Wejście w formularzu logowania [typ = tekst]: fokus,
.login-form input [typ = hasło]: fokus (
tło: # e1e1e1;
tło: -moz-linear-gradient (góra, #ffffff 0%, # e1e1e1 100%);
background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, #ffffff), zatrzymanie koloru (100%, #e1e1e1));
tło: -webkit-linear-gradient (góra, #ffffff 0%, #e1e1e1 100%);
tło: -o-linear-gradient (góra, #ffffff 0%, # e1e1e1 100%);
background: -ms-linear-gradient (góra, #ffffff 0%, # e1e1e1 100%);
tło: gradient liniowy (góra, #ffffff 0%, # e1e1e1 100%);
}

Krok 4 — przycisk Prześlij

Umieść przycisk po prawej stronie, nadając mu pływanie: prawo.

Dane wejściowe formularza logowania [typ = prześlij] (
pływak: w prawo;
kursor: wskaźnik;

kolor: # 445b0f;

Webkit-box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .45), 0px 1px 1px 0px rgba (0, 0, 0, .3);
-moz-box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .45), 0px 1px 1px 0px rgba (0, 0, 0, .3);
box-shadow: wstawka 1px 1px 1px 0px rgba (255, 255, 255, .45), 0px 1px 1px 0px rgba (0, 0, 0, .3);
}

Zmienimy cienie po najechaniu myszą, a w stanie aktywnym je usuniemy.

Dane wejściowe formularza logowania [typ = prześlij]: hover (
-webkit-box-shadow: wstawka 1px 1px 3px 0px rgba (255, 255, 255, .8), 0px 1px 1px 0px rgba (0, 0, 0, .6);
-moz-box-shadow: wstawka 1px 1px 3px 0px rgba (255, 255, 255, .8), 0px 1px 1px 0px rgba (0, 0, 0, .6);
box-shadow: wstawka 1px 1px 3px 0px rgba (255, 255, 255, .8), 0px 1px 1px 0px rgba (0, 0, 0, .6);
}

Dane wejściowe formularza logowania [typ = prześlij]: aktywne (
-webkit-box-shadow: brak;
-moz-box-shadow: brak;
cień pudełka: brak;
}

Dodajmy zielony gradient dla przycisku.

Wejście w formularzu logowania [typ = prześlij],
.js .login-form span.checked: przed (
tło: # a5cd4e;
tło: -moz-linear-gradient (góra, # a5cd4e 0%, # 6b8f1a 100%);
background: -webkit-gradient (liniowy, lewy górny, lewy dolny, color-stop (0%, # a5cd4e), color-stop (100%, # 6b8f1a) ) ;
tło: -webkit-linear-gradient (szczyt, # a5cd4e 0% , # 6b8f1a 100% ) ;
tło: -o-liniowy-gradient (szczyt, # a5cd4e 0% , # 6b8f1a 100% ) ;
tło: -ms-liniowy-gradient (szczyt, # a5cd4e 0% , # 6b8f1a 100% ) ;
tło: gradient liniowy (szczyt, # a5cd4e 0% , # 6b8f1a 100% ) ;
}

Krok 5 - Style dla pola wyboru

Teraz najtrudniejsza część, ponieważ nie możemy zmienić wyglądu pól wyboru za pomocą CSS, tak jak zmieniliśmy wygląd innych pól formularza.

Najłatwiejszym sposobem, jaki znalazłem, jest zastąpienie pola wyboru tagiem span.

Będzie to działać tak: najpierw ukryjemy checkbox i stylizujemy tag span tak, aby wyglądał jak checkbox, a następnie zaktualizujemy to checkbox (zaznaczone/odznaczone) za pomocą jQuery.

Ponieważ niektórzy użytkownicy mają wyłączoną obsługę JavaScript, musimy dodać rezerwę. Do tego dodamy „js” klasy do tagu ciała za pomocą jQuery. Tak więc, jeśli JavaScript jest włączony, klasa „js” zostanie dodana do tagu body podczas ładowania strony, a jeśli JavaScript jest wyłączony, klasa nie zostanie dodana. Tak więc tylko użytkownicy z włączoną obsługą JavaScript zobaczą stylizowane pole wyboru.

Najpierw ukryjemy pole wyboru.

.js .Forma loginu Wejście [ rodzaj = pole wyboru ] {
pozycja: naprawiony;
lewo: -9999 pikseli;
}

Następnie umieścimy tag span tam, gdzie go chcemy.

.Forma loginu Zakres {
pozycja: względny;
margines-góra: 15px;
pływak: lewo;
}

Następnie dodajmy kilka stylów dla tagu span (szerokość, wysokość, obramowanie itp.).

.js .Forma loginu Zakres {
szerokość: 16px;
wzrost: 16px;
kursor: wskaźnik;

Webkit-obramowanie-promień : 2px;
-moz-promień-granicy : 2px;
promień-granicy : 2px;
}

Aby stworzyć stan „zaznaczony”, wstawimy mały kwadrat w rozpiętość i ustawimy go na środku.

.js .Forma loginu Zakres .sprawdzone: przed{
zadowolony: "" ;
pozycja: absolutny;
szczyt: 4px;
lewo: 4px;
szerokość: 8px;
wzrost: 8px;

Webkit-box-shadow : 0px 1 piksel 1 piksel 0px RGB (255 , 255 , 255 , .45) , wstawka 0px 1 piksel 1 piksel 0px RGB (0 , 0 , 0 , .3) ;
-moz-box-cień : 0px 1 piksel 1 piksel 0px RGB (255 , 255 , 255 , .45) , wstawka 0px 1 piksel 1 piksel 0px RGB (0 , 0 , 0 , .3) ;
cień pudełka : 0px 1 piksel 1 piksel 0px RGB (255 , 255 , 255 , .45) , wstawka 0px 1 piksel 1 piksel 0px RGB (0 , 0 , 0 , .3) ;
}

Umieścimy tag etykiety po prawej stronie pola wyboru i dodamy kilka podstawowych stylów (czcionka, kolor itp.).

.Forma loginu etykieta {
pozycja: absolutny;
szczyt: 1 piksel;
lewo: 25px;
rodzina czcionek: bezszeryfowy;
grubość czcionki: pogrubiony;
rozmiar czcionki: 12px;
kolor: # e4e4e4;
}

Wszystkie style, które mają na początku klasę „js”, zostaną zastosowane tylko wtedy, gdy włączony jest JavaScript.

Krok 6 - jQuery

Najpierw połączymy najnowszą wersję biblioteki jQuery za pomocą Google API, jeśli chcesz, możesz hostować ją na własnym serwerze, wybór należy do Ciebie. Następnie dodaj następujący kod na dole pliku HTML, przed tagiem zamykającym .

< źródło skryptu = „https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”> scenariusz >
< scenariusz >
$( dokument ) .gotowy(funkcjonować() {

// Sprawdź, czy JavaScript jest włączony
$("ciało") .addClass(„js”) ;

// Zaznacz pole wyboru podczas ładowania
$(„Rozpiętość formularza logowania”) .addClass("sprawdzone") .dzieci("Wejście") .przyciągać("sprawdzone", prawda) ;

// Kliknij funkcję
$(„Rozpiętość formularza logowania”) .na("Kliknij", funkcjonować() {

Jeśli ($(ten) .dzieci("Wejście") .przyciągać("sprawdzone") ) {
$(ten) .dzieci("Wejście") .przyciągać("sprawdzone", fałszywe) ;
$(ten) .usuńKlasę("sprawdzone") ;
}

w przeciwnym razie {
$(ten) .dzieci("Wejście") .przyciągać("sprawdzone", prawda) ;
$(ten) .addClass("sprawdzone") ;
}
} ) ;
} ) ;
scenariusz >

Najpierw dodamy klasę „js” do tagu body.

Jeśli masz jakieś pytania, zalecamy skorzystanie z naszego forum, aby jak najszybciej uzyskać odpowiedź.

Responsywny z funkcjami formularzy logowania i rejestracji, z możliwością dynamicznego przełączania, bez przeładowywania strony. Po pojawieniu się okna użytkownik może w łatwy sposób przełączać się między sobą, aw razie potrzeby wybrać opcję zmiany hasła.
Dzisiaj przyjrzymy się, jak to wszystko można zaimplementować za pomocą kilku małych, ale bardzo funkcjonalnych wtyczek jQuery i nowych standardów CSS3.

Ta metoda przyda się, jeśli chcesz udostępnić użytkownikom formularze logowania i rejestracji na każdej stronie swojej witryny. Wchodząc na stronę lub rejestrując się, użytkownicy nie będą przekierowywani na inną stronę i będą mogli wykonać wszystkie niezbędne czynności "bez wychodzenia z kasy", wszystko na jednej stronie.

Projektowanie wyglądu wyskakujących formularzy jest realizowane za pomocą CSS3, całkowita waga wtyczki nie jest wcale duża, odpowiedź i ładowanie okna modalnego odbywa się praktycznie bez opóźnień.
W 100% responsywny układ, wysokość i szerokość modalu z formularzami są automatycznie dopasowywane do rozmiarów ekranu urządzeń użytkownika.

Przyjrzeliśmy się przykładowi, teraz przyjrzyjmy się wszystkim głównym komponentom okna modalnego i formularzy, aby dowiedzieć się, jak ich używać na naszej stronie internetowej.
Wyskakujące okienko z formularzami logowania i rejestracji jest zbudowane na popularnej bibliotece javascript, pliku wykonywalnym wtyczki jQuey oraz wygenerowanych stylach CSS. Wszystkie te narzędzia muszą być połączone z Twoją witryną. Najnowszą aktualną wersję biblioteki jQuey można podłączyć bezpośrednio z Google, sam plik wtyczki main.js oraz gotowy zestaw wygenerowanych stylów style.css można znaleźć w archiwum.
JavaScript przed tagiem zamykającym, style CSS można kopiować i dodawać do pliku stylesheet.css witryny.

Struktura HTML:

Podstawowy kontener okien modalnych na przyciemnionym tle oraz wbudowane formularze z kontrolkami umieszczone są w treści strony. Dla lepszego zrozumienia rozgraniczyłem sektory i dodałem komentarze. Wszystkie elementy projektu są ściśle powiązane z CSS poprzez określone klasy, więc przeprojektowanie formularzy tak, aby pasowały do ​​ogólnego projektu Twojej witryny, jest łatwe.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >wejście < li>< a href= "#0" >rejestracja < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >E-mail < input class = id= "signin-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" >Oto komunikat o błędzie! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Hasło < input class = „pełna szerokość ma dopełnienie ma granicę” id = "hasło-logowania" type = "tekst" symbol zastępczy = "(! LANG: Hasło" > !}< a href= "#0" class = "hide-password" >Ukrywać < span class = "cd-error-message" >Oto komunikat o błędzie! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Zapamiętaj mnie < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Wejść" > < p class = "cd-form-bottom-message" >< a href= "#0" >Zapomniałeś hasła? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Nazwa użytkownika < input class = „pełna szerokość ma dopełnienie ma granicę” id = "signup-username" type = "tekst" symbol zastępczy = "Nazwa użytkownika"> < span class = "cd-error-message" >Oto komunikat o błędzie! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >E-mail < input class = „pełna szerokość ma dopełnienie ma granicę” id = "e-mail rejestracyjny" type = "e-mail" symbol zastępczy = "(! LANG: E-mail" > !}< span class = "cd-error-message" >Oto komunikat o błędzie! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Hasło < input class = „pełna szerokość ma dopełnienie ma granicę” id = "hasło-zarejestrowania" type = "tekst" symbol zastępczy = "(! LANG: Hasło" > !}< a href= "#0" class = "hide-password" >Ukrywać < span class = "cd-error-message" >Oto komunikat o błędzie! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >zgadzam się z< a href= "#0" >Warunki < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Utwórz konto"> < div id= "cd-reset-password" > < p class = "cd-form-message" >Zapomniałeś hasła? Wprowadź swój adres e-mail. Otrzymasz link do utworzenia nowego hasła. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >E-mail < input class = „pełna szerokość ma dopełnienie ma granicę” id = "reset-email" type = "email" placeholder = "(! LANG: E-mail" > !}< span class = "cd-error-message" >Oto komunikat o błędzie! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Przywróć hasło"> < p class = "cd-form-bottom-message" >< a href= "#0" >Powrót do wejścia < a href= "#0" class = "cd-close-form" >Blisko

• wejście
• rejestracja

E-mail Oto komunikat o błędzie!

Hasło Ukrywać Oto komunikat o błędzie!

Zapamiętaj mnie

Zapomniałeś hasła?

Nazwa użytkownika Oto komunikat o błędzie!

E-mail Oto komunikat o błędzie!

Hasło Ukrywać Oto komunikat o błędzie!

Zgadzam się z warunkami

Zapomniałeś hasła? Wprowadź swój adres e-mail. Otrzymasz link do utworzenia nowego hasła.

E-mail Oto komunikat o błędzie!

Powrót do wejścia

Blisko

Style CSS:

Podstawowe kontrolki szablonu i formularzy zostały zaprojektowane w popularnym stylu Flat, z wyraźnym naciskiem na minimalizm. Nic zbędnego, umiarkowanie przezroczyste cieniowanie tła, czytelne kolory, dobrze dobrana czcionka i ikony wskazujące pola wejściowe. Dzięki właściwościom CSS możesz łatwo modyfikować dowolny element formularza.

.cd-user-modal (pozycja: stała; góra: 0; lewa: 0; szerokość: 100%; wysokość: 100%; tło: rgba (52, 54, 66, 0,9); z-index: 3; overflow- y: auto; kursor: wskaźnik; widoczność: ukryty; krycie: 0; -webkit-transition: krycie 0,3s 0, widoczność 0 0,3s; -moz-transition: krycie 0,3s 0, widoczność 0 0,3s; przejście: krycie 0,3 s 0, widoczność 0 0,3s;) .cd-user-modal .is-visible (widoczność: widoczne; krycie: 1; -webkit-transition: krycie 0,3s 0, widoczność 0 0; -moz-transition: krycie 0,3s 0, widoczność 0 0; przejście: krycie 0.3s 0, widoczność 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 (pozycja: względna; szerokość: 90%; max-wi dth: 600px; tło: #FFF; marża: 3em auto 4em; kursor: auto; promień graniczny: 0.25em; -transformacja webkit: translateY (-30px); -moz-transform: translateY (-30px); -ms-transform: translateY (-30px); -o-transform: translateY (-30px); transformacja: przetłumaczY (-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; własność przejściowa: przekształcenie; -czas trwania przejścia na webkit: 0.3s; -moz-czas trwania przejścia: 0,3s; czas przejścia: 0,3s; ) .cd-user-modal-container .cd-switcher: after (treść: ""; display: table; clear: obie;) .cd-user-modal-container .cd-switcher li (szerokość: 50%; float : left; 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: block; width: 100%; height: 50px; line-height : 50px; tło: # d2d8d8; kolor: # 809191;) .cd-user-modal-container .cd-switcher a.selected (tło: #FFF; kolor: # 505260;) @media only screen and (min-width : 600px) (.cd-user-modal-container (margin: 4em auto;) .cd-user-modal-container .cd-switcher a (wysokość: 70px; line-height: 70px;)) .cd-form ( wypełnienie: 1. 4em; ) .cd-form .fieldset (pozycja: względna; margines: 1.4em 0;) .cd-form .fieldset: first-child (margin-top: 0;) .cd-form .fieldset: last-child (margin- dół: 0;) .cd-form label (rozmiar czcionki: 14px; rozmiar czcionki: 0,875rem;) .cd-form label.image-replace ( / * zamień tekst na ikonę * / wyświetlacz: inline-block; pozycja: bezwzględna; lewy: 15px; góra: 50%; dół: auto; -webkit-transform: translateY (-50%); -moz-transform: przetłumaczY (-50%); -ms-transform: przetłumaczY (-50%); -o-transform: przetłumaczY (-50%); transformacja: przetłumaczY (-50%); wysokość: 20px; szerokość: 20px; przelewowy: ukryty; wcięcie tekstu: 100% ; Biała przestrzeń: nowrap; kolor: przezroczysty; cień tekstu: Żaden; powtarzanie tła: bez powtórzeń; pozycja w tle: 50% 0 ; } / * Ikony pól wejściowych * / .cd-forma etykieta .cd-nazwa użytkownika { zdjęcie w tle: adres URL(„../img/cd-icon-username.svg”) ; } .cd-forma etykieta .cd-e-mail { zdjęcie w tle: adres URL(„../img/cd-icon-email.svg”) ; } .cd-forma etykieta .cd-hasło { zdjęcie w tle: adres URL(„../img/cd-icon-password.svg”) ; } .cd-forma Wejście { margines: 0 ; wyściółka: 0 ; promień-granicy: 0,25em; } .cd-forma Wejście .pełna szerokość { szerokość: 100% ; } .cd-forma Wejście .ma dopełnienie { wyściółka: 12px 20px 12px 50px; } .cd-forma Wejście .ma-obramowanie { granica: 1 piksel solidny # d2d8d8; -Wygląd-webkit : Żaden; -moz-wygląd : Żaden; -wygląd-ms : Żaden; -o-wygląd : Żaden; wygląd zewnętrzny : Żaden; } .cd-forma Wejście .ma-obramowanie: Centrum { kolor ramki: #343642 ; cień pudełka: 0 0 5px RGB(52 , 54 , 66 , 0.1 ) ; zarys: Żaden; } .cd-forma Wejście .ma-błąd { granica: 1 piksel solidny #d76666; } .cd-forma Wejście [ rodzaj = hasło ] { / * miejsce na przycisk Ukryj * / dopełnienie-prawo: 65px; } .cd-forma Wejście [ rodzaj = Zatwierdź ] { wyściółka: 16px 0 ; kursor: wskaźnik; tło: # 2f889a; kolor: #FFF; grubość czcionki: pogrubiony; granica: Żaden; -Wygląd-webkit : Żaden; -moz-wygląd : Żaden; -wygląd-ms : Żaden; -o-wygląd : Żaden; wygląd zewnętrzny : Żaden; } .nie dotykać .cd-forma Wejście [ rodzaj = Zatwierdź ] : unosić się, .nie dotykać .cd-forma Wejście [ rodzaj = Zatwierdź ] : Centrum { tło: # 3599; zarys: Żaden; } .cd-forma .Ukryj hasło { wyświetlacz: wbudowany blok; pozycja: absolutny; Prawidłowy: 0 ; szczyt: 0 ; wyściółka: 6px 15px; obramowanie lewe: 1 piksel solidny # d2d8d8; szczyt: 50% ; na dole: automatyczny; -transformacja-webkit : przetłumaczY (-50% ) ; -moz-transformacja : przetłumaczY (-50% ) ; -ms-transformacja : przetłumaczY (-50% ) ; -o-transformacja : przetłumaczY (-50% ) ; przekształcać: przetłumaczY (-50% ) ; rozmiar czcionki: 14px; rozmiar czcionki: 0,875 REM; kolor: #343642 ; } .cd-forma .cd-komunikat-o-błędzie { wyświetlacz: wbudowany blok; pozycja: absolutny; lewo: -5px; na dole: -35px; tło: RGB(215 , 102 , 102 , 0.9 ) ; wyściółka: 0,8 em; indeks z: 2 ; kolor: #FFF; rozmiar czcionki: 13px; rozmiar czcionki: 0,8125 REM; promień-granicy: 0,25em; / * zapobiegaj kliknięciom i dotknięciom * / wskaźniki-wydarzenia: Żaden; widoczność: ukryty; nieprzezroczystość: 0 ; -przejście-webkit : nieprzezroczystość 0,2s 0 , widoczność 0 0,2s; -moz-przejście : nieprzezroczystość 0,2s 0 , widoczność 0 0,2s; przemiana: nieprzezroczystość 0,2s 0 , widoczność 0 0,2s; } .cd-forma .cd-komunikat-o-błędzie:: po { / * róg komunikatu o błędzie * / zadowolony: "" ; pozycja: absolutny; lewo: 22px; na dole: 100% ; wzrost: 0 ; szerokość: 0 ; obramowanie lewe: 8px solidny przezroczysty; granica-prawo: 8px solidny przezroczysty; obramowanie-dół: 8px solidny RGB(215 , 102 , 102 , 0.9 ) ; } .cd-forma .cd-komunikat-o-błędzie.jest widoczny { nieprzezroczystość: 1 ; widoczność: widoczny; -przejście-webkit : nieprzezroczystość 0,2s 0 , widoczność 0 0 ; -moz-przejście : nieprzezroczystość 0,2s 0 , widoczność 0 0 ; przemiana: nieprzezroczystość 0,2s 0 , widoczność 0 0 ; } @głoska bezdźwięczna tylko ekran i (minimalna szerokość: 600px) { .cd-forma { wyściółka: 2em; } .cd-forma .zestaw pól { margines: 2em 0 ; } .cd-forma .zestaw pól: pierworodny { margines-góra: 0 ; } .cd-forma .zestaw pól: ostatnie dziecko { marża-dolna: 0 ; } .cd-forma Wejście .ma dopełnienie { wyściółka: 16px 20px 16px 50px; } .cd-forma Wejście [ rodzaj = Zatwierdź ] { wyściółka: 16px 0 ; } } .cd-formularz-wiadomość { wyściółka: 1.4em 1.4em 0 ; rozmiar czcionki: 14px; rozmiar czcionki: 0,875 REM; Wysokość linii: 1.4 ; wyrównanie tekstu: środek; } @głoska bezdźwięczna tylko ekran i (minimalna szerokość: 600px) { .cd-formularz-wiadomość { wyściółka: 2em 2em 0 ; } } .cd-formularz-dolna-wiadomość { pozycja: absolutny; szerokość: 100% ; lewo: 0 ; na dole: -30px; wyrównanie tekstu: środek; rozmiar czcionki: 14px; rozmiar czcionki: 0,875 REM; } .cd-formularz-dolna-wiadomość a { kolor: #FFF; tekst-dekoracja: podkreślać; } .cd-zamknij-formularz { / * Styl X przycisk w prawym górnym rogu * / wyświetlacz: blok; pozycja: absolutny; szerokość: 40px; wzrost: 40px; Prawidłowy: 0 ; szczyt: -40px; tło: adres URL(„../img/cd-icon-close.svg”) bez powtórzeń środek środek; wcięcie tekstu: 100% ; Biała przestrzeń: nowrap; przelewowy: ukryty; } @głoska bezdźwięczna tylko ekran i (minimalna szerokość: 1170 pikseli) { .cd-zamknij-formularz { wyświetlacz: Żaden; } } # cd-login, # rejestracja cd, # cd-reset-password { wyświetlacz: Żaden; } # cd-login.jest zaznaczona, # rejestracja cd.jest zaznaczona, # cd-reset-password.jest zaznaczona { wyświetlacz: blok; }

Cd-user-modal (pozycja: stała; góra: 0; lewa: 0; szerokość: 100%; wysokość: 100%; tło: rgba (52, 54, 66, 0,9); z-index: 3; overflow-y : auto; kursor: wskaźnik; widoczność: ukryty; krycie: 0; -webkit-transition: krycie 0,3s 0, widoczność 0 0,3s; -moz-transition: krycie 0,3s 0, widoczność 0 0,3s; przejście: krycie 0,3s 0, widoczność 0 0,3s;) .cd-user-modal.is-visible (widoczność: widoczne; krycie: 1; -webkit-transition: krycie 0,3s 0, widoczność 0 0; -moz-transition: krycie 0,3s 0 , widoczność 0 0; przejście: krycie 0.3s 0, widoczność 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 (pozycja: względna; szerokość: 90 %; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0,25em; -webkit-transform: translateY (-30px); -moz-transform: przetłumaczY (-30px); -ms-transform: translateY (-30px); -o-transform: translateY (-30px); transformacja: przetłumaczY (-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; własność przejściowa: przekształcenie; -czas trwania przejścia na webkit: 0.3s; -moz-czas trwania przejścia: 0,3s; czas przejścia: 0,3s; ) .cd-user-modal-container .cd-switcher: after (treść: ""; display: table; clear: obie;) .cd-user-modal-container .cd-switcher li (szerokość: 50%; float : left; 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: block; width: 100%; height: 50px; line-height : 50px; tło: # d2d8d8; kolor: # 809191;) .cd-user-modal-container .cd-switcher a.selected (tło: #FFF; kolor: # 505260;) @media only screen and (min-width : 600px) (.cd-user-modal-container (margines: 4em auto;) .cd-user-modal-container .cd-switcher a (wysokość: 70px; line-height: 70px;)) .cd-form ( padding: 1.4em;) .cd-form .fieldset (pozycja: względna; margines: 1.4em 0;) .cd-form .fieldset: first-child (margin-top: 0;) .cd-form .fieldset: last -child (margin-bottom: 0;) .cd-form label (rozmiar-czcionki e: 14px; rozmiar czcionki: 0,875 rem; ) .cd-form label.image-replace (/ * zastąp tekst ikoną * / display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY (- 50%); -moz-transform: przetłumaczY (-50%); -ms-transform: przetłumaczY (-50%); -o-transform: przetłumaczY (-50%); przekształc: przetłumaczY (-50%); wysokość : 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: brak; background-repeat: no-repeat; background-position: 50% 0; ) / * Ikony pól wejściowych * / .cd-form label.cd-username (obraz-tła: url (". ./img/cd-icon-username.svg ");) .cd-form label.cd-email (obraz tła: url (" ../ img / cd-icon-email.svg ");) .cd -form label.cd-password (background-image: url ("../ img / cd-icon-password.svg");) .cd-form input (margin: 0; padding: 0; border-radius: 0.25 em;) .cd-form input.full-width (szerokość: 100%;) .cd-form input.has-padding (dopełnienie: 12px 20px 12px 50px;) .cd-form input.has-border (obramowanie: 1px solid # d2d8d8; -webkit-appearance: brak; -moz-appearance: brak; -ms-appearance: brak; -o-appearance: brak; wygląd: brak;) .cd-form input.has-border: focus (border -color: # 343642; box-shadow: 0 0 5px rgba (52, 54, 66, 0.1); zarys: brak;) .cd-form input.has-error (obramowanie: 1px solid # d76666;) .cd- wejście formularza (/ * spacja na przycisk Ukryj * / padding-right: 65px;) .cd-form input (padding: 16px 0; kursor: wskaźnik; tło: # 2f889a; kolor: #FFF; font-weight: bold; border : brak;-webkit-appearance: brak;-moz-appearance: brak;-ms-appearance: brak; -o-wygląd: brak; wygląd: brak; ) .no-touch .cd-form input: hover, .no-touch .cd-form input: fokus (tło: # 3599ae; zarys: brak;) .cd-form .hide-password (wyświetlacz: inline-block; pozycja: bezwzględna; prawo: 0; góra: 0; dopełnienie: 6px 15px; border-left: 1px solid # d2d8d8; góra: 50%; dół: auto; -webkit-transform: translateY (-50%); -moz- transform: translateY (-50%); -ms-transform: translateY (-50%); -o-transform: translateY (-50%); transform: translateY (-50%); font-size: 14px; font- rozmiar: 0.875rem; kolor: # 343642;) .cd-form .cd-error-message (wyświetlacz: inline-block; pozycja: bezwzględna; lewy: -5px; dół: -35px; tło: rgba (215, 102, 102, 0,9); padding: 0,8 em; indeks z: 2; kolor: #FFF; rozmiar czcionki: 13 pikseli; rozmiar czcionki: 0,8125 rem; promień obramowania: 0,25 em; / * zapobiegaj kliknięciom i dotknięciom * / wskaźnik -zdarzenia: brak; widoczność: ukryte; krycie: 0; -webkit-transition: krycie 0,2s 0, widoczność 0 0,2s; -moz-transition: krycie 0,2s 0, widoczność 0 0,2s; przejście: krycie 0,2s 0, odwiedzić zdolność 0 0,2s; ) .cd-form .cd-error-message :: after (/* róg komunikatu o błędzie * / content: ""; pozycja: bezwzględna; lewa: 22px; dół: 100%; wysokość: 0; szerokość: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba (215, 102, 102, 0.9);) .cd-form .cd-error-message.is-visible (opacity : 1; widoczność: widoczna; -webkit-transition: krycie 0,2s 0, widoczność 0 0; -moz-transition: krycie 0. 2s 0, widzialność 0 0; przejście: krycie 0,2s 0, widzialność 0 0; ) @media only screen i (min-width: 600px) (.cd-form (dopełnienie: 2em;) .cd-form .fieldset (margines: 2em 0;) .cd-form .fieldset: first-child (margin- top: 0;) .cd-form .fieldset: last-child (margin-bottom: 0;) .cd-form input.has-padding (padding: 16px 20px 16px 50px;) .cd-form input (padding: 16px 0;)) .cd-form-message (padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center;) @media only screen and (min-szerokość: 600px) (.cd-form-message (dopełnienie: 2em 2em 0;)) .cd-form-bottom-message (pozycja: bezwzględna; szerokość: 100%; lewo: 0; dół: -30px; text-align: center; font-size: 14px; font-size: 0.875rem;) .cd-form-bottom-message a (kolor: #FFF; text-decoration: underline;) .cd-close-form (/ * styl X przycisku u góry po prawej * / display: blok; pozycja: bezwzględna; szerokość: 40 pikseli; wysokość: 40 pikseli; prawo: 0; góra: -40 pikseli; tło: url ("../ img / cd-icon-close. svg ") środek bez powtórzeń; wcięcie tekstu: 100 %; spacja: nowrap; przelew: ukryty; ) @media only screen and (min-width: 1170px) (.cd-close-form (wyświetlanie: brak;)) # cd-login, # cd-signup, # cd-reset-password (wyświetlacz: brak;) # cd-login.is-selected, # cd-signup.is-selected, # cd-reset-password.is-selected (wyświetlanie: blok;)

W efekcie przejścia zanikania dodano opóźnienie, aby modalny zanikał przy zamknięciu.

Notatka:. Domyślny rozmiar czcionki wszystkich pól wejściowych to 16px. Zapobiega to automatycznemu skalowaniu, które występuje podczas przeglądania na urządzeniach mobilnych.

Znajduje się autorska, burżuazyjna wersja wtyczki. W tym samym miejscu możesz pobrać oryginał.
Wersję rosyjską możesz pobrać z mojego Yandex.Disk, wszystkie niezbędne pliki są starannie zapakowane w jedno archiwum, wcześniej nie zapomnij spojrzeć na w pełni dostosowany, żywy przykład pracy tej wspaniałej wtyczki jQuery:

Z całym szacunkiem, Andrzeju

W tym artykule dowiesz się jak stworzyć formularz rejestracyjny i autoryzacyjny za pomocą HTML, JavaScript, PHP i MySql. Takie formularze są stosowane na prawie każdej stronie, niezależnie od jej rodzaju. Tworzone są zarówno dla forum, jak i sklepu internetowego, portali społecznościowych (takich jak np. Facebook, Twiter, Odnoklassniki) oraz wielu innych typów witryn.

Jeśli masz witrynę na swoim lokalnym komputerze, mam nadzieję, że już ją masz. Bez tego nic nie będzie działać.

Tworzenie tabeli w Bazie Danych

W celu wdrożenia rejestracji użytkowników potrzebujemy przede wszystkim Bazy Danych. Jeśli już to masz, to świetnie, w przeciwnym razie musisz to stworzyć. W tym artykule wyjaśnię szczegółowo, jak to zrobić.

I tak mamy Bazę Danych (w skrócie baza danych), teraz musimy stworzyć tabelę użytkownicy w którym dodamy naszych zarejestrowanych użytkowników.

W artykule wyjaśniłem również, jak utworzyć tabelę w bazie danych. Przed utworzeniem tabeli musimy określić, jakie pola będzie ona zawierać. Pola te będą odpowiadały polom z formularza rejestracyjnego.

Pomyśleliśmy więc, wyobraziliśmy sobie, jakie pola będzie miał nasz formularz i utworzymy tabelę użytkownicy z polami takimi jak:

• NS- Identyfikator. Pole NS każda tabela z bazy danych powinna mieć.
• Imię- Aby zapisać nazwę.
• nazwisko- Za zapisywanie nazwisk.
• e-mail- Aby zapisać adres pocztowy. Będziemy używać e-maila jako loginu, więc to pole musi być unikalne, czyli musi mieć UNIKALNY indeks.
• stan_e-mail- Pole do wskazania, czy wiadomość jest potwierdzona, czy nie. Jeśli wiadomość zostanie potwierdzona, będzie miała wartość 1, w przeciwnym razie wartość 0. Domyślnie to pole będzie miało wartość 0.
• hasło- Aby zapisać hasło.

Wszystkie pola typu „VARCHAR” muszą mieć domyślną wartość NULL.

Jeśli chcesz, aby Twój formularz rejestracyjny zawierał więcej pól, możesz je również dodać tutaj.

Wszystko, nasz stół użytkownicy gotowy. Przejdźmy do następnego kroku.

Połączenie z bazą danych

Stworzyliśmy bazę danych, teraz musimy się z nią połączyć. Połączymy się za pomocą rozszerzenia PHP MySQLi.

W folderze naszej witryny utwórz plik o nazwie dbconnect.php, a w nim piszemy następujący skrypt:

Błąd połączenia z bazą danych... Opis błędu: ".mysqli_connect_error ()."

"; exit ();) // Ustaw kodowanie połączenia $ mysqli-> set_charset (" utf8 "); // Dla wygody dodajmy tutaj zmienną, która będzie zawierała nazwę naszej strony $ address_site =" http: // testsite.local " ;?>

Ten plik dbconnect.php będą musiały być podłączone do form obsługi.

Zwróć uwagę na zmienną $ adres_witryny, tutaj podałem nazwę mojej strony testowej, nad którą będę pracował. Ty odpowiednio wskazujesz nazwę swojej witryny.

Struktura strony

Przyjrzyjmy się teraz strukturze HTML naszej witryny.

Przeniesiemy nagłówek i stopkę strony do osobnych plików, header.php oraz stopka.php... Zamieścimy je na wszystkich stronach. Mianowicie na głównej (plik index.php), na stronę z formularzem rejestracyjnym (plik formularz_rejestr.php) oraz do strony z formularzem autoryzacji (plik formularz_auth.php).

Blokuj za pomocą naszych linków, rejestracja oraz upoważnienie, dodaj do nagłówka witryny, aby były wyświetlane na wszystkich stronach. Jeden link wejdzie dalej strona formularza rejestracyjnego(plik formularz_rejestr.php) a drugi do strony z formularz autoryzacyjny(plik formularz_auth.php).

Zawartość pliku header.php:

Nazwa naszej strony

W rezultacie strona główna wygląda tak:

Oczywiście Twoja strona może mieć zupełnie inną strukturę, ale nie jest to dla nas teraz ważne. Najważniejsze jest to, że istnieją linki (przyciski) do rejestracji i autoryzacji.

Przejdźmy teraz do formularza rejestracyjnego. Jak już zrozumiałeś, mamy to w aktach formularz_rejestr.php.

Przejdź do bazy danych (w phpMyAdmin), otwórz strukturę tabeli użytkownicy i zobacz, jakich pól potrzebujemy. Oznacza to, że potrzebujemy pól do wpisania imienia i nazwiska, pola do wpisania adresu pocztowego (e-mail) oraz pola do wpisania hasła. A ze względów bezpieczeństwa dodamy pole do wpisania captcha.

Na serwerze w wyniku przetworzenia formularza rejestracyjnego mogą wystąpić różne błędy, przez które użytkownik nie będzie mógł się zarejestrować. Dlatego, aby użytkownik zrozumiał, dlaczego rejestracja się nie powiodła, konieczne jest wyświetlanie komunikatów o tych błędach.

Przed wyświetleniem formularza dodaj blok, aby wyświetlić komunikaty o błędach z sesji.

I jeszcze jedno, jeśli użytkownik jest już autoryzowany i w trosce o zainteresowanie wchodzi na stronę rejestracji bezpośrednio, pisząc w pasku adresu przeglądarki adres_strony / form_register.php, to w takim przypadku zamiast formularza rejestracyjnego wyświetlimy mu tytuł z informacją, że jest już zarejestrowany.

Ogólnie kod pliku formularz_rejestr.php mamy to tak:

Jesteś już zarejestrowany

W przeglądarce strona z formularzem rejestracyjnym wygląda tak:

Używając wymagany atrybut, wypełniliśmy wszystkie wymagane pola.

Zwróć uwagę na kod formularza rejestracyjnego, gdzie wyświetla się captcha:

Ścieżkę do pliku określiliśmy w wartości atrybutu src dla obrazu captcha.php który generuje ten captcha.

Spójrzmy na kod pliku captcha.php:

Kod jest dobrze skomentowany, więc skupię się tylko na jednym punkcie.

Wewnątrz funkcji obrazTtfText (), ścieżka do czcionki jest określona verdana.ttf... Aby captcha działała poprawnie, musimy utworzyć folder czcionki i umieść tam plik czcionki verdana.ttf... Możesz go znaleźć i pobrać z Internetu lub pobrać z archiwum z materiałami tego artykułu.

Skończyliśmy ze strukturą HTML, czas przejść dalej.

Sprawdzanie poprawności wiadomości e-mail za pomocą jQuery

Każdy formularz musi sprawdzać poprawność wprowadzonych danych, zarówno po stronie klienta (za pomocą JavaScript, jQuery), jak i po stronie serwera.

Musimy zwrócić szczególną uwagę na pole E-mail. Bardzo ważne jest, aby wprowadzony adres pocztowy był poprawny.

Dla tego pola wejściowego ustawiamy typ wiadomości e-mail (type = "email"), co nieco ostrzega nas przed nieprawidłowymi formatami. Ale to nie wystarczy, ponieważ za pomocą inspektora kodu, który udostępnia nam przeglądarka, możesz łatwo zmienić wartość atrybutu rodzaj z e-mail na tekst i tyle, nasz czek nie będzie już ważny.

I w takim przypadku musimy przeprowadzić bardziej wiarygodną kontrolę. W tym celu wykorzystamy bibliotekę jQuery z JavaScript.

Aby podłączyć bibliotekę jQuery, w pliku header.php między tagami , przed tagiem zamykającym , dodaj ten wiersz:

Zaraz po tym wierszu dodaj kod sprawdzania poprawności adresu e-mail. Tutaj dodajemy kod do sprawdzenia długości wprowadzonego hasła. Jego długość musi wynosić co najmniej 6 znaków.

Za pomocą tego skryptu sprawdzamy poprawność wpisanego adresu e-mail. Jeśli użytkownik wprowadził niepoprawny adres e-mail, wyświetlamy mu błąd o tym i dezaktywujemy przycisk do przesłania formularza. Jeśli wszystko jest w porządku, usuwamy błąd i aktywujemy przycisk do przesłania formularza.

I tak kończymy walidację formularza po stronie klienta. Teraz możemy wysłać go na serwer, gdzie również dokonamy kilku sprawdzeń i dodamy dane do bazy danych.

Rejestracja Użytkownika

Przesyłamy formularz do przetworzenia do pliku rejestr.php, metodą POST. Nazwa tego pliku obsługi, określona w wartości atrybutu akcja... A metoda wysyłania jest określona w wartości atrybutu metoda.

Otwórz ten plik rejestr.php a pierwsze co musimy zrobić to napisać funkcję uruchamiającą sesję i połączyć utworzony wcześniej plik dbconnect.php(W tym pliku wykonaliśmy połączenie z bazą danych). A jednak od razu zadeklarujmy komórki komunikaty o_błędach oraz sukces_wiadomości w globalnej tablicy sesji. V komunikaty o_błędach będziemy rejestrować wszystkie komunikaty o błędach, które pojawią się podczas przetwarzania formularza i w sukces_wiadomości, będziemy nagrywać radosne wiadomości.

Przed kontynuowaniem musimy sprawdzić czy formularz w ogóle został złożony?... Atakujący może spojrzeć na wartość atrybutu akcja z formularza i dowiedz się, który plik przetwarza ten formularz. I może wpaść na pomysł, aby przejść bezpośrednio do tego pliku, wpisując następujący adres w pasku adresu przeglądarki: http: //arees_site/register.php

Dlatego musimy sprawdzić obecność komórki w globalnej tablicy POST, której nazwa odpowiada nazwie naszego przycisku „Zarejestruj” z formularza. W ten sposób sprawdzamy, czy przycisk „Zarejestruj” został kliknięty, czy nie.

Jeśli atakujący spróbuje przejść bezpośrednio do tego pliku, otrzyma komunikat o błędzie. Przypomnę, że zmienna $ address_site zawiera nazwę strony i została zadeklarowana w pliku dbconnect.php.

Błąd! strona główna.

"); } ?>

Wartość captcha w sesji została dodana podczas generowania, w pliku captcha.php... Dla przypomnienia pokażę ponownie ten fragment kodu z pliku. captcha.php, gdzie do sesji dodawana jest wartość captcha:

Przejdźmy teraz do samej weryfikacji. W pliku rejestr.php, wewnątrz bloku if, w którym sprawdzamy, czy został kliknięty przycisk „Zarejestruj”, czy raczej, gdzie podany jest komentarz „ // (1) Miejsce na kolejny fragment kodu"piszemy:

// Sprawdź wynikowy captcha // Przytnij spacje od początku i końca wiersza $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! empty ($ captcha)) (// Porównaj otrzymaną wartość z wartością z sesji. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Jeśli captcha nie jest poprawna, zwracamy użytkownikowi stronę rejestracji, a tam wyświetlamy komunikat o błędzie, że wprowadził niewłaściwą captcha $ error_message = "

Błąd! Wpisałeś niewłaściwą captcha

"; // Zapisz komunikat o błędzie w sesji. $ _SESSION [" error_messages "] = $ error_message; // Zwróć użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesione na stałe "); nagłówek (" Lokalizacja: " $ Address_site . "/ form_register.php"); // Zatrzymaj skrypt exit();) // (2) Miejsce na następny fragment kodu) else (// Jeśli captcha nie jest przekazana lub jest pusta exit ( "

Błąd! Nie ma kodu weryfikacyjnego, czyli kodu captcha. Możesz przejść do strony głównej.

"); }

Następnie musimy przetworzyć odebrane dane z tablicy POST. Przede wszystkim musimy sprawdzić zawartość globalnej tablicy POST, czyli czy istnieją komórki, których nazwy odpowiadają nazwom pól wejściowych z naszego formularza.

Jeżeli komórka istnieje, to wycinamy spacje od początku i od końca wiersza z tej komórki, w przeciwnym razie przekierowujemy użytkownika z powrotem na stronę z formularzem rejestracyjnym.

Dalej, po przycięciu spacji, dodajemy do zmiennej linię i sprawdzamy, czy ta zmienna jest pusta, jeśli nie jest pusta, to śmiało, w przeciwnym razie przekierujemy użytkownika z powrotem na stronę z formularzem rejestracyjnym.

Wklej ten kod w określonej lokalizacji ” // (2) Miejsce na kolejny fragment kodu".

/ * Sprawdź, czy globalna tablica $ _POST zawiera dane wysłane z formularza i umieść przesłane dane w zwykłych zmiennych * / If (isset ($ _ POST ["first_name"])) (// Utnij spacje od początku i od końca ciągu $ first_name = trim ($ _ POST ["first_name"]); // Sprawdź zmienną pod kątem pustki if (! empty ($ first_name)) (// Dla bezpieczeństwa przekonwertuj znaki specjalne na encje HTML $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Wpisz swoje imię

Brak pola nazwy

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) if ( isset ($ _ POST ["last_name"])) (// Przytnij spacje od początku i końca ciągu $ last_name = trim ($ _ POST ["last_name"]); if (! empty ($ last_name )) (// Ze względów bezpieczeństwa , przekonwertuj znaki specjalne na encje HTML $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Wpisz swoje nazwisko

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Brak pola nazwiska

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) if ( isset ($ _ POST ["email"])) (// Utnij spacje od początku i końca linii $ email = trim ($ _ POST ["email"]); if (! empty ($ email )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Miejsce kodu do sprawdzenia formatu adresu e-mail i jego unikalności) else (// Zapisz komunikat o błędzie do sesji. $ _SESSION [ "komunikaty o_błędach"]. = "

Wprowadź swój email

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) if ( isset ($ _ POST ["hasło"])) (// Utnij spacje od początku i końca ciągu $ hasło = trim ($ _ POST ["hasło"]); if (! puste ($ hasło )) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Zaszyfruj paprol $ password = md5 ($ password. "top_secret");) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages "]. = "

Wprowadź hasło

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) // (4) Miejsce na kod dodawania użytkownika do bazy danych

Szczególne znaczenie ma pole e-mail... Musimy sprawdzić format otrzymanego adresu pocztowego i jego unikalność w bazie danych. To znaczy, czy jest już zarejestrowany użytkownik z tym samym adresem pocztowym?

W określonej lokalizacji ” // (3) Miejsce kodu do sprawdzenia formatu adresu pocztowego i jego unikalności"dodaj następujący kod:

// Sprawdź format otrzymanego adresu e-mail za pomocą wyrażenia regularnego $ reg_email = "/^**@(+(*+)*\.)++/i"; // Jeśli format otrzymanego adresu e-mail nie pasuje do wyrażenia regularnego if (! Preg_match ($ reg_email, $ email)) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Wpisałeś nieprawidłowy adres e-mail

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) // Sprawdzamy czy taki adres już istnieje w bazie $ Result_query = $ mysqli-> zapytanie ("SELECT` email` FROM `users` WHERE` email` = "". $ Email. "" "); // Jeśli liczba otrzymanych wierszy wynosi dokładnie jeden, więc użytkownik o tym adresie e-mail jest już zarejestrowany if ($ result_query-> num_rows == 1) (// Jeśli wynik nie jest fałszywy if (($ row = $ result_query -> fetch_assoc ())! = false) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Użytkownik z tym adresem e-mail jest już zarejestrowany

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesione na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php ");) else (// Zapisz komunikat o błędzie do sesji $_SESSION ["komunikaty_o_błędach"]. = "

Błąd w zapytaniu do bazy danych

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php ");) / * zamknij zaznaczenie * / $ wynik_zapytanie-> close ();// zatrzymanie wyjścia skryptu ();) / * zamknięcie zaznaczenia * / $ wynik_zapytania-> close ();

I tak skończyliśmy ze wszystkimi sprawami, czas dodać użytkownika do bazy. W określonej lokalizacji ” // (4) Miejsce na kod dodawania użytkownika do bazy"dodaj następujący kod:

// Żądanie dodania użytkownika do bazy danych $ result_query_insert = $ mysqli-> zapytanie („INSERT INTO` users` (imię, nazwisko, e-mail, hasło) VALUES ("". $ First_name. "", "". $ Last_name . " "," ". $ e-mail." "," ". $ hasło." ")"); if (! $ result_query_insert) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Nie udało się dodać użytkownika do żądania bazy danych

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) else ( $ _SESSION ["success_messages"] = "

Rejestracja zakończona sukcesem!!!
Teraz możesz się zalogować, używając swojej nazwy użytkownika i hasła.

"; // Wyślij użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesione na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php ");) / * Uzupełnienie żądania * / $ result_query_insert-> close ();// Zamknij połączenie z bazą danych $ mysqli-> close ();

W przypadku wystąpienia błędu w żądaniu dodania użytkownika do bazy dodajemy do sesji komunikat o tym błędzie i zwracamy użytkownika na stronę rejestracji.

W przeciwnym razie, jeśli wszystko poszło dobrze, również dodajemy wiadomość do sesji, ale już przyjemniej, a mianowicie mówimy użytkownikowi, że rejestracja się powiodła. A my przekierowujemy go na stronę z formularzem autoryzacyjnym.

Skrypt do sprawdzania formatu adresu e-mail i długości hasła znajduje się w pliku header.php, więc będzie działać również na polach z tego formularza.

Sesja jest również uruchamiana w pliku header.php, więc w pliku formularz_auth.php nie musisz rozpoczynać sesji, bo dostaniemy błąd.

Jak już wspomniałem, działa tutaj również skrypt sprawdzający format adresu e-mail i długość hasła. Dlatego jeśli użytkownik wprowadzi błędny adres e-mail lub krótkie hasło, natychmiast otrzyma komunikat o błędzie. I przycisk wejść stanie się nieaktywny.

Po usunięciu błędów przycisk wejść stanie się aktywny i użytkownik będzie mógł przesłać formularz na serwer, na którym zostanie przetworzony.

Autoryzacja użytkownika

Do wartości atrybutu akcja handicap autoryzacyjny ma plik auth.php, oznacza to, że formularz zostanie przetworzony w tym pliku.

A więc otwórz plik auth.php i napisz kod do przetworzenia formularza autoryzacji. Pierwszą rzeczą do zrobienia jest rozpoczęcie sesji i podłączenie pliku dbconnect.php połączyć się z bazą danych.

// Zadeklaruj komórkę, aby dodać błędy, które mogą wystąpić podczas przetwarzania formularza. $_SESSION ["komunikaty o_błędach"] = ""; // Zadeklaruj komórkę do dodawania pomyślnych wiadomości $ _SESSION ["success_messages"] = "";

/ * Sprawdź, czy formularz został przesłany, czyli czy został kliknięty przycisk Zaloguj. Jeśli tak, to śmiało, jeśli nie, wyświetl użytkownikowi komunikat o błędzie z informacją, że przeszedł bezpośrednio na tę stronę. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! pusty ($ _ POST ["btn_submit_auth"])) (// (1) Spacja na następny fragment kodu) else (exit ("

Błąd! Wszedłeś bezpośrednio na tę stronę, więc nie ma danych do przetworzenia. Możesz przejść do strony głównej.

"); }

// Sprawdź wynikowy captcha if (isset ($ _ POST ["captcha"])) (// Utnij spacje od początku i końca wiersza $ captcha = trim ($ _ POST ["captcha"]); if (! Empty ($ captcha )) (// Porównaj otrzymaną wartość z wartością z sesji. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Jeśli captcha nie jest poprawna , zwracamy użytkownikowi stronę autoryzacji i tam wyświetlamy komunikat o błędzie, że wprowadził niepoprawny kod captcha. $ error_message = "

Błąd! Wpisałeś niewłaściwą captcha

"; // Zapisz komunikat o błędzie w sesji. $ _SESSION [" error_messages "] = $ error_message; // Zwróć użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 Moved Permanently "); header (" Location: " $ Address_site . "/ form_auth.php"); // Zatrzymaj wyjście ze skryptu ();)) else ($ error_message = "

Błąd! Pole do wpisania captcha nie może być puste.

"; // Zapisz komunikat o błędzie w sesji. $ _SESSION [" error_messages "] = $ error_message; // Zwróć użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 Moved Permanently "); header (" Location: " $ Address_site . "/ form_auth.php"); // Zatrzymanie wyjścia skryptu ();) // (2) Miejsce do przetwarzania adresu e-mail // (3) Miejsce do przetwarzania hasła // (4) Miejsce do wykonanie zapytania do bazy danych) else (// Jeśli nie przekazano captcha exit ("

Błąd! Brakuje kodu weryfikacyjnego, czyli kodu captcha. Możesz przejść do strony głównej.

"); }

Jeśli użytkownik poprawnie wpisał kod weryfikacyjny, kontynuuj, w przeciwnym razie zwracamy go na stronę autoryzacyjną.

Sprawdzanie adresu pocztowego

// Utnij spacje od początku i końca wiersza $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! empty ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Sprawdź format otrzymanego adresu e-mail za pomocą wyrażenia regularnego $ reg_email = " /^**@(+(*+)*\.)++/i "; // Jeśli format otrzymanego adresu e-mail nie pasuje do wyrażenia regularnego if (! preg_match ($ reg_email, $ email)) (// Zapisz w komunikacie o błędzie sesji. $ _SESSION ["error_messages"]. = "

Wpisałeś niepoprawny e-mail

"; // Powrót użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Pole do wpisania adresu pocztowego (e-mail) nie powinno być puste.

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Brak pola e-mail

"; // Powrót użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); ) // (3) Przestrzeń do przetwarzania hasła

Jeśli użytkownik wpisał adres pocztowy w niepoprawnym formacie lub wartość pola adresu pocztowego jest pusta, to zwracamy go na stronę autoryzacyjną, gdzie wyświetlamy komunikat o tym.

Sprawdzanie hasła

Kolejnym polem do przetworzenia jest pole hasła. Do określonej lokalizacji ” // (3) Miejsce do przetwarzania hasła", piszemy:

If (isset ($ _ POST ["hasło"])) (// Utnij spacje od początku i końca ciągu $ hasło = trim ($ _ POST ["hasło"]); if (! Empty ($ hasło) ) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Zaszyfruj hasło $ password = md5 ($ password. "top_secret");) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages" ]. = "

Wprowadź hasło

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Nie ma pola do wpisania hasła

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); )

Tutaj za pomocą funkcji md5() szyfrujemy otrzymane hasło, ponieważ w bazie danych mamy hasła w postaci zaszyfrowanej. Dodatkowe tajne słowo w szyfrowaniu, w naszym przypadku” ściśle tajne„musi być tym, który został użyty podczas rejestracji użytkownika.

Teraz należy wykonać zapytanie do bazy danych na próbce użytkownika, którego adres pocztowy jest równy otrzymanemu adresowi pocztowemu, a hasło jest takie samo jak otrzymane hasło.

// Zapytanie w bazie danych dotyczące wyboru użytkownika. $ result_query_select = $ mysqli-> zapytanie ("SELECT * FROM` users` WHERE email = "". $ email. "" AND hasło = "". $ hasło. "" "); if (! $ result_query_select) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Błąd żądania podczas pobierania użytkownika z bazy danych

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); ) else ( // Sprawdzamy czy w bazie danych nie ma użytkownika z takimi danymi, to wyświetlamy komunikat błędu if ($ result_query_select-> num_rows == 1) (// Jeżeli wprowadzone dane zgadzają się z danymi z bazy, następnie zapisujemy login i hasło do tablicy sesji $_SESSION ["email"] = $ e-mail; $ _SESSION ["hasło"] = $ hasło; // Powrót użytkownika do nagłówka strony głównej ("HTTP / 1.1 301 Przeniesione na stałe"); nagłówek ("Location:". $ Address_site . "/ index.php");) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Nieprawidłowa nazwa użytkownika i/lub hasło

"; // Powrót użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); ))

Wyloguj się ze strony

A ostatnią rzeczą, którą robimy, jest procedura opuszczenia terenu... W tej chwili nagłówek wyświetla linki do strony autoryzacyjnej i strony rejestracji.

W nagłówku witryny (plik header.php), korzystając z sesji sprawdzamy, czy użytkownik jest już zalogowany. Jeśli nie, to wyświetlamy link rejestracyjny i autoryzacyjny, w przeciwnym razie (jeśli jest autoryzowany) to zamiast linku rejestracyjnego i autoryzacyjnego wyświetlamy link Wyjście.

Zmodyfikowany fragment kodu z pliku header.php:

rejestracja

Wyjście

Kiedy klikniesz na link wyjścia ze strony, przejdziemy do pliku wyloguj.php, gdzie po prostu niszczymy komórki z adresem pocztowym i hasłem z sesji. Następnie wracamy z powrotem do strony, na której kliknął link wyjście.

Kod pliku wyloguj.php:

To wszystko. Teraz wiesz jak wdrażamy i przetwarzamy formularze rejestracyjne i autoryzacyjne, użytkownika w Twojej witrynie. Formularze te znajdują się na prawie każdej stronie, więc każdy programista powinien wiedzieć, jak je tworzyć.

Dowiedzieliśmy się również, jak walidować dane wejściowe, zarówno po stronie klienta (w przeglądarce za pomocą JavaScript, jQuery) jak i po stronie serwera (za pomocą języka PHP). Nauczyliśmy się też wdrożyć procedurę opuszczenia serwisu.

Wszystkie skrypty są przetestowane i działają. Możesz pobrać archiwum z plikami tej małej witryny pod tym linkiem.

W przyszłości napiszę artykuł, w którym opiszę. Planuję też napisać artykuł, w którym wyjaśnię (bez przeładowywania strony). Tak więc, aby być świadomym wydania nowych artykułów, możesz subskrybować moją stronę.

W razie jakichkolwiek pytań proszę o kontakt, a w przypadku zauważenia błędu w artykule proszę o informację.

Scenariusz lekcji (część 5):

1. Utwórz strukturę HTML dla formularza logowania
2. Przetwarzamy otrzymane dane
3. Wyświetlamy powitanie użytkownika w nagłówku strony

Podobał Ci się artykuł?

1. Wtyczka do tworzenia formularzy online "jFormer"

Tworzenie formularzy kontaktowych: feedback, komentarze, formularz logowania, formularz rejestracyjny ze sprawdzeniem poprawności wprowadzonych informacji.

2. Formularz rejestracyjny krok po kroku za pomocą jQuery

Zgrabna forma z wypełnieniem krok po kroku. Poniżej znajduje się wskaźnik wypełnienia formularza.

3. Formularz krok po kroku

Wypełnienie formularza w kilku krokach i sprawdzenie poprawności wypełnienia.

4. Formularz kontaktowy dla strony

Weryfikacja poprawności wprowadzonych informacji odbywa się „w locie” przed wysłaniem wiadomości za pomocą javascript.

5. Animowane przełączanie między formularzami za pomocą jQuery

Animowane przełączanie jQuery między polami logowania, rejestracji i odzyskiwania hasła. Na stronie demo kliknij żółty link, aby zobaczyć efekt.

6. Formularz płatności w PHP

Podobne rozwiązanie można zastosować, aby dać odwiedzającemu możliwość szybkiego kontaktu z właścicielem witryny z dowolnej strony. Na stronie demonstracyjnej kliknij strzałkę w dół, aby przenieść formularz.

7. Formularz rejestracyjny PHP z wykorzystaniem jQuery i CSS3

Formularz z weryfikacją poprawności wprowadzonych informacji.

8. Formularz rejestracyjny PHP w stylu Facebook

Fajny formularz rejestracyjny zaimplementowany w CSS, PHP i jQuery.

9. Formularz kontaktowy jQuery "SheepIt"

Zaimplementowano możliwość dodawania nowych pól przed wysłaniem wiadomości.

10. Formularz kontaktowy "Fancy AJAX Contact Form"

Ładny, zgrabny formularz opinii PHP z walidacją wprowadzonych informacji. Technologie: CSS, PHP, jQuery.

11. System autoryzacji/rejestracji w serwisie

12. Formularz przesyłania danych

Sprawdzenie poprawności wypełnienia.

13. Wtyczka jQuery "Kontakt"

Zaimplementować formularz kasowy, aby szybko wysłać wiadomość.