Jei jums reikia padaryti vieną iš savo svetainės skyrių prieinamą svetimam, bet nenurodytam osibų skaičiui, tai lengviau padaryti papildomai registruojant ir autorizuojant koristuvachus. Yra daug būdų leisti koristuvachams. Galite nulaužti žiniatinklio serverio įrankius ir programavimo įrankius. Pakalbėkime apie teigiamus balsus, jei PHP sesijos buvo patvirtintos.

Imovirno, norėtumėte rasti geresnį būdą sukurti tokią formą. Išskyrus tai, šis faktinis pasireiškimas vis dar yra mano planuose, tačiau galite manyti, kad apverstos nuorodos forma gali būti skatinama naudoti papildomus PHP objektinės orientacijos metodus.

Dėl burbuolės aptarsime visas detales, yakі zrobimo davė. Ko mums reikia? Mums reikia scenarijaus, pavyzdžiui, užregistruoti koristuvach, įgalioti koristuvach, nukreipti koristuvach kur po autorizacijos. Taigi turėsime sukurti šoninę juostą, nes ji bus apsaugota nuo neteisėtos koristuvachivinės prieigos. Norėdami užsiregistruoti ir suteikti leidimą, turėsime sukurti HTML formos. Informaciją apie koronerių registraciją renkame iš duomenų bazės. Tse reiškia, kad mums vis tiek reikia scenarijaus, kad galėtume prisijungti prie DBVS. Naudojame miconuvatimemo funkcijų darbą, kaip ir patys rašysime. Funkcijos Išsaugome ocremy failą.

Otzhe, mums reikia šių failų:

skambutis iš DBVS;
koristuvach funkcijos;
leidimas;
Registracija;
šonas pavogtas;
koristuvacho darbo užbaigimo scenarijus;
scenarijus, pakeičiantis koristuvach leidimo būseną;
stiliaus lapas, skirtas paprasčiausiam šonų dizainui.

Viskas bus kvaila, nes duomenų bazėje neturite atitinkamų lentelių. Paleiskite DBVS valdymo įrankį (PhpMyAdmin arba komandinė eilutė, yak zruchnіshe) i vykonayte naujame įžeidžiančiame klausime:

KURTI LENTELĘ "naudotojai" ("id" int(11) NOT NULL AUTO_INCREMENT, "prisijungimo" simbolis(16) NOT NULL, "slaptažodis" char(40) NOT NULL, "reg_date" laiko žyma NOT NULL NUMATYTOJI CURRENT_TIMESTAMP, ID )) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Mūsų failus pavadinsiu tokiais scenarijais (visos smarvės bus tame pačiame kataloge):

duomenų bazė.php
funkcijos.php
prisijungti.php
registracija.php;
index.php;
logout.php;
checkAuth.php;
stilius.css

Odos paskyrimas iš jų, dainuok, supranti. Pažiūrėkime scenarijų iš DBVS. Wee joga jau bachili. Tiesiog išsaugokite šio scenarijaus kodą duomenų bazėje.php faile. Funkcijas iššifruosime functions.php faile. Kaip viskas pracyuvatime? Neautorizuotas coristuvach bando prieiti prie šifruoto index.php dokumento, sistema tikrina coristuvach autorizacijas, neva koristuvach neautorizuotas, vynas nukreipiamas į autorizacijos pusę. Įgaliojimo pusėje galite pateikti įgaliojimo formą. Leiskite zrobimo її.

Koristuvachiv leidimas

Registruotis.

Dabar mūsų forma yra būtina įdėti į išvaizdą. Tuo pačiu metu reikšmingos kitų elementų taisyklės. Aš, šokinėdamas į priekį, įnešiu stilių lenteles per viršų.

/* style.css failas */ .row ( margin-bottom:10px; width:220px; ) .row label ( display:block; font-weight:bold; ) .row input.text ( šrifto dydis:1.2em; padding:2px 5px; ) .to_reg ( font-size:0.9em; ) .instruction ( šrifto dydis:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; ) .error ( spalva:raudona; paraštė-kairė: 3 pikseliai;

Kadangi viskas nustatyta teisingai, jūsų naršyklėje gali būti:

Akivaizdu, kad vis dar neturime registruotų koristuvachų, o norint gauti leidimą, būtina užsiregistruoti. Užpildykime registracijos formą.

Korespondentų registracija

Jūs, dainuojate, nukreipėte pagarbą tiems, kurie turi PHP pakeitimų HTML kode. Smarvė – vietoj formų teksto laukelių atributų, vietoje konteinerių – atleidimo ženklai. Alemy nepakeitė pakeitimų. Susmulkinkime.

Korespondentų registracija

Formos žymos veiksmo atribute parametras nenurodytas. Tokiu atveju, užvaldant šias formas, smarvė bus obroblyatsya pagal tą patį scenarijų, dėl kurio smarvė buvo ištaisyta. Taigi, turime parašyti kodą, kuris apdoros šias formas. Ale, pradėkime nuo їhnoyї apdorojimo algoritmo.

Turime užtikrinti, kad prisijungimo ir slaptažodžio laukai nebūtų tušti. Tada reikia patikrinti prisijungimo galiojimą, kol galėsime. Slaptažodis taip pat atsakingas už pakartotinį slaptažodžio įvedimą, o slaptažodžio pakartotinis įvedimas yra atsakingas už tai, be to, smarvė gali būti identiška. Lyg iš šitų minčių nemušami, šių formų apdorojimas kaltas, bet pririštas, masyve prisiminimas apie atleidimą gali būti įrašytas išpažintyje, o tai galima padaryti Koristuvačiovo atveju. Koristuvacho patogumui išsaugome jo prisijungimo įvedimą (taip pat ir prisijungimo vardą), užrašydami jo reikšmę į $laukų masyvą.

Viskas gerai, naršyklėje, grįžus į registracija.php dokumentą, matosi maždaug taip:

Dabar, tarkime, koristuvachas paspaudė registracijos mygtuką neužpildęs formos laukelių. Priklausomai nuo mūsų algoritmo, prisijungimo vardas ir slaptažodis negali būti tušti. Kadangi protas nėra pergalingas, registracija neįmanoma. Prisimename, kad šios formos apdorojamos pagal srautinio perdavimo scenarijų. Tai reiškia, kad turime pakeisti šį kodą, pridedant papildomų pataisų. Nedelsdami pakeisime ir patikrinkime. Įvedę prisijungimo vardą ir slaptažodį, turite patikrinti priskirtų kredencialų galiojimą. Norėdami iš naujo patvirtinti prisijungimo vardą ir slaptažodį, faile functions.php sukuriame coristuvacha funkciją.

/** * functions.php * Failas su koristuvach funkcijomis */ // Prijungti failą su DBMS ryšio parametrais request_once("database.php"); // Pakartotinis koristuvach funkcijos pavadinimo tikrinimas checkLogin($str) ( // Iš pradžių pakeiskite, jei galime prisiminti atleidimą $error = ""; // Tarsi prisijungimo eilutės nėra, galime pasukti apie atleidimą if(!$str) ( $error = " Neįvedėte pavadinimo "coristuvacha"; return $error; ) /** * Dar kartą patikrinsime, ar nėra papildomų reguliarių reiškinių ir naudosime simbolius "_", "- ", "." */ $pattern = "/^[- _.az\d](4,16)$/i"; $result = preg_match($pattern, $str) ; // Kadangi pakartotinis patvirtinimas nebuvo atliktas praeiti, atsigręžkime apie atleidimą if(!$result) ( $error = " Neteisingi simboliai koristuvach pavadinime arba koristuvach vardas per trumpas (ilgas)"; return $error; ) // Viskas gerai , paverskite reikšmę true return true; ) // Pakartotinai tikrinamas koristuvach funkcijos checkPassword($str) slaptažodis ( // Inicijuojimo keitimas, jei yra galimas atleidimo įspėjimas $error = ""; // Vis dar ta pati diena kaip ir prisijungimo eilutę, galime paversti atleidimo įspėjimą if(!$str) ( $error = "Neįvedėte slaptažodžio"; grįžti $error; ) /** * Patvirtinti slaptažodį koristuvach papildomiems įprastiems virusams * Slaptažodis yra kaltas, bet ne trumpas 6, ne iki 16 simbolių * Kai kuriais atvejais lotyniškos abėcėlės simboliai, skaičiai, * kitais atvejais gali būti simbolių "_", "!", " (", ") " */ $pattern = "/^[_!)(.az\d](6,16)$/i"; $rezultatas = preg_match($modelis, $str); // Darant prielaidą, kad patvirtinimas nepavyko, grįžkime prie atleidimo if(!$result) ( $error = "Nepriimtini simboliai slaptažodžio slaptažodyje arba slaptažodis per trumpas (ilgas)"; return $error; ) / / Viskas gerai, paversk tiesa grįžti tiesa; )

Dabar reikia redaguoti registracija.php failą, kad įjungtumėte funkcijas, apie kurias paskelbėme. Prieš scenarijų pridėsiu savo mintis, tarsi iškreipčiau registracijos mygtuko puolimą. Viduryje proto pradedamas pakartotinis prisijungimo vardo ir slaptažodžių tikrinimas. Žvelgiant atgal, tarsi pakartotinis patikrinimas pasibaigtų nesėkme, atnaujiname formą ir rodome priminimą apie atleidimą. Atsiprašymo nebėra, bet registruojamės, registracijos formos nebematome, primename apie sėkmingą registraciją, o papildomai antraštės() funkcijai nukreipiama į įgaliojimo formą.

Sėkmingai užsiregistravote sistemoje. Iš karto būsite nukreipti į leidimo pusę. Lyg nieko nebūtų nutikę, eikite pas ją tiesioginio prašymo.

"; header("Refresh: 5; URL = login.php"); ) // Pakalbėkime apie atleidimą kitur ( $errors["full_error"] = $reg; ) ) )> ?> Korespondentų registracija

Scenarijuje paminėjome vieną naują funkciją registracija() . Ir dar nesame apstulbę. Susmulkinkime.

// Registravimo žurnalo funkcijos registracija ($login, $slaptažodis) ( // Inicijuoti galimų atleidimo įspėjimų pakeitimą $error = ""; // Nėra prisijungimo eilutės, pasukite malonės įspėjimą if(!$ login) ( $ error = "Prisijungimas nenurodytas"; // Parašykite užklausos eilutę $sql = "SELECT `id` FROM `users` WHERE `login`="" . $login . """; // Robimo užklausa į duomenų bazę $query = mysql_query ($sql) arba die( ""); // Mes žiūrime į eilučių skaičių su tokiu prisijungimu, jei yra tik viena, // galime kreiptis dėl atleidimo if(mysql_num_rows( $query) > 0) ( $error = " prisijungimas jau registruotas"; grąžinti $ klaidą; ) // Kadangi tokio koristuvach nėra, galima jį užregistruoti // Parašykite eilutę $sql = "INSERT INTO `vartotojai ` (`id`,`login`,`slaptažodis`) VERTĖS (NULL, "" . $login ." ","". $slaptažodis. "")"; // Robimo klausia bazinės $query = mysql_query( $sql) arba mirti ("

Nepavyko pridėti coristuvach: " . mysql_error() . ". Atsiprašau, stovėjo eilėje ". __LINE__."

"); // Nepamirškite prisijungti prie DBVS mysql_close(); // Pasukite reikšmę true, kad praneštumėte apie sėkmingą serverio registraciją, grąžinkite true; )

Jei viskas gerai, jūsų koristuvach bus užregistruotas. Galite išbandyti formą. Pabandykite užregistruoti korystuvakus su tais pačiais prisijungimais. Po sėkmingos registracijos būsite nukreipti į įgaliojimo formą. Anksčiau kūrėme maketą, skirtą formos patobulinimui. Jei veiksmo atribute nenurodytas reikalingas parametras, formos siunčiami duomenys bus apdorojami pagal šį scenarijų. Taigi, turime parašyti kodą apdorojimui ir pridėti jį prie login.php dokumento.

Koristuvachiv leidimas

;">

Jei nesate užsiregistravę sistemoje, prašome užsiregistruoti.

Jūs, ko gero, minėjote, kad autorizacijos scenarijus turi dar vieną nežinomą funkciją – autorizaciją (). Ši funkcija yra atsakinga už koristuvach autorizavimą, prieš tai patikrinusi, kas yra koristuvach registracijos duomenų bazėje su tokiu prisijungimo vardu ir slaptažodžiu. Jei toks blogiukas nebus rastas, autorizacija bus nutraukta, ekrane bus rodomas pranešimas apie gedimą. Po sėkmingo pakartotinio patikrinimo funkcija autorizacijos() pradeda seansą ir įrašo joje koristuvach prisijungimo vardo ir slaptažodžio reikšmę, primena scenarijų apie autorizavimo sėkmę, o scenarijus nukreipia koristuvach į apsaugotą pusę. išteklius.

/** * Corystuvach autorizacijos funkcija. * Įgaliojimas koristuvachiv mes būsime zdіysnyuvatisya * už pagalbą PHP sesijoje. */ funkcijos autorizacija($login, $slaptažodis) ( // Inicijuoti pakeitimą su galimais įspėjimais apie malonę $error = ""; // Vis dar nėra prisijungimo eilutės, pasukite atleidimo įspėjimą if(!$login) ( $error = " Prisijungimas nenurodytas"; return $klaida; ) elseif(!$slaptažodis) ( $error = "Slaptažodis nenurodytas"; return $error; ) // Patikrinkite, ar dar nėra prisijungimo // Prisijungiama prie DBMS connect(); / / Turime persvarstyti, koks yra toks trumpas registracijų sąrašas? slaptažodis """; // Galime paklausti $query = mysql_query($sql) arba die("

Viconati neįmanoma paklausti: ". mysql_error().". Atsiprašau, stovėjo eilėje ". __LINE__."

"); // Su tokiais tributais patikrinti nėra galimybės, grįžkime atgal apie atleidimą if(mysql_num_rows($query) == 0) ( $error = "Patikra, nes nepriskirta registracija"; return $error; ) // Tiesiog patikrinkite, ar nėra atleidimo , paleiskite sesiją session_start(); // Įrašau koristuvach prisijungimo vardą ir slaptažodį // Kam galime laimėti superglobalinį masyvą $_SESSION $_SESSION["prisijungti"] = $login; $_SESSION["slaptažodis"] = $slaptažodis; / Nepamirškite uždaryti seanso su duomenų baze mysql_close(); // Pasukite true, kad praneštumėte apie sėkmingą serverio autorizaciją, grąžinkite true;

Jei koristuvach įstrigo pavogtame puslapyje, pakeiskite duomenų apie savo įgaliojimą teisingumą. Kam mums reikia dar vienos koristuvach funkcijos. Pavadinkime tai checkAuth(). Mes patikrinsime šiuos įgaliojimus tiems, kurie yra išsaugoti mūsų duomenų bazėje. Jei duomenys nepasirodo, koristuvach bus nukreiptas į autorizacijos pusę.

Funkcija checkAuth($login, $password) ( // Kadangi nėra prisijungimo vardo ar slaptažodžio, jį galima paversti false if(!$login || !$slaptažodis) return false; // Tikriname tokio sutrumpinimo registracijas // Prisijungiama prie DBVS connect(); // Pridedama eilutė $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$slaptažodis."" "; // Galime paklausti $ query = mysql_query($sql) arba die("

Viconati neįmanoma paklausti: ". mysql_error().". Atsiprašau, stovėjo eilėje ". __LINE__."

"); // Jei nėra galimybės uždaryti duomenų tokiais duomenimis, jis gali būti pakeistas false; if(mysql_num_rows($query) == 0) ( return false; ) // Nepamirškite uždaryti duomenų naudojant duomenų bazė mysql_close(); // Priešingu atveju ji gali būti paversta true return true; )

Dabar, jei koristuvach nuėjo į pavogtą pusę, mes kalti dėl šių įgaliojimų pakartotinio tikrinimo funkcijos. Wiki scenarijų ir pakartotinį patvirtinimą įdėsime į checkAuth.php failą ir įtrauksime į kitą pusę, nes jis bus uždarytas viešai prieigai.

/** * Scenarijus, skirtas pakartotiniam root paskyros autorizavimo patikrinimui */ // Pradedame sesiją, kuriai paimsime įgalioto korespondento session_start() prisijungimo vardą ir slaptažodį //; // Įtraukite failą su koristuvach funkcijomis require_once("functions.php"); /** * Norėdami nustatyti, kurie įgaliojimai yra teisingi, turime * patikrinti, kurie duomenų bazės įrašai yra jūsų prisijungimo vardas * ir slaptažodis. Siekdami pagreitinti korespondento funkciją * patikrinkite įgalioto korespondento duomenų teisingumą. * Jei ši funkcija įjungta į klaidingą, leidimo nėra. * Kad būtų patvirtintas įgaliojimas, mes tiesiog nukreipiame koristuvach į autorizacijos pusę. */ // Kol sesijoje yra duomenų apie prisijungimą ir slaptažodį, // patikrinkite juos if(isset($_SESSION["login"]) && $_SESSION["login"] && isset($ _SESSION["slaptažodis" ]) && $_SESSION["slaptažodis"]) ( // Dėl to nepavyksta patikrinti esminių duomenų if(!checkAuth($_SESSION["prisijungimas"], $_SESSION["slaptažodis"]) ) ( // Prisijungimo peradresavimas į prisijungimo puslapio antraštę("vieta: login.php"); // Išėjimo scenarijaus priskyrimas scenarijui; ) ) // Jei yra kokių nors detalių apie prisijungimą, kitu atveju informacijos nėra apie slaptažodį, // Atkreipkite dėmesį, kad autorizacijos nėra, jis nukreipiamas į autorizacijos pusę // į autorizacijos pusę else ( header("location: login.php"); // Priskirta scenarijaus išėjimui;

O dabar sukurkime mūsų pavogtos pusės kodą. Vynas bus atleistas.

Korespondentų įgaliojimai ir registracija

Sėkmingas autorizavimas.

Jūs neleidote patekti į pavogtą pusę. Galite atsijungti nuo sistemos.

Kaip žinote, užšifruotas dokumentas turi tik vieną failą – checkAuth.php. Kiti failai jau įtraukti į kitus scenarijus. Todėl mūsų kodas neatrodo didelis. Organizavome korespondentų registraciją ir įgaliojimus. Dabar reikia leisti koristuvachai išeiti iš sistemos. Kam sukuriame scenarijų logout.php faile.

/** * Scenarijus, skirtas išeiti iš koristuvach iš sistemos. Pagrindinių sąskaitų turėtojai yra įgalioti per seansus, jų prisijungimo vardas ir slaptažodis saugomi $_SESSION superglobaliame masyve. Norėdami * atsijungti nuo sistemos, tiesiog pridėkite reikšmę * prie $_SESSION["login"] ir $_SESSION["slaptažodis"] masyvo, po kurio būsime nukreipti atgal į prisijungimo puslapį */ // Pradedame seansą session_start(); unset($_SESSION["prisijungti"]); unset($_SESSION["slaptažodis"]); header("vieta: login.php");

Dokumentų registravimo, autorizacijos ir pakartotinio tikrinimo scenarijus paruoštas. Jogą galite pasukti pas save, papildyti, keisti pagal savo poreikius. Jei turite patiekalų, galite juos įdėti į komentarus. Galite užfiksuoti visus čia paminėtus failus, supakuotus į vieną archyvą.

P.S. Žinau, kad geriau rašyti objektinį kodą, žinau, kad iš tikrinamo asmens slaptažodžio perkelti ir išsaugoti nebūtina, kad informacija, kuri įvedama į duomenų bazę, turi būti iš anksto apversta. Aš žinau. Aš čia ne apie tai.

Reaguoja su formų funkcijomis į įėjimą ir registraciją, su dinaminio perjungimo galimybe, nekeičiant pusės. Atsiradus naujai paskyrai galite lengvai persijungti iš vienos į kitą ir, jei reikia, pasirinkti slaptažodžio keitimo parinktį.
Šiandien matome, kaip viską galima įgyvendinti norint papildomai susieti nedidelį, bet net funkcionalų jQuery įskiepį ir naujus CSS3 standartus.

Šis metodas bus teisingas, jei norite dirbti taip, kad įėjimo ir registracijos forma būtų prieinama korespondentams jūsų svetainės odos pusėje. Įėjus į svetainę, ar užsiregistravus korespondentu, nebūsite nukreipti į kitą pusę, o visus reikalingus dalykus matysite „neatvykus“, viskas vienoje pusėje.

Šiuolaikiškai atrodančių formų, kurias galima sujungti CSS3 pagalba, dizainas, pagrindinė įskiepio idėja nėra puiki, modalinio vaizdo išvaizda ir pojūtis praktiškai be žagsėjimo.
Stovidsotkovo adaptyvus išdėstymas, modalinio lango aukštis ir plotis su formomis, automatiškai nustatomas pagal išplėtimo ekranų dydį.

Užpakalis nustebo, dabar pažvelkime į visų pagrindinių modalinio lango komponentų ir formų detales, kad sužinotume, kaip juos įveikti savo svetainėje.
Lango sujungimas su įvedimo ir registracijos formomis, įkvėptas populiarios JavaScript bibliotekos, jQuey papildinio ir sugeneruotų CSS stilių. Visi šie įrankiai turi būti prijungti prie jūsų svetainės. Likusią dabartinę jQuey bibliotekos versiją galima prijungti tiesiai iš Google, archyve rasite patį main.js įskiepio failą ir paruoštą style.css stilių rinkinį.
„Javascript“ rašomas prieš uždaromą žymą, CSS stilius galima nukopijuoti ir pridėti prie svetainės stylesheet.css failo.

HTML struktūra:

Modalinių vikonų bazinis konteineris tamsintame fone ir įmontuota forma su valdymo elementais dedamas šono pavadinime. Siekiant didesnio supratimo, padalinus sektorius ir pridėjus komentarus. Visi dizaino elementai, kurie yra susieti su CSS per klasių pavadinimus, kad galėtumėte be ypatingų sunkumų pakeisti formų dizainą, kad jis atitiktų jūsų svetainių dizainą.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Įeikite < li>< a href= "#0" >Registracija < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >El. paštas < input class = id= "signin-email" type= "email" placeholder= "El. paštas" > < span class = "cd-error-message" >Štai priminimas apie atleidimą! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Slaptažodis < input class = „viso pločio turi-padding turi-ribą“ id= "prisijungimo slaptažodis" type= "text" placeholder= "(!LANG:(!LANG:Slaptažodis" > !}!}< a href= "#0" class = "hide-password" >prihovati < span class = "cd-error-message" >Štai priminimas apie atleidimą! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Prisimink mane < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Palikti" > < p class = "cd-form-bottom-message" >< a href= "#0" >Pamiršai slaptažodį? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Esu Koristuvacha < input class = „viso pločio turi-padding turi-ribą“ id="registravimo-naudotojo vardas" type="text" placeholder= „Im'ya Koristuvacha“> < span class = "cd-error-message" >Štai priminimas apie atleidimą! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >El. paštas < input class = „viso pločio turi-padding turi-ribą“ id= "registracijos el. paštas" type= "el. paštas" placeholder= "(!LANG:(!LANG:El." > !}!}< span class = "cd-error-message" >Štai priminimas apie atleidimą! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Slaptažodis < input class = „viso pločio turi-padding turi-ribą“ id= "registravimo slaptažodis" type= "text" placeholder= "(!LANG:(!LANG:Slaptažodis" > !}!}< a href= "#0" class = "hide-password" >prihovati < span class = "cd-error-message" >Štai priminimas apie atleidimą! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >Aš tinkamas< a href= "#0" >protus < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Sukurti paskyrą"> < div id= "cd-reset-password" > < p class = "cd-form-message" >Pamiršai slaptažodį? Būkite malonūs, įveskite el. pašto adresą. Turite atšaukti prašymą sukurti naują slaptažodį. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >El. paštas < input class = „viso pločio turi-padding turi-ribą“ id= "reset-email" type= "email" placeholder= "(!LANG:(!LANG:El." > !}!}< span class = "cd-error-message" >Štai priminimas apie atleidimą! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Atstatyti slaptažodį"> < p class = "cd-form-bottom-message" >< a href= "#0" >Pasukite į įėjimą < a href= "#0" class = "cd-close-form" >Uždaryti

CSS stiliai:

Pagrindinis šio formos valdymo elemento šablonas yra populiaraus plokščio stiliaus (Flat) autorius, aiškiai akcentuojant minimalizmą. Nieko zayvogo, pasaulio matymas aptemęs, šviesus spalvinimui, geras šrifto ir piktogramų pasirinkimas, įvado laistymo identifikavimui. Naudodamiesi CSS galia, galite lengvai pakeisti bet kurį formos elementą.

.cd-user-modal ( padėtis : fiksuota ; viršuje : 0 ; kairėje : 0 ; plotis : 100 % ; aukštis : 100 % ; fonas : rgba (52 , 54 , 66 , 0,9 ) ; z indeksas : 3 ; y : automatinis ; žymeklis : rodyklė ; matomumas : paslėptas ; neskaidrumas : 0 ; s 0 , matomumas 0 0,3 s ; ) 0 , matomumas 0 0 ; -moz - perėjimas : neskaidrumas 0,3 s 0 , matomumas 0 0 ; perėjimas , neskaidrumas 0,3 s matomumas 0 0 ;) .cd-user-modal . transformuoti: translateY(0) ; -ms-transformuoti: translateY(0) ; -o-transformuoti: translateY(0 ) ; transformuoti : translateY(0 ) ; 90 %; dth: 600 taškų; fonas: #FFF; paraštė: 3em auto 4em; žymeklis: automatinis; kraštinės spindulys: 0,25 em -Webkit-transform: translateY(-30px ); -moz-transform: translateY(-30px ); -ms-transformuoti: translateY(-30px ); -o-transformuoti: translateY(-30px ); transformuoti : translateY(-30px ); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; pereinamoji savybė : transformuoti; -Webkit-transition-duration: 0,3s; -moz-transition-truation: 0,3s; perėjimo trukmė: 0,3 s; ) .cd-user-modal-container .cd-switcher : after ( turinys : "" ; ekranas : lentelė ; aiškus : abu ; ) .cd-user-modal-container .cd-switcher li ( plotis : 50 % ; float : kairėje ; teksto lygiavimas : centre ; ) .cd-user-modal-container .cd-switcher li: pirmasis vaikas a (border-spindulys: .25em 0 0 0 ; ) -switcher li: paskutinis vaikas a ( kraštinė -spindulys : 0 .25em 0 0 ; ) .cd-user-modal-container .cd-switcher a ( ekranas : blokas ; plotis : 100 % ; aukštis : 50 pikselių ; linijos aukštis : 50 pikselių ; fonas : #d2d8d8 ; spalva #809191 ; ) .cd-user-modal-container .cd-switcher a.selected ( fonas : #FFF ; spalva : #505260 ; ): 600px ) ( .cd-user-modal-container ( margin : 4em auto ; ) .cd-user-modal-container .cd-switcher a ( aukštis : 70 pikselių ; linijos aukštis : 70 pikselių ; ) ) .cd-form ( užpildymas: 1. 4 em; ) .cd-form .fieldset ( padėtis : santykinis ; paraštė - dydis: 14px; šrifto dydis: 0,875r em; ) .cd-form label.image-replace( /* pakeisti tekstą piktograma */ ekranas: eilutinis blokas padėtis: absoliuti; kairėje: 15px; viršuje: 50%; dugnas: automatinis; -Webkit-transform: translateY(-50%); -moz-transformuoti: translateY(-50% ); -ms-transformuoti: translateY(-50%); -o-transformuoti: išverstiY(-50%); transformuoti : translateY(-50% ); aukštis: 20px; plotis: 20px perpildymas: paslėptas; teksto įtrauka: 100% ; balta vieta: nowrap; spalva: skaidrus; teksto šešėlis: nė vienas; fono kartojimas: nekartoti; fono padėtis: 50% 0 ; } /* Įvesties lauko piktogramos */ .cd forma etiketė .cd-vartotojo vardas { fono paveikslėlis: url("../img/cd-icon-username.svg") ; } .cd forma etiketė .cd el { fono paveikslėlis: url("../img/cd-icon-email.svg") ; } .cd forma etiketė .cd slaptažodis { fono paveikslėlis: url("../img/cd-icon-password.svg") ; } .cd formaįvestis { marža: 0 ; kamšalas: 0 ; pasienio spindulys: 0,25 em; } .cd formaįvestis .visas plotis { plotis: 100% ; } .cd formaįvestis .turi kamšalą { kamšalas: 12 piks 20 piks 12 piks 50 piks; } .cd formaįvestis .turi sieną { siena: 1px kietas #d2d8d8; -Webkit-išvaizda : nė vienas; -moz-išvaizda : nė vienas; -ms-išvaizda : nė vienas; -o-išvaizda : nė vienas; išvaizda : nė vienas; } .cd formaįvestis .turi sieną: sutelkti dėmesį { kraštinės spalva: #343642 ; dėžutės šešėlis: 0 0 5 piks rgba(52 , 54 , 66 , 0.1 ) ; kontūras: nė vienas; } .cd formaįvestis .yra klaida { siena: 1px kietas #d76666; } .cd formaįvestis [ tipo = Slaptažodis ] { /* vieta slėpimo mygtukui */ pamušalas dešinėje: 65 piks; } .cd formaįvestis [ tipo = Pateikti ] { kamšalas: 16 pikselių 0 ; žymeklį: rodyklė; fone: #2f889a; spalva: #FFF; šrifto svoris: drąsus; siena: nė vienas; -Webkit-išvaizda : nė vienas; -moz-išvaizda : nė vienas; -ms-išvaizda : nė vienas; -o-išvaizda : nė vienas; išvaizda : nė vienas; } .neliesti .cd formaįvestis [ tipo = Pateikti ] : užveskite pelės žymeklį, .neliesti .cd formaįvestis [ tipo = Pateikti ] : sutelkti dėmesį { fone: #3599ae; kontūras: nė vienas; } .cd forma .slėpti slaptažodį { ekranas: eilutinis blokas; padėtis: absoliutus; teisingai: 0 ; viršuje: 0 ; kamšalas: 6 piks 15 piks; siena-kairė: 1px kietas #d2d8d8; viršuje: 50% ; apačioje: automatinis; -Webkit-transform : išverstiY (-50% ) ; -moz-transformuoti : išverstiY (-50% ) ; -ms-transformuoti : išverstiY (-50% ) ; -o-transformuoti : išverstiY (-50% ) ; transformuoti: išverstiY (-50% ) ; šrifto dydis: 14 pikselių; šrifto dydis: 0,875 rem; spalva: #343642 ; } .cd forma .cd-error-message { ekranas: eilutinis blokas; padėtis: absoliutus; paliko: -5 pikseliai; apačioje: -35 pikseliai; fone: rgba(215 , 102 , 102 , 0.9 ) ; kamšalas: .8em; z indeksas: 2 ; spalva: #FFF; šrifto dydis: 13 piks; šrifto dydis: 0,8125 rem; pasienio spindulys: 0,25 em; /* Atsisakyti paspaudimų ir taškų */ rodyklės įvykiai: nė vienas; matomumas: paslėptas; neskaidrumas: 0 ; -Webkit-transition : neskaidrumas 0,2 s 0 , matomumas 0 0,2 s; -moz-perėjimas : neskaidrumas 0,2 s 0 , matomumas 0 0,2 s; perėjimas: neskaidrumas 0,2 s 0 , matomumas 0 0,2 s; } .cd forma .cd-error-message:: po to { /* maža pastaba apie atleidimą */ turinys: "" ; padėtis: absoliutus; paliko: 22px; apačioje: 100% ; aukščio: 0 ; plotis: 0 ; siena-kairė: 8px kietas skaidrus; siena-dešinė: 8px kietas skaidrus; kraštinė-apačia: 8px kietas rgba(215 , 102 , 102 , 0.9 ) ; } .cd forma .cd-error-message.matomas { neskaidrumas: 1 ; matomumas: matomas; -Webkit-transition : neskaidrumas 0,2 s 0 , matomumas 0 0 ; -moz-perėjimas : neskaidrumas 0,2 s 0 , matomumas 0 0 ; perėjimas: neskaidrumas 0,2 s 0 , matomumas 0 0 ; } @media tik ekranas ir (min pločio: 600 taškų) { .cd forma { kamšalas: 2em; } .cd forma .fieldset { marža: 2em 0 ; } .cd forma .fieldset: pirmas vaikas { paraštė-viršus: 0 ; } .cd forma .fieldset: Paskutinis vaikas { paraštė-apačia: 0 ; } .cd formaįvestis .turi kamšalą { kamšalas: 16 pikselių 20 piks 16 pikselių 50 piks; } .cd formaįvestis [ tipo = Pateikti ] { kamšalas: 16 pikselių 0 ; } } .cd-form-message { kamšalas: 1,4 em 1,4 em 0 ; šrifto dydis: 14 pikselių; šrifto dydis: 0,875 rem; linijos aukštis: 1.4 ; teksto lygiavimas: centras; } @media tik ekranas ir (min pločio: 600 taškų) { .cd-form-message { kamšalas: 2em 2em 0 ; } } .cd-form-bottom-message { padėtis: absoliutus; plotis: 100% ; paliko: 0 ; apačioje: -30 taškų; teksto lygiavimas: centras; šrifto dydis: 14 pikselių; šrifto dydis: 0,875 rem; } .cd-form-bottom-message a { spalva: #FFF; tekstas-dekoravimas: pabraukti; } .cd-close-form { /* stiliaus X mygtukas viršuje dešinėje */ ekranas: blokas; padėtis: absoliutus; plotis: 40 piks; aukščio: 40 piks; teisingai: 0 ; viršuje: -40 taškų; fone: url("../img/cd-icon-close.svg") nekartoti centras centras; teksto įtrauka: 100% ; balta vieta: nowrap; perpildymas: paslėptas; } @media tik ekranas ir (min pločio: 1170 taškų) { .cd-close-form { ekranas: nė vienas; } } #cd prisijungimas, #cd registracija, #cd-reset-password { ekranas: nė vienas; } #cd prisijungimas.yra-pasirinktas, #cd registracija.yra-pasirinktas, #cd-reset-password.yra-pasirinktas { ekranas: blokas; }

cd-user-modal ( padėtis: fiksuota; viršuje: 0; kairėje: 0; plotis: 100%; aukštis: 100%; fonas: rgba(52, 54, 66, 0.9); z indeksas: 3; perpildymas-y : automatinis, žymeklis: rodyklė, matomumas: paslėptas, neskaidrumas: 0; 0, matomumas 0 0,3 s; ) 0, matomumas 0 0; -moz-perėjimas: neskaidrumas 0,3 s 0, matomumas 0 0; perėjimas: neskaidrumas 0,3 s 0, matomumas 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); transformate: translateY(0); ) cd -user-modal-container ( padėtis: santykinė; %;maksimalus plotis: 600 pikselių;fonas: #FFF; marga: 3em automatinis 4em;žymeklis:automatinis;border-radius:0.25em;-webkit-transform: translateY(-30px ); translateY (-30px); -ms-transform: translateY(-30px); -o-transform: translateY(- 30 pikselių); transformuoti: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property y: -moz-transformuoti; pereinamoji savybė: transformuoti; -Webkit-transition-duration: 0,3s; -moz-transition-truation: 0,3s; perėjimo trukmė: 0,3 s; ) .cd-user-modal-container .cd-switcher:after ( turinys: ""; ekranas: lentelė; aiškus: abu; ) .cd-user-modal-container .cd-switcher li ( plotis: 50 %; float : kairėje; teksto lygiavimas: centre; .-switcher li:last-child a ( kraštinės spindulys: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( ekranas: blokas; plotis: 100 %; aukštis: 50 pikselių; linijos aukštis: 50 pikselių; fonas: #d2d8d8; spalva: #809191; ) ): 600 pikselių) (.cd-user-modal-container ( paraštė: 4em auto; ) .cd-user-modal -container .cd-switcher a (aukštis: 70px; line-height: 70px; ) ) .cd-form (padding: 1.4em; ) .cd-form .fieldset ( padėtis: santykinis; paraštė: 1,4em 0; ). cd forma .fieldset:first-child ( paraštės viršus: 0; ) .cd forma .fieldset: paskutinis vaikas ( paraštės apačioje: 0; ) .cd formos etiketė ( šrifto dydis: 14 pikselių; šrifto dydis : 0.875rem; ) .cd formos etiketė. image-replace ( /* pakeisti tekstą piktograma */ ekranas: eilutinis blokas; padėtis: absoliuti; kairėje: 15 pikselių; viršuje: 50%; apačioje : automatinis; -webkit-transform: translateY (-50%); -moz-transform: translateY (-50%); -ms-transformuoti: translateY(-50%); : 20 piks., plotis: 20 piks., perpildymas: paslėptas, teksto įtrauka: 100 %; tarpas: be įvyniojimo; spalva: skaidri teksto šešėlis: nėra fono kartojimas: nekartoti; ) /* Įvesties lauko piktogramos */ .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.svg"); ) .cd -form label.cd-password (fono vaizdas: url("../img/cd-icon-password.svg"); ) .cd formos įvestis ( paraštė: 0; užpildymas: 0; kraštinės spindulys: 0,25 em;) .cd-form input.full-width (width: 100%; ) .cd-form input.has-padding ( padding: 12px 20px 12px 50px; ) solid #d2d8d8; -webkit-appearance: none; -moz -išvaizda: nėra; -ms-appearance: nėra; -o-appearance: nėra; išvaizda: nėra; ) -spalva: #343642; dėžutės šešėlis: 0 0 5px rgba(52, 54, 66, 0.1); kontūras: nėra; .form input ( /* vieta mygtukui Pridėti */ užpildymas dešinėje: 65 pikseliai; ) .cd formos įvestis ( užpildymas: 16 pikselių 0; žymeklis: žymeklis; fonas: #2f889a; spalva: #FFF; šriftas- svoris: paryškintas; kraštinė: nėra;-webkit-appearance: nėra;-moz-appearance: nėra;-ms-appearance: nėra; -o-appearance: nėra; išvaizda: nėra; ) .no-touch .cd formos įvestis : užvedimas, .no-touch .cd-form input:focus (fonas: #3599ae; kontūras: nėra; ) .cd-form .hide-pass žodis ( ekranas: inline-block; padėtis: absoliuti, dešinė: 0; viršuje: 0; pamušalas: 6px 15px; kraštinė kairėje: 1 piks. vientisas #d2d8d8; viršuje: 50%; transformuoti: translateY(-50%); -ms-transformuoti: translateY(-50%); -o-transformuoti: išverstiY(-50%); transformuoti: translateY(-50%); dydis: 0.875rem; spalva: #343642; ) .cd-form .cd-error-message ( ekranas: inline-block; 102, 0.9), užpildymas: .8em; z indeksas: 2; spalva: #FFF; šrifto dydis: 13 pikselių; šrifto dydis: 0,8125 rem kraštinės spindulys: 0,25 em -įvykiai: nėra; matomumas: paslėptas; neskaidrumas: 0 -Webkit-transition: neskaidrumas 0,2s 0, matomumas 0 0,2s; matomumas 0 0,2s; ) .cd-form .cd-error-message::after ( /* maža pastaba apie atleidimą */ turinys: ""; padėtis: absoliuti; kairėje: 22 piks.; apačioje: 100 %; aukštis: 0; plotis: 0; kraštinė -kairė: 8 piks. vientisas skaidrus; kraštinė - dešinė: 8 piks. skaidrus; 1; matomumas: matomas; - žiniatinklio rinkinys - perėjimas: neskaidrumas 0,2 s 0, matomumas 0 0; - moz - perėjimas: neskaidrumas 0,2 s 0, matomumas 0 0; perėjimas : neskaidrumas 0,2 s 0, matomumas 0 0; ) @medijos tik ekranas ir (min. plotis: 600 pikselių) ( .cd-form ( padding: 2em; ) .cd-form .fieldset ( paraštė: 2em 0; ) .cd - forma .fieldset:first-child ( paraštės viršus: 0; ) .cd-form .fieldset:paskutinis vaikas ( paraštė-apačia: 0; ). 0; ) ) .cd-form-message ( užpildymas: 1.4em 1.4 em 0; šrifto dydis: 14 pikselių; šrifto dydis: 0,875 atm; eilutės aukštis: 1,4; teksto lygiavimas: centre; ) (min. plotis: 600 pikselių) ( .cd-form-message ( užpildymas: 2em 2em 0 ; ) ) .cd-form-bottom-message ( padėtis: absoliuti; plotis: 100 %; kairėje: 0; apačioje: -30 pikselių; teksto lygiavimas: centre; šrifto dydis: 14 pikselių; šrifto dydis: 0. 875rem; ) .cd-form-bottom-message a (spalva: #FFF; tekstas-dekoravimas: pabraukimas; ) * mygtukas X stiliaus dešiniarankis */ ekranas: blokas; padėtis: absoliuti; plotis: 40px aukštis: 40px; dešinėje: 0; viršuje: -40px; ") nesikartojantis centras; teksto įtrauka: 100 %; tarpas: be įvyniojimo; perpildymas: paslėptas; ) tik @medijos ekranas ir (min. plotis: 1170 pikselių) ( .cd-close-form ( ekranas: nėra; ) ) #cd-login, #cd-signup, #cd-reset-password (rodymas: nėra; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is -pasirinkta ( ekranas: blokuoti; )

Perėjimo metu buvo pridėtas išblukimas, kad būtų užtikrintas sklandus modalinio lango perėjimas uždarius.

Pastaba. Visų laukų šrifto dydis nustatytas į 16 pikselių. Tse zapobіgaє automatinis mastelio keitimas, jakų vіdbuvaєtsya pіd valandą peržiūrėti mobiliuosius ūkinius pastatus.

Autorinė, buržuazinė įskiepio versija yra žinoma. Ten taip pat galite atsisiųsti originalą.
Rusišką versiją, galite paimti iš mano Yandex.Disk, visi reikalingi failai, dabai supakuoti į vieną archyvą, nepamirškite tuo pasigrožėti, daugiau adaptacijų, gyvas robotiško stebuklo jQuery įskiepio užpakalis:

Su pagarba Andrius

Svetainėje sukūrėme stilingą leidimo formą, kurią galite sužinoti iš „Futurico UI Pro“, kurią sukūrė Volodymyras Kudinovas. Norėdami sukurti formą, nulaužsime CSS3 ir jQuery.

Krok 1 – HTML išdėstymas

Pradėkime nuo HTML kontūro kūrimo. Sukurkime formą su keliais įvestimis (im'ya koristuvacha, slaptažodis, žymės langelis ir mygtukas "pateikti") ensign apvyniosime span žymą, kurią naudosime formuodami ensign stilių. Apvyniokime formą ir antraštę DIV žyma ir priskirkime ją savo „prisijungimo formos“ klasei.

> prisijungimo forma >

>

Prisiminti >
>

Krok 2 - Žagalni stiliai

Ant nugaros matėme visus laukus, per laiptelius, tarp menkai. iš elementų, yakі mes laimėsime.

prisijungimo forma,
.prisijungimo forma h1,
.login-form span,
.prisijungimo formos įvestis,
.login-form label(
paraštė: 0;
paminkštinimas: 0;
kraštinė: 0;
kontūras: 0;
}

Sudėkime formų konteinerio stilius. Pridedame aiškią padėtį, fiksuotą plotį ir aukštį, fono spalvą, suapvalintus kraštus ir atspalvius.

prisijungimo forma (
padėtis: santykinė;
plotis: 200px
aukštis: 200 pikselių;
padding : 15px 25px 0 25px;
paraštė viršuje: 15 piks.;
žymeklis: numatytasis;

fono spalva : #141517;

webkit-border-radius: 5px;
-moz-border-radius: 5px;
kraštinės spindulys: 5 pikseliai

Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 );
-moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 );
langelis-šešėlis: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 );
}

Norėdami sukurti rodyklę, turime naudoti parinkiklį :before.

Prisijungimo forma :prieš (
padėtis: absoliuti;
viršuje: -12px;
kairėje: 10px;

plotis: 0px
aukštis: 0px;
turinys: "";

bortelis-apačia: 10 pikselių vientisas #141517;
kraštinė dešinė: 10 pikselių vientisas #141517;
kraštinė-viršus: 10 pikselių vientisas skaidrus;
kraštinė kairėje: 10 pikselių vientisas skaidrus;
}

Dodamo specifiniai formos antraštės stiliai (spalva, šriftas ir dydis, plonas).

Prisijungimo forma h1 (
linijos aukštis: 40 pikselių;
šriftų šeima: „Myriad Pro“, sans-serif;
šrifto dydis: 22 pikseliai;
šrifto svoris: normalus
spalva: #e4e4e4;
}

Krok 3 – Žagalni stiliai formų laukams

Sudėkime pagrindinius įvesties stilius.

linijos aukštis: 14 pikselių;
paraštė: 10 taškų 0;
pamušalas: 6px 15px;
kraštinė: 0;
kontūras: nėra;

šriftų šeima: Helvetica, sans-serif;
šrifto dydis: 12 pikselių;
šrifto svoris: paryškintas;
text-shadow : 0px 1px 1px rgba(255, 255, 255, .2);

webkit-border-radius: 26px;
-moz-border-radius: 26px;
kraštinės spindulys: 26 pikseliai;

žiniatinklio rinkinio perėjimas: visi .15s lengva įvesti;
-Moz-perėjimas: visi .15s lengva įvesti;
-o-perėjimas: visų .15s lengvas įėjimas-išėjimas;
perėjimas: visi .15s lengvas įėjimas-išėjimas;
}

Tada nustatysime prisijungimo ir slaptažodžio laukų įvedimo stilius. Mi dodamo gradientas pilkas fonas ir šešėlis. Taip pat pridedame fiksuotą teksto plotį, lygų 170 pikselių.

Prisijungimo formos įvestis[ type= text ] ,
.login-form input[type=password] ,
.js .login-form span(
spalva: #686868;
plotis: 170px

Webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6);
langelis-šešėlis: inset 1px 1px 1px 0px rgba(255, 255, 255, .6);

fonas: #989898;
fonas: -moz-linear-gradient(viršuje, #ffffff 0%, #989898 100%);
fonas: -webkit-gradient(linijinis, kairysis viršuje, kairėje apačioje, color-stop(0%, #ffffff), color-stop(100%, #989898));
fonas: -webkit-linear-gradient(top, #ffffff 0%, #989898 100%);
fonas: -o-linear-gradient(viršuje, #ffffff 0%, #989898 100%);
fonas: -ms-linear-gradient(viršuje, #ffffff 0%, #989898 100%);
fonas: linijinis gradientas(viršus, #ffffff 0%, #989898 100%);
}

Užvedę pelės žymeklį ant q laukų, keičiame šešėlius.

Prisijungimo formos įvestis[ type= text ] :hover ,
.login-form input[ type=password] :hover (
-webkit-box-shadow: įdėtas 1px 1px 1px 0px rgba(255, 255, 255, .6), 0px 0px 5px rgba(255, 255, 255, .5);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, .6), 0px 0px 5px rgba(255, 255, 255, .5);
langelis-šešėlis: 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5);
}

Jei norite tapti aktyviu, pakeiskite CSS3 gradientą į tris šviesas

Prisijungimo formos įvestis[ type= text ] :focus ,
.login-form input[type=password] :focus(
fonas: #e1e1e1;
fonas : -moz-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
fonas: -webkit-gradient(linijinis, kairysis viršuje, kairėje apačioje, color-stop(0%, #ffffff), color-stop(100%, #e1e1e1));
fonas: -webkit-linear-gradient(viršuje, #ffffff 0%, #e1e1e1 100%);
fonas : -o-linear-gradient(viršus , #ffffff 0% , #e1e1e1 100% );
fonas: -ms-linear-gradient(viršuje, #ffffff 0%, #e1e1e1 100%);
fonas: linijinis gradientas (viršuje, #ffffff 0%, #e1e1e1 100%);
}

Krok 4 – Mygtukas Pateikti

Pakeiskime dešinėje esantį mygtuką, kuriam nustatome float:right.

Prisijungimo formos įvestis[ type=submit] (
plūdė: dešinė;
žymeklis: rodyklė;

spalva: #445b0f;

Webkit-box-shadow: 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) ;
langelis-šešėlis: 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
}

Užvedę pelę keičiame tylą, o kai pelė aktyvi, tai matome.

Prisijungimo formos įvestis[ type= pateikti] :hover (
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
-moz-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
langelis-šešėlis: 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
}

Prisijungimo formos įvestis[ type= pateikti] :aktyvus (
-webkit-box-shadow: nėra;
-moz-box-shadow: nėra;
langelis-šešėlis: nėra
}

Pridėkite žalią mygtuko gradientą.

Prisijungimo formos įvestis[ type=submit] ,
.js .login-form span.checked :before (
fonas: #a5cd4e;
fonas: -moz-linear-gradient(viršuje, #a5cd4e 0%, #6b8f1a 100%);
fonas : -webkit-gradient (linijinis, kairėje viršuje, kairėje apačioje, spalvos sustabdymas (0% , #a5cd4e) , color-stop (100%, #6b8f1a) ) ;
fone: -Webkit-linear-gradient (viršuje, #a5cd4e 0% , #6b8f1a 100% ) ;
fone: -o-tiesinis-gradientas (viršuje, #a5cd4e 0% , #6b8f1a 100% ) ;
fone: -ms-tiesinis gradientas (viršuje, #a5cd4e 0% , #6b8f1a 100% ) ;
fone: tiesinis gradientas (viršuje, #a5cd4e 0% , #6b8f1a 100% ) ;
}

Krok 5 – Praporščiko stiliai

Dabar taisoma svarbiausia dalis, prie kurios negalime pakeisti vėliavų išvaizdos su CSS pagalba, prie to pakeitėme kitų formos laukelių išvaizdą.

Paprasčiausias būdas, kurį žinau, yra pakeisti vėliavą span žyma.

Tai bus kitas žingsnis: pakaušyje nustatysime vėliavą ir nustatysime tokius span žymos stilius, kad jis atrodytų kaip ensign, o tada atnaujinsime vėliavą (ženklai / ne ženklai ) su jQuery pagalba.

Širdelės išjungė JavaScript, būtina pridėti atsarginę parinktį. Kam pridedame laiko "js" y klasės kūno žyma, skirta jQuery pagalbai. Taigi, jei „JavaScript“ yra praleista, „js“ klasė bus pridėta prie kūno žymos, kai pasirenkama pusė, o jei „JavaScript“ praleista, klasė nebus pridėta. Nuo šiol stilizacijų čempionais bus tik „JavaScript“ palaikantys koristuvachai.

Ant mano pakaušio esame praporščikas.

.js .prisijungimo formaįvestis [ tipo = žymimasis langelis ] {
padėtis: fiksuotas;
paliko: -9999 pikseliai;
}

Įdėkime jį į atitinkamą span žymos vietą.

.prisijungimo forma span {
padėtis: giminaitis;
paraštė-viršus: 15 piks;
plūdė: paliko;
}

Pridėkime keletą span žymos stilių (plotis, aukštis, tarpinis).

.js .prisijungimo forma span {
plotis: 16 pikselių;
aukščio: 16 pikselių;
žymeklį: rodyklė;

Webkit-border-radius : 2px;
-moz-border-radius : 2px;
pasienio spindulys : 2px;
}

Norėdami sukurti "pažymėtą" stovyklą, įkiškite nedidelį kvadratą į tarpą ir padėkite jį netoli centro.

.js .prisijungimo forma span .patikrinta: prieš{
turinys: "" ;
padėtis: absoliutus;
viršuje: 4 piks;
paliko: 4 piks;
plotis: 8px;
aukščio: 8px;

Webkit-box-shadow : 0px 1px 1px 0px rgba (255 , 255 , 255 , .45) , intarpas 0px 1px 1px 0px rgba (0 , 0 , 0 , .3) ;
-moz-box-šešėlis : 0px 1px 1px 0px rgba (255 , 255 , 255 , .45) , intarpas 0px 1px 1px 0px rgba (0 , 0 , 0 , .3) ;
dėžutės šešėlis : 0px 1px 1px 0px rgba (255 , 255 , 255 , .45) , intarpas 0px 1px 1px 0px rgba (0 , 0 , 0 , .3) ;
}

Etiketės žyma yra savavališkai dešiniarankė dešinėje ir dodamo pagrindiniai stiliai (šriftas, plona spalva).

.prisijungimo forma etiketė {
padėtis: absoliutus;
viršuje: 1px;
paliko: 25 piks;
šrifto šeima: be serif;
šrifto svoris: drąsus;
šrifto dydis: 12 piks;
spalva: #e4e4e4;
}

Bet kokie stiliai, kurie įveda „js“ klasę, sustos tik įjungus „JavaScript“.

Croc 6 – jQuery

Pridėsime naujausią „jQuery“ bibliotekos versiją naudodami „Google API“. Jei norite, galėsite ją priglobti pasirinktame viešajame serveryje. Tada pridėkite kitą kodą HTML failo apačioje, prieš baigiamąją žymą .

< scenarijus src = „https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“> scenarijus >
< scenarijus >
$( dokumentas ) .pasiruošę(funkcija() {

// Patikrinkite, ar įjungtas JavaScript
$("kūnas") .addClass("js") ;

// Pažymėkite žymimąjį laukelį įkeliant
$(".login-form span") .addClass("patikrinta") .vaikai("įvestis") .attr("patikrinta", tiesa) ;

// paspaudimo funkcija
$(".login-form span") .įjungta("spausti", funkcija() {

jeigu ($(tai) .vaikai("įvestis") .attr("patikrinta") ) {
$(tai) .vaikai("įvestis") .attr("patikrinta", klaidinga) ;
$(tai) .pašalinti klasę("patikrinta") ;
}

Kitas {
$(tai) .vaikai("įvestis") .attr("patikrinta", tiesa) ;
$(tai) .addClass("patikrinta") ;
}
} ) ;
} ) ;
scenarijus >

Nugaroje mi dodamo klasė "js" ant kūno etiketės.

Jei turite acichli galią, geriausiam būdui pagerinti, rekomenduojama naudoti mūsų forumą

Viso gero draugai! Pažvelkime į koristuvachiv registraciją PHP. Dėl burbuolės prasmingai pagalvokime dėl koristuvachiv registracijos:

Slaptažodis yra užšifruotas algoritmo pagalba MD5
Slaptažodis "vienatvė"
Prisijungimo darbo tikrinimas
Koristuvach lapo aktyvinimas.
Duomenų įrašymas ir išsaugojimas iš DBVS MySQL

Norėdami parašyti šį scenarijų, turime suprasti, kas yra koristuvach registracija. Koristuvach registracija – tikrojo koristuvacho duomenų gavimas, duomenų apdorojimas ir išsaugojimas.

Paaiškinkime paprastais žodžiais, tada registracija tereikia įrašyti ir rinkti asmens duomenis, kuriuos galime įgalioti savo paskyroje – prisijungimo vardą ir slaptažodį.

Įgaliojimas – tai dainos suteikimas asmeniui ar asmenų grupei teisių pamatyti dainas, taip pat šių teisių peržiūros procesas valandą, pabandyti jas pamatyti. Iš pažiūros paprasčiau, turėdami papildomą leidimą galime atskirti prieigą prie daugiau mūsų svetainės turinio.

Pažvelkime į katalogų struktūrą scenarijų, skirtų mūsų registracijai su įgaliojimu įgyvendinti. Turime padalinti scenarijus loginiuose sandėliuose. Registracijos ir autorizacijos moduliai buvo patalpinti okremy kataloge. Taip pat katalogų aplinkoje galime prisijungti ir prie duomenų bazės MySQL, failas su Koristuvach funkcijomis, stiliaus failas css ir mūsų šablonas HTML. Ši struktūra leidžia greitai naršyti scenarijus. Praneškite man, kad turite puikią svetainę su daugybe modulių ir pan. O jei nėra tvarkos, tada bus patogiau žinoti tokioje netvarkoje.

Taigi, kaip išsaugoti visus duomenis DBVS MySQL, tada sukurkime nedidelę lentelę, kad surinktume duomenis apie registraciją.

Burbuolei būtina sukurti lentelę duomenų bazėje. Stalas vadinamas bez_reg de bez- tse lentelės priešdėlis ir reg pavadinkite lenteles.

Lentelės struktūra: bez_reg

-- -- Lentelės struktūra "bez_reg" -- KURTI LENTELĘ, JEI NĖRA "bez_reg" ("id" int(11) NOT NULL AUTO_INCREMENT, "login" varchar(200) NOT NULL, "pass" varchar(32) NOT NULL , `salt` varchar(32) NOT NULL, `active_hex` varchar(32) NOT NULL, `status` int(1) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Dabar sukurkime pagrindinius likusio darbo scenarijus.

INDEX.PHP FAILAS

CONFIG.PHP FAILAS

"); ?>

Failas 404.HTML

Atsiprašau 404

Pardon 404 tapo šone

apsisuk

BD.PHP failą

INDEX.HTML FAILAS

PHP MySQL korespondentų registravimas aktyvinimo lape

FUNCT.PHP FAILAS

"."\n"; if(is_array($data)) ( foreach($data as $val) $err .= "

".$val."

"."\n"; ) else $err .= "

„.$duomenys“.

"."\n"; $err .= ""."\n"; grąžinti $err; ) /**Paprastas paketas užklausoms į MySQL * @param string $sql */ funkcija mysqlQuery($sql) ( $res = mysql_query($sql); /* Peržiūrėkite rezultatą rodo tikrą įvestį, MySQL papildymus, taip pat atleidimą.*/ if(!$res) ( $message = "Neteisinga įvestis: " . : " . $sql; die($message); ) return $res ; ) /**Paprastas druskos generatorius * @param string $sql */ function salt() ( $druska = substr(md5(uniqid())), - 8);return $salt; )

Pradėkime rašyti registraciją. Turėsime sukurti registracijos formos šabloną, kad galėtume siųsti savo duomenis apdoroti. Jie suteiktų mums būtinybę parašyti pačios formos kopiją, kuri būtų pataisyta dėl pateiktų koristuvach duomenų teisingumo. Po to, kai tik duomenys bus sėkmingai patikrinti, įrašome juos į savo duomenų bazę ir redaguojame koristuvačio lapą, kad suaktyvintume pirmąjį oblikovo įrašą.

REG.PHP FAILAS

Sėkmingai užsiregistravote! Būkite malonūs, suaktyvinkite paskyrą!!"; //Pasirinkite debesies įrašo aktyvavimą if(isset($_GET["key"])) ( //Patikrinkite $sql key = "SELECT * FROM `". BEZ_DBPREFIX ."reg` WHERE `active_hex` = " ". escape_str ( $_GET["raktas"]) ."""; $res = mysqlQuery($sql); if(mysql_num_rows($res) == 0) $err = "Aktyvinimo raktas neteisingas!"; / / Dar kartą patikrinkite atleidimą ir parodykite korylistą if(count($err) > 0) echo showErrorMessage($err);else ( //Pašalinti koristuvac adresą $row = mysql_fetch_assoc($res); $el.paštas = $row["prisijungti"]; //Suaktyvinti koristuvach paskyrą $sql = "ATNAUJINTI `".BEZ_DBPREFIX . = "( !LANG:(!LANG:Jūsų paskyra adresu http://sėkmingai suaktyvinimo svetainė"; $message = "Поздравляю Вас, Ваш аккаунт на http://сайт успешно активирован"; sendMessageMail($email, BEZ_MAIL_AUTOR, $title, $message); /*Перенаправляем пользователя на нужную нам страницу*/ header("Location:". BEZ_HOST ."less/reg/?mode=reg&active=ok"); exit; } } /*Если нажата кнопка на регистрацию, начинаем проверку*/ if(isset($_POST["submit"])) { //Утюжим пришедшие данные if(empty($_POST["email"])) $err = "Поле Email не может быть пустым!"; else { if(!preg_match("/^!} !} [apsaugotas el. paštas](+\.)+(2,6)$/i", $_POST["el. paštas"])) $err = "Įvestas neteisingas el. paštas"."\n"; ) if(empty($_POST[ " perduoti"])) $err = "Slaptažodžio laukas negali būti tuščias"; if(empty($_POST["pass2"])) $err = "Slaptažodžio patvirtinimo laukas negali būti tuščias"; if(count($err) > 0 ) echo showErrorMessage($err);else ( /*Tęsti įvestų duomenų tikrinimą; patvirtinti slaptažodžio klaidą*/ if($_POST["passs"] != $_POST["pass2" ] ) $err = "Slaptažodžiai ne t match"; // Dar kartą patikrinkite, ar yra atleidimo, ir parodykite teisingus if(count($err) > 0) echo showErrorMessage($err); / $sql = "SELECT `login` FROM `".BEZ_DBPREFIX . "reg` WHERE `login` = "". escape_str($_POST["el. paštas"]) ."""; $res = mysqlQuery($sql); if(mysql_num_rows($res) > 0) $err = "Atsiprašome Prisijunkite: ". $_POST["el. paštas"] ." užimtas!"; // Peržiūrėkite atleidimo buvimą ir parodykite teisingus if(count($err) > 0) echo showErrorMessage($err); else ( //Pašalinkite druskos HASH $druska = druska(); //Pasūdykite slaptažodį $pass = md5(md5($_POST["pass"]).$salt); /*Viskas gerai, įrašome duomenis į duomenų bazę*/ $sql = "INSERT INTO `". BEZ_DBPREFIX . "reg` VALUES("", "" .escape_str($_POST["el. paštas"]) ."", "". $pass ."", "". $salt ."", "". md5($salt ) ."", 0)"; res = mysqlQuery($sql); //Aukštesnis aktyvinimo sąrašas $url = BEZ_HOST ."less/reg/?mode=reg&key=". md5($salt); $title = " (!LANG:(!LANG:Registracija http:/ /svetainėje"; $message = "Для активации Вашего акаунта пройдите по ссылке ". $url .""; sendMessageMail($_POST["email"], BEZ_MAIL_AUTOR, $title, $message); //Сбрасываем параметры header("Location:". BEZ_HOST ."less/reg/?mode=reg&status=ok"); exit; } } } } ?>!}!}

REG_FORM.HTML FAILAS

PHP MySQL korespondentų registravimas aktyvinimo lape

El. paštas *:
Slaptažodis *:
Slaptažodžio patvirtinimas *:

Laukai su piktograma * obov'yazkovі užpildymui

Oskolki koristuvachivs registracija yra paruošta pas mus, laikas parašyti įgaliojimą. Sukuriame koristuvachiv autorizacijos formą, parašysime leidimo formos pavyzdį ir galiausiai sukursime scenarijų rodyti.php kurią mums parodys sistemoje įgalioti asmenys.

AUTH.PHP FAILAS

0) echo showErrorMessage($err); else ( /*Sukurkite pavyzdį iš duomenų bazės, kad patikrintumėte pašto dėžutės autentiškumą*/ $sql = "SELECT * FROM `". BEZ_DBPREFIX ."reg` WHERE `login` = "". escape_str($_POST["el. "]) ) ."" IR "būsena" = 1"; $res = mysqlQuery($sql); //Be to, slaptažodis tikrinamas if(mysql_num_rows($res) > 0) ( //Pašalinti duomenis iš lentelių $row = mysql_fetch_assoc( $res);if(md5(md5($_POST["pass"]).$ row["druska"]) == $row["pass"]) ( $_SESSION["naudotojas"] = true; // Praleisti antraštę("Vieta:". BEZ_HOST ."less/reg/?mode=auth) "); išeiti; ) else echo showErrorMessage("Klaidingas slaptažodis!"); ) else echo showErrorMessage("Prisijungti ". $_POST["el. paštas"] ." nerasta!"); ) ) ?>

Tiems, kurie turi likusią PHP versiją, skelbiu visą scenarijų SKVN nes išplėtimas MySQL nebenaudojamas ir pašalintas iš naujos PHP versijos. Gaukite registraciją ir leidimą php mysql pdo

Archyvas atnaujintas 2015-02-24.

Pagarba: Kaip nulaužti šį scenarijų vietiniame serveryje? DENVERIS,XAMPP, tada netikrinkite lapų pašto ekrane. Lapai guli prie stiebo Išsiųsti laišką. AT Denveris galite žinoti pakeliui Z:\tmp\!sendmail\Šiuos failus galite atidaryti naudodami bet kurią pašto programą.

3,8 iš 5

Buenos diaz, draugai!

Šiandien mes sukursime jums neįpareigojančią registracijos-įgaliojimo-slaptažodžio atspėjimo formą.

Naudojame jQuery ir jQuery palengvinimo įskiepį, kuris išplečia jQuery animacijos galimybes. Apie šį papildinį jau rašėme. Iš karto laimėsime ant tikro užpakalio.

N.B. Qia straipsnis gali.

Esmė, ką aš noriu robiti, yra puolime. Visos trys formos: registracija, autorizacija ir slaptažodžio atspėjimas yra šone. Tačiau dviejų iš jų nematyti. Užpuolus pseudovalstybei (apie viso radžo galią skaityti Pavelo Markivno straipsnį), atsiranda būtina forma.

Žvilgtelėję stebėjomės užpakaliu ir viskas tapo aišku:

HTML ir CSS

Šoninis kodas atrodys maždaug taip:

eilučių eilutes CSS

Galime naršyti vaizdą naršyklėje:

Prisijungimo prie odos blokas, skirtas atimti nuo jūsų įvesties, mygtukų ir blokų, skirtų atleisti. Pažvelkime į prisijungimą:

Blokas #error1 dažniausiai yra nematomas ir tuščias. Jei laukelių patvirtinimas nepraėjo, pakartosiu su atleidimo tekstu ir parodysiu.

JavaScript

Pirma, padarykime tai – ant $(document).ready() galime pridėti paspaudimų prie pseudopranešimų. Turime tris poras silano, kurios kaltos, kad veda prie paties rezultato, odos pora yra geresnės klasės. Pagal naująjį mi ir shukatimemo posilannya:

$(document).ready(function() (
$("a.remindPass").click(function(e) (
e.preventDefault();
GoTo (2);
});
$("a.signin").click(function(e) (
e.preventDefault();
Eiti į (1);
});
$("a.registravimas").click(function(e) (
e.preventDefault();
Eiti į(0);
});
});

Funkcija GoTo(num) atsuka #wr pagal kairiosios įvesties reikšmę. Čia yra „jQuery“ palengvinimo įskiepio santrauka:

Funkcija GoTo(num) (
paraštė = skaičius * 382;
$("#wr").animate(( marginLeft: -margin ),
( trukmė: 800, palengvinimas: "easeInOutBack" ));
}

382px - plotis one.loginBlokas su visų įėjimų ir kraštinių fiksavimu.

Už odos mygtuko do - registracija, autorizacija ir slaptažodžio primetimas į paštą, parašysime paspaudimų rinkėjo funkciją. Čia pateiksiu tik vieną pavyzdį. Kiti gali būti įtraukti į js-failą (išsiųsta į archyvą bus straipsnio apačioje).

Funkcija Registracija() (
paštas = $("#el.paštas").val();
pass = $("#slaptažodis").val();
passAgain = $("#passwordAgain").val();
if (!ValidEmail(email)) (
ShowError(0);
}
Kitas(
if ((praleisti!="")&&(praleisti == išlaikyti dar kartą)) (
if (!UserWithEmailExists(email)) (
//Užregistruoti vartotoją
Slėpti klaidą ()
}
) Kitas (
ShowError (1);
}
}
}

Funkcija UserWithEmailExists(email) yra atsakinga už eilę prie serverio, siekiant išsiaiškinti, kuris el. paštas yra sistemoje. Jei taip, paverskite tiesa, kitu atveju klaidinga.

Dabar pakalbėkime apie atleidimą ir atleidimą. Atrodykite taip:

Atsiprašau el. pašto patvirtinimo:

Atsiprašau už slaptažodžių sulaužymą:

Nenoras:

Odos saldikliui yra kodas, odos saldiklis turi savo formą, todėl galite sukurti išplėstinį konstantų sąrašą:

Var er0 = "Blogas el. pašto formatas"a"; //0
var er1 = "Slaptažodžiai nesutampa"; //0
var er2 = "Koristuvach su šiuo el. laišku "jau užsiregistravo"; //0
var er3 = "Prarastas slaptažodis. Arba el. paštas. Bandykite dar kartą"; //vienas
var er4 = "Koristuvacha su šiuo el. laišku "daugiau neturime"; //2
var er5 = "Blogas el. pašto formatas"a"; //2

O pats atleidimo rodymas įgyvendina šią funkciją:

Funkcija HideError() (
$(.error").hide();
}
funkcija ShowError(code) (
HideError ();
jungiklis (kodas) (
0 atvejis:
$("#error0").html(er0).slideDown();
pertrauka;
1 atvejis:
$("#error0").html(er1).slideDown();
pertrauka;
2 atvejis:
$("#error0").html(er2).slideDown();
pertrauka;
3 atvejis:
$("#error1").html(er3).slideDown();
pertrauka;
4 atvejis:
$("#error2").html(er4).slideDown();
pertrauka;
5 atvejis:
$("#error2").html(er5).slideDown();
pertrauka;
}
}

Panašiai vykdomas ir atleidimas.

naršyklės

Sėkmingas autorizavimas.

HTML struktūra:

CSS stiliai:

Krok 1 – HTML išdėstymas

Krok 2 - Žagalni stiliai

Krok 3 – Žagalni stiliai formų laukams

Krok 4 – Mygtukas Pateikti

Krok 5 – Praporščiko stiliai

Croc 6 – jQuery

Lentelės struktūra: bez_reg

Dabar sukurkime pagrindinius likusio darbo scenarijus.

INDEX.PHP FAILAS

CONFIG.PHP FAILAS

Failas 404.HTML

Atsiprašau 404

Pardon 404 tapo šone

BD.PHP failą

INDEX.HTML FAILAS

FUNCT.PHP FAILAS

REG.PHP FAILAS

REG_FORM.HTML FAILAS

PHP MySQL korespondentų registravimas aktyvinimo lape

AUTH.PHP FAILAS

Archyvas atnaujintas 2015-02-24.

HTML ir CSS

JavaScript

Taip pat galite kostiumuoti