registrační formulář jquery. Registrace krok za krokem pomocí jQuery. Registrace uživatele PHP MySQL s aktivačním e-mailem

Responzivní s funkcemi přihlašovacích a registračních formulářů, s možností dynamického přepínání, bez opětovného načítání stránky. Po zobrazení okna může uživatel snadno přepínat z jednoho do druhého a v případě potřeby zvolit možnost změny hesla.
Dnes se podíváme na to, jak to vše lze provést pomocí kombinace malého, ale velmi výkonného pluginu jQuery a nových standardů CSS3.

Tato metoda bude užitečná, pokud chcete zpřístupnit přihlašovací a registrační formuláře uživatelům na každé stránce vašeho webu. Při vstupu na stránky nebo registraci nebudou uživatelé přesměrováni na jinou stránku a budou moci provádět všechny potřebné akce „bez opuštění pokladny“, vše na jedné stránce.

Vzhled vyskakovacích formulářů je implementován pomocí CSS3, celková hmotnost pluginu není nijak velká, odezva a načítání modálního okna probíhá téměř bez prodlení.
100% responzivní rozvržení, výška a šířka modálu s formuláři jsou automaticky nastaveny podle velikosti obrazovky uživatelských zařízení.

Podívali jsme se na příklad, nyní se pojďme blíže podívat na všechny hlavní součásti modálního okna a formuláře, abychom se naučili, jak je na vašem webu používat.
Provoz vyskakovacího okna s přihlašovacím a registračním formulářem je postaven na oblíbené javascriptové knihovně, spustitelném pluginu jQuey a generovaných CSS stylech. Všechny tyto nástroje musí být propojeny s vaším webem. Nejnovější aktuální verzi knihovny jQuey lze připojit přímo od Googlu, samotný soubor pluginu main.js a připravenou sadu stylů style.css najdete v archivu.
Javascript se zapisuje před uzavírací značku, styly CSS lze zkopírovat a přidat do souboru stylu .css vašeho webu.

Struktura HTML:

Základní kontejner modálních oken na tmavém pozadí a inline formuláře s ovládacími prvky jsou umístěny v těle stránky. Pro lepší pochopení jsem sektory ohraničil a přidal komentáře. Všechny prvky návrhu jsou pevně spojeny s CSS prostřednictvím určitých tříd, takže změna designu formulářů tak, aby odpovídal celkovému designu vašich stránek, není obtížná.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Vchod< li>< a href= "#0" >Registrace< div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >E-mailem< input class = id= "signin-email" type= "email" placeholder= "E-mailem" > < span class = "cd-error-message" >Zde je chybová zpráva!< p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Heslo< input class = "full-width has-padding has-border" id= "signin-password" type= "text" placeholder= "Heslo" > < a href= "#0" class = "hide-password" >Skrýt< span class = "cd-error-message" >Zde je chybová zpráva!< p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Zapamatuj si mě< p class = "fieldset" > < input class = "full-width" type= "submit" value= "Vejít do" > < p class = "cd-form-bottom-message" >< a href= "#0" >Zapomněli jste heslo?< div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Uživatelské jméno< input class = "full-width has-padding has-border" id= "signup-username" type= "text" placeholder= "Uživatelské jméno" > < span class = "cd-error-message" >Zde je chybová zpráva!< p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >E-mailem< input class = "full-width has-padding has-border" id= "signup-email" type= "email" placeholder= "E-mailem" > < span class = "cd-error-message" >Zde je chybová zpráva!< p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Heslo< input class = "full-width has-padding has-border" id= "signup-password" type= "text" placeholder= "Heslo" > < a href= "#0" class = "hide-password" >Skrýt< span class = "cd-error-message" >Zde je chybová zpráva!< p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >souhlasím s< a href= "#0" >podmínky< p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Vytvořit účet" > < div id= "cd-reset-password" > < p class = "cd-form-message" >Zapomněli jste heslo? Prosím zadejte svou e-mailovou adresu. Obdržíte odkaz pro vytvoření nového hesla.< form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >E-mailem< input class = "full-width has-padding has-border" id= "reset-email" type= "email" placeholder= "E-mailem" > < span class = "cd-error-message" >Zde je chybová zpráva!< p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Obnovit heslo" > < p class = "cd-form-bottom-message" >< a href= "#0" >Zpět ke vchodu< a href= "#0" class = "cd-close-form" >zavřít

Vchod
Registrace

Chybová zpráva e-mailu zde!

Heslo Skryjte chybovou zprávu zde!

Zapamatuj si mě

Zapomněli jste heslo?

Uživatelské jméno Chybová zpráva zde!

Chybová zpráva e-mailu zde!

Heslo Skryjte chybovou zprávu zde!

Souhlasím s podmínkami

Zapomněli jste heslo? Prosím zadejte svou e-mailovou adresu. Obdržíte odkaz pro vytvoření nového hesla.

Chybová zpráva e-mailu zde!

Zpět ke vchodu

zavřít

Styly CSS:

Základní šablonu a ovládací prvky formuláře vytvořil autor v oblíbeném plochém stylu (Flat), s jasným důrazem na minimalismus. Nic nadbytečného, středně průhledné tmavnoucí pozadí, dobře čitelné barvy, dobře zvolený font a ikony pro vstupní pole. Pomocí vlastností CSS můžete snadno upravit jakýkoli prvek formuláře.

.cd-user-modal ( poloha : pevná ; nahoře : 0 ; vlevo : 0 ; šířka : 100 % ; výška : 100 % ; pozadí : rgba (52 , 54 , 66 , 0,9 ) ; z-index : 3 ; přetečení; přetečení; 0; skrytá viditelnost: auto webkit-transition: neprůhlednost 0,3s 0 , viditelnost 0 0,3s ; -moz-transition: neprůhlednost 0,3s 0 , viditelnost 0 0,3s ; přechod : neprůhlednost 0,3s 0 , viditelnost 0 0,3s ; ) .cd-opacity-visible-kit: viditelnost - 1 .is web ition: neprůhlednost 0,3 s 0 , viditelnost 0 0 ; -moz-přechod: neprůhlednost 0,3 s 0 , viditelnost 0 0 ; přechod : neprůhlednost 0,3 s 0 , viditelnost 0 0 ; ) .cd-user-modal .k-visible .cd-:container-0 moz-transform:transform (translator -trans)form translateY(0) ; -ms-transform: translateY(0) ; -o-transform: translateY(0) ; transform : translateY(0) ; ) .cd-user-modal-container ( pozice : relativní ; šířka : 90 % ; max-šířka : 600px ; pozadí : #FFF ; margin : 3em auto 4em ; kurzor: auto; border-radius : 0,25em ; -webkit-transform: translateY(-30px ) ; -moz-transform: translateY(-30px ) ; -ms-transform: translateY(-30px ) ; -o-transform: translateY(-30px ) ; transform : translateY(-30px ) ; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; přechodová vlastnost : transformovat; -webkit-transition-duration: 0,3s ; -moz-transition-duration: 0,3s ; doba trvání přechodu: 0,3 s; .cd-user-modal-container .cd-switcher : after ( content : "" ; display : table ; clear : both ; ) .cd-user-modal-container .cd-switcher li ( šířka : 50 % ; plovoucí : vlevo ; text-align : radiusli a první okraj: 0.25 0 ; ) .cd-user-modal-container .cd-switcher 50px ; výška řádku : 50px ; pozadí : #d2d8d8 ; barva : #809191 ; ) .cd-user-modal-container .cd-switcher) kontejner cd-switcher a ( výška : 70px ; výška řádku : 70px ; ) ) .cd-form ( odsazení : 1. 4em; ) .cd-form .fieldset ( position : relativní ; margin : 1.4em 0 ; ) .cd-form .fieldset : first-child ( margin-top : 0 ; ) .cd-form .fieldset : last-child ( margin-bottom label : 0 ; ) .cd-formize 4px (font:0-formize .875rem ; ) .cd-form label.image-replace ( /* nahradit text ikonou */ display : inline-block ; position : absolute ; left : 15px ; top : 50 % ; bottom : auto ; -webkit-transform: translateY(-50 % ) ; translate (sY) moz-transform: Y translate(-Y) moz-transform: Y translate(-Y) moz-transform:Y translate ; -o-trans forma: translateY(-50% ) ; transform : translateY(-50% ) ; výška : 20px ; šířka : 20px ; přetečení : skryté ; odsazení textu : 100 % ; white-space : nowrap ; barva : průhledná ; stín textu : pozadí-0 ; repeat : pozadí-50) pozadí-0) /* Vstup ikon polí */ .cd-form label.cd-username ( background-image : url (../img/cd-icon-username.svg" ) ; ) .cd-form label.cd-email ( background-image : url (../img/cd-icon-email);s. ) .cd-form label.cd-password ( background-image : url ("../img/cd-icon-password.svg" ) ; ) .cd-form input ( margin : 0 ; padding : 0 ; border-radius : 0.25em ; ) .lc-%-width input.) .lc-%-width input. input.has-padding ( padding : 12px 20px 12px 50px ; ) .cd-form input.has-border ( border : 1px solid #d2d8d8 ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none) inputance ; -hascbor none-appear : focus ( border-color : #343642 ; box-shadow : 0 0 5px rgba (52 , 54 , 66 , 0.1 ) ; outline : none ; ) .cd-form input.has-error ( border : 1px solid #d76666 d76666 ; typ mezery pro vstup formuláře 6= /c* mezera-[: tlačítko pro vstup 6] . 5px ; ) .cd-form input[ type= submit] ( padding : 16px 0 ; kurzor : ukazatel ; pozadí : #2f889a ; barva : #FFF ; font-weight : bold ; border : none ; -webkit-vzhled: žádný ; -moz-vzhled: žádný ; -ms-vzhled: žádný ; -o-vzhled: žádný ; vzhled: žádný ; ) .no-touch .cd-form input[ type= submit] : hover , .no-touch .cd-form input[ type= submit] : focus ( background : #3599ae ; obrys : none ; ) .cd-form .hide-password ( display : inline-block ; position : 5 absolute: 0 right px ; border -left : 1px solid #d2d8d8 ; top : 50 % ; bottom : auto ; -webkit-transform: translateY(-50 % ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; Y) translate: % 0transform: % 0transform; 5 % přeložit; 5 % přeložit; font-size: 14px; font-size: 0. 875rem; barva : #343642 ; ) .cd-form .cd-error-message ( display : inline-block ; position : absolute ; left : -5px ; bottom : -35px ; background : rgba (215 , 102 , 102 , 0.9 ) ; padding : .8em: FF index: .8em: 2 FF color ; #. px ; font-size : 0,8125rem ; border-radius : 0,25 em ; /* zamezení kliknutí a dotyků */ pointer-events : none ; viditelnost : skryté ; neprůhlednost : 0 ; -webkit-transition: opacity 0,2s 0 , viditelnost 0.2 moz-0.2 viditelnost 0.2 moz-0. . 2s ; přechod : neprůhlednost 0,2 s 0 , viditelnost 0 0,2 s ; ) .cd-form .cd-error-message :: after ( /* roh chybové zprávy */ content : "" ; pozice : absolutní ; vlevo : 22px ; dole : 100 % - 8 pixelů ; šířka ; výška ; 8 px solid rgba(215 , 102 , 102 , 0,9 ); viditelnost : viditelný ; -webkit-transition: neprůhlednost 0,2s 0 , viditelnost 0 0 ; -moz-přechod: neprůhlednost 0,2s 0 , viditelnost 0 0 ; přechod : neprůhlednost 0,2s 0 , viditelnost 0 0 ; ) @media only screen and (min-width : 600px ) ( .cd-form ( padding : 2em ; ) .cd-form .fieldset ( margin : 2em 0 ; ) .cd-form .fieldset : first-child ( margin-top : 0 ;- )- .cd fieldset ) .c d-form input.has-padding ( padding : 16px 20px 16px 50px ; ) .cd-form input[ type= submit] ( padding : 16px 0 ; ) ) .cd-form-message ( padding : 1.4em 1.4em-size 5.0px; rem ; line-height : 1,4 ; text-align : center ; ) @media only screen and (min-width : 600px ) ( .cd-form-message ( padding : 2em 2em 0 ; ) ) .cd-form-bottom-message (position: 3; 0px left: left: text left: width: 0px); align : center ; font -size : 14px ; font-size : 0,875rem ; ) .cd-form-bottom-message a ( color : #FFF ; text-decoration : underline ; ) .cd-close-form ( /* pravé horní tlačítko X styl *;/ zobrazení : blok pozice: absolutní; šířka: 40px výška: 40px vpravo: 0 horní : -40px ; pozadí : url("../img/cd-icon-close.svg" ) střed střed bez opakování ; odsazení textu : 100 % ; white-space : nowrap ; přepad: skrytý ) @media only screen and (min-width : 1170px ) ( .cd-close-form ( display : none ; ) ) #cd-login , #cd-signup , #cd-reset-password ( display : none ; ) #cd-login .is-selected, is-selected, #cd-password signup, #cd-passed. displej: blok ;)

cd-user-modal ( pozice: pevná; nahoře: 0; vlevo: 0; šířka: 100 %; výška: 100 %; pozadí: rgba(52, 54, 66, 0,9); z-index: 3; přetečení-y: auto; kurzor: ukazatel; viditelnost: skrytá; neprůhlednost: 0; -přechodnost: 3 - webkit-0. .cd-user-modal.is-visible ( viditelnost: viditelný; neprůhlednost: 1; -webkit-transition: neprůhlednost 0,3s 0, viditelnost 0 0; -moz-přechod: neprůhlednost 0,3s 0, viditelnost 0 0; přechod: neprůhlednost 0,3s 0, viditelnost 0 0; )-userd-modalcd.-ustain. er ( -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); ) relativní; šířka: 90 %; max-width: 600px; pozadí: #FFF; margin: 3em auto-5em; -web-yradius border: -web-Yk.it. 30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; přechodová vlastnost: transformovat; -webkit-transition-duration: 0,3s; -moz-transition-duration: 0,3s; doba trvání přechodu: 0,3 s; ) .cd-user-modal-container .cd-switcher:after ( content: ""; display: table; clear: both; ) .cd-user-modal-container .cd-switcher li ( šířka: 50 %; plovoucí: vlevo; zarovnání textu: na střed; ) .cd-user-user-bordc-witcher-li: us: .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 (řádek: 00% pozadí; šířka: 5px; d2d8d 8; barva: #809191; ) .cd-user-modal-container .cd-switcher a.selected ( pozadí: #FFF; barva: #505260; ) @media only screen a (min-width: 600px) ( .cd-user-modal-contain:container) ( .cd-user-modal-contain:container) .cd-switcher a ( height: 70px; line-height: 70px; ) ) .cd-form ( padding: 1.4em; ) .cd-form .fieldset ( position: relativní; margin: 1.4em 0; ) .cd-form .fieldset:first-child.field cd margin-last-form; last-form tom: 0; ) .cd-form label(font-size: 14px; velikost písma: 0,875rem ) .cd-form label.image-replace ( /* nahrazení textu ikonou */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -ms-transform: translate-block; translate-5%) -Yotransform:Y translate-5 %) ; výška: 20px; šířka: 20px; přetečení: skryté; odsazení textu: 100 %; white-space: nowrap; barva: transparentní; stín textu: žádný; background-repeat: no-repeat; background-position: 50 % 0; ) /* Ikony vstupních polí */ .cd-form label.cd-iger:url /img/cd-icon-username ("../img/cd-icon-password.svg");) .cd-forM Input (margin: 0; padding: 0; border-radius: 0.25em;) .cd-phorm input.full-width (100%;2px) .cd-form input:.cd-px px;) .cd-phorm input.has-border (ohraničení: 1px solid #d2d8d8; -webkit-control: žádné; -moz-adultis: žádné; -MS-appendarance: Žádné; —Žádné; —Žádné; —Žádné; -Vzhled: žádný; vzhled: žádný;) .cd-2border-form input.has; hadow: 0 0 5PX RGBA (52, 54, 66, 0,1); Obrys: Žádný;) .cd-form Input.has-error (ohraničení: 1px solid #d76666;) .cd-phorm Input ( / * místo pro skrytí tlačítka * / packs -rsF2 Input;) 8916px Pozadí ;cd-0px Barva: #FFF; váha písma: tučné; ohraničení: žádné; -webkit-adult: -moz-vzhled: žádný; -MS-adult: ŽÁDNÝ; -O-vzhled: ŽÁDNÝ; vzhled: žádný; ) .no-touch .cd-form input:hover, .no-touch .cd-form input:focus (pozadí: #3599ae; obrys: žádný; ) .cd-form .hide-password ( display: inline-block; position: absolute; right: 0; top: 0; solid: 6d border-left: solid: 6d border-left;px ; dole: auto; .cd-form .cd-error-message ( display: in line-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #2size:1 us: 0,25 em; /* zamezení kliknutí a dotyků */ události ukazatele: žádné ; viditelnost: skryté; neprůhlednost: 0; -webkit-transition: neprůhlednost 0,2s 0, viditelnost 0 0,2s; -moz-přechod: neprůhlednost 0,2s 0, viditelnost 0 0,002s; viditelnost 0 0,02s; 2: přechody; viditelnost ) .cd-form .cd-error-message::after ( /* roh chybové zprávy */ content: ""; pozice: absolutní; vlevo: 22px; dole: 100%; výška: 0; šířka: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 80px, solid rg.9); d-form .cd-error-message.is-visible ( neprůhlednost: 1; viditelnost: viditelná; -webkit-transition: neprůhlednost 0,2 s 0, viditelnost 0 0; -moz-přechod: neprůhlednost 0. 2s 0, viditelnost 0 0; přechod: neprůhlednost 0,2s 0, viditelnost 0 0; ) @media only screen and (min-width: 600px) ( .cd-form ( padding: 2em; ) .cd-form .fieldset ( margin: 2em 0; ) .cd-form .fieldset:first-child (margin-top: 0; ) .cd-form-0 .dfield-botinset:cd.fieldset: -padding ( pad ding: 16px 20px 16px 50px; ) .cd-form input ( padding: 16px 0; ) ) .cd-form-message ( padding: 1.4em 1.4em 0; font-size: 14px; font-size 54 mm) pouze zarovnání textu: 0.8. a (min-width: 600px) ( .cd-form-message ( padding: 2em 2em 0; ) ) .cd-form-bottom-message ( position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size-font-size)bottom-px;c.0 zpráva a ( barva: #FFF; text -decoration: underline; ) .cd-close-form ( /* pravé horní tlačítko stylu X */ zobrazení: blok; pozice: absolutní; šířka: 40px; výška: 40px; vpravo: 0; nahoře: -40px; pozadí: url("../img/cd-icon-text-close.svg")%; white-space: nowrap; přepad: skrytý; ) @media only screen and (min-width: 1170px) ( .cd-close-form ( display: none; ) ) #cd-login, #cd-signup, #cd-reset-password ( display: none; ) #cd-login.is-selected, #cd-signup.is-selected-word: blockis-selected, #cd.

V efektu přechodu vzhledu bylo přidáno zpoždění, aby modální okno po zavření zmizelo.

Poznámka:. Velikost písma všech vstupních polí je standardně nastavena na 16 pixelů. Tím se zabrání automatickému škálování, ke kterému dochází při prohlížení na mobilních zařízeních.

Nachází se autorská, buržoazní verze pluginu. Na stejném místě si můžete stáhnout originál.
Můžete si vzít ruskou verzi z mého Yandex.Disk, všechny potřebné soubory jsou pečlivě zabaleny do jednoho archivu, předtím se nezapomeňte podívat na plně upravený živý příklad tohoto úžasného pluginu jQuery:

Se vší úctou, Andrew

Hezký den přátelé! Pojďme se podívat na registraci uživatelů v PHP. Nejprve si definujme podmínky registrace našich uživatelů:

Heslo je zašifrováno pomocí algoritmu MD5
Heslo bude "sůl"
Kontrola obsazenosti přihlášení
Aktivace uživatele dopisem.
Záznam a ukládání dat v MySQL DBMS

Abychom mohli napsat tento skript, musíme pochopit, co je registrace uživatele. Registrace uživatele je získávání skutečných uživatelských dat, zpracování a ukládání dat.

Zjednodušeně řečeno, registrace je jen záznam a uložení určitých údajů, kterými můžeme v našem případě uživatele autorizovat – tím je Login a Heslo.

Oprávnění - udělení oprávnění určité osobě nebo skupině osob k provádění určitých úkonů, jakož i proces ověřování těchto práv při pokusu o provedení těchto úkonů. Jednoduše řečeno, pomocí autorizace můžeme omezit přístup k určitému obsahu na našem webu.

Podívejme se na adresářovou strukturu skriptu, abychom implementovali naše přihlášení s autorizací. Potřebujeme rozdělit skripty na logické části. Registrační a autorizační moduly jsme umístili do samostatného adresáře. Do samostatných adresářů také umístíme připojení k databázi MySQL, soubor uživatelsky definovaných funkcí, šablonu stylů CSS a naši šablonu HTML. Tato struktura vám umožňuje rychle procházet skripty. Představte si, že máte velký web s hromadou modulů a tak dále. a pokud nebude řád, bude velmi těžké v takovém nepořádku něco najít.

Protože všechna data budeme ukládat do MySQL DBMS, vytvořte si malou tabulku, do které budeme registrační údaje ukládat.

Nejprve je potřeba vytvořit tabulku v databázi. Nazvěme tabulku bez_reg, kde bez je předpona tabulky a reg je název tabulky.

Struktura tabulky: bez_reg -- -- Struktura tabulky `bez_reg` -- VYTVOŘIT TABULKU, POKUD NEEXISTUJE `bez_reg` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` varchar(200) NOT NULL, `pass` varchar(32) NOT NULL, `2)` NOT aktivní, `2)` 3 varchar(3) NOT `status` int(1) NENÍ NULL, PRIMÁRNÍ KLÍČ (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; Nyní vytvoříme hlavní skripty pro další práci. SOUBOR INDEX.PHP

SOUBOR CONFIG.PHP

less/reg/?mode=auth">Přihlaste se