Veidlapu veidošana, izmantojot CSS3

#abonēt, #pieteikties (pozīcija: absolūta; augšdaļa: 0 pikseļi; platums: 88%; polsterējums: 18 pikseļi 6% 60 pikseļi 6%; piemale: 0 0 35 pikseļi 0; fons: rgb(247, 247, 247); apmale: 1px cieta rgba(147, 184, 189, 0.8; box-shadow: 0px 5px rgba(105, 108, 109, 0.7), 0px 8px rgba(208, 223, 226;in); z-indekss: 22;

Šeit mēs piešķirsim galvenes rekvizītus:

/**** teksts ****/ #wrapper h1(fonta izmērs: 48px; krāsa: rgb(6, 106, 117); polsterējums: 2px 0 10px 0; fontu saime: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; polsterējums-bottom: 30px; ) /** Pašlaik tikai tīmekļa komplekts atbalsta fona klipu:tekstu; **/ #wrapper h1(fons: -webkit-repeating-linear-gradient(-45°, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: caurspīdīgs " "; displejs: bloks; platums: 10 px. rgba(147,184,189,0,8) 79%, rgba(147,184,189,0) 100%));

Ņemiet vērā, ka šodien tikai pārlūkprogrammas ar tīmekļa komplekta atbalstu fona klips: teksts, tāpēc mēs izveidosim tikai tīmekļa komplektam svītrainu fonu un piesaistīsim to H1 galvenei. Kopš parametra fona klips: teksts darbojas tikai Webkit pārlūkprogrammās, es nolēmu strādāt tikai ar webkit īpašībām. Tāpēc es sadalīju CSS divās daļās un izmantoju tikai tīmekļa komplekta gradientu. Tomēr jums nevajadzētu tikai izmantot tīmekļa komplektu savās vietnēs! Tā, piemēram, parametrs -Webkit-text-fill-color: caurspīdīgsļauj mums izveidot caurspīdīgu fonu, taču tikai tīmekļa komplektu pārlūkprogrammām visas pārējās pārlūkprogrammas ignorēs šo rekvizītu.

Mēs arī izveidojām plānu līniju zem virsraksta, izmantojot :after pseidoklases elementu. Mēs izmantojām gradientu ar 2 pikseļu augstumu un samazinājām necaurredzamību malās līdz nullei.

Tagad parūpēsimies par ievades laukiem un padarīsim tos jauki.

/**** uzlabots ievades stils ****/ /* vietturis */ ::-webkit-input-placeholder ( krāsa: rgb(190, 188, 188); fonta stils: slīpraksts; ) ievade:-moz- vietturis, teksta apgabals:-moz-placeholder( krāsa: rgb(190, 188, 188); fonta stils: slīpraksts; ) ievade ( kontūra: nav; )

Pirmkārt, mēs veidosim piemales stilu un noņemsim svītru. Taču esiet uzmanīgi: kontūra palīdz lietotājam saprast, kurā laukā viņš atrodas. Ja to noņemat, jums ir jāpiemēro rekvizīti: aktīvs un fokuss.

/* visi lauki neietver iesniegt un izvēles rūtiņu */ #wrapper input:not())(platums: 92%; margin-top: 4px; polsterējums: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing: content-box: 3px box-shadow: 0px 1px 0px rgba(168, 168, 0.6) inset: all 0.2s linear , #wrapper input:not(); fokuss (apmale: 1 px solid rgba(91, 90, 90, 0,7); fons: rgba(238, 236, 240, 0,2); lodziņa ēna: 0 pikseļi 1 pikseļi 4 pikseļi 0 pikseļi rgba(168, 168, 168) inset, 0.)

Šeit mēs izmantojām pseido class:not, lai veidotu visus laukus, izņemot izvēles rūtiņas. Turklāt es nolēmu noņemt insultu un pievienoju īpašības:focus un:active.

Tagad ir pienācis laiks izklaidēties: fonts ar ikonām. Tā kā mēs nevaram izmantot pseidoklases :before un :after, mēs pievienosim ikonu etiķetes parametram un pēc tam ievietosim to laukā. Es izmantošu fontomas bibliotēku. Jūs pats varat saskaņot ikonas ar atbilstošo burtu. Atcerieties atribūtu datu ikona? Šeit jums jāievada burts. ES izmantoju data-icon='u' pieteikšanās, "e" e-pastam, "p" parolei. Kad es izvēlējos burtus, es lejupielādēju fontu un izmantoju fontsquirrel fontu ģeneratoru, lai pārveidotu to formātā, kas piemērots @font-face.

@font-face ( fontu saime: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") formāts("embedded- opentype"), url("fonts/fontomas-webfont.woff") formāts("woff"), url("fonts/fontomas-webfont.ttf") formāts("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") formāts("svg"); fonta svars: normāls; fonta stils: normāls; ) /** burvju triks! **/ :after ( saturs: attr(data-icon); fontu saime: "FontomasCustomRegular"; krāsa: rgb(106, 159, 171); pozīcija: absolūtā; pa kreisi: 10 pikseļi; augšā: 35 pikseļi; platums: 30 pikseļi; )

Tas ir viss. Katrai ikonai nav jābūt atsevišķai klasei. Mēs izmantojām parametru saturs: attr(data-icon) lai iegūtu burtu no datu ikonas atribūta. Tādējādi mums ir tikai jāpiešķir fonts, jāizvēlas krāsa un jānovieto ikona.

Tagad piešķirsim noteikumus veidlapas iesniegšanas pogai.

/*izveidojiet abas pogas ",Arial,sans-serif; krāsa: #fff; fonta lielums: 24 pikseļi; apmale: 1px solid rgb(28, 108, 122); malas apakšdaļa: 10px; teksta ēna: 0 1px 1px rgba(0, 0) , 0, 0,5); apmales rādiuss: 3px, 1px 6px 4px rgba(0, 0, 0, 0,07) ielaidums, 0px 0px 0px 3px rgb(254, 254, 0px 3px) (210, 210, 210); pāreja: visi 0,2 s lineāri ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. pogas ievade: fokuss (fons: rgb(40, 137, 154); pozīcija: relatīvs; augšdaļa: 1 pikseļi; apmale: 1 pikseļi ciets rgb(12, 76, 87); lodziņa ēna: 0 pikseļi 1 pikseļi 6 pikseļi 4 pikseļi rgba(0, 0) , 0, 0,2) ielaidums; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

Viltība ir izmantot lodziņu ēnu, lai izveidotu vairākus kadrus. Protams, jūs varat izmantot tikai vienu rāmi, bet varat arī izmantot vairākus. Mēs izmantosim garuma parametru, lai izveidotu “viltus” otro balto apmali 3 pikseļu platumā bez aizmiglošanas.

Tagad izveidosim izvēles rūtiņas stilu, mēs šeit nedarīsim neko neparastu:

/* ieveidojiet izvēles rūtiņas “atcerēties mani” stilu*/ .keeplogin( margin-top: -5px; ) .keeplogin ievade, .keeplogin etiķete(displejs: inline-block; fonta izmērs: 12px; fonta stils: slīpraksts; ) . Keeplogin ievade#loginkeeping( margin-right: 5px; ) .keelogin etiķete(platums: 80%; )

Veidlapas kājenes stilizēšana, izmantojot vairākus lineārus gradientus, lai izveidotu svītrainu gradientu.

P.change_link(pozīcija: absolūta; krāsa: rgb(127, 124, 124); pa kreisi: 0 pikseļi; augstums: 20 pikseļi; platums: 440 pikseļi; polsterējums: 17 pikseļi 30 pikseļi 20 pikseļi 30 pikseļi; fonta izmērs: 16 pikseļi; teksta līdzinājums: pa labi; border-top: 1px solid rgb(219, 229, 232) border-radius: 0 0 5px background: rgb(225, 234, 235): atkārtojošs lineārs gradients(-45deg, rgb(247); 247, 247) , rgb(247, 247, 247) 15 pikseļi, rgb(225, 234, 235) 15 pikseļi, rgb(225, 234, 235) 30 pikseļi, rgb(247, 247) . displejs: ielikts-block: trekns: rgb (247, 241) krāsa: rgb (29, 162, 193); apmales rādiuss: 1px solid rgb(203, 213, 214): rgb (247, 247, 179); 198) #wrapper p.change_link a:active( pozīcija: relatīvs; augšā: 1px; )

Tagad jūs varat redzēt, ka mums ir divas jaukas formas, taču mēs vēlamies, lai tiktu parādīta tikai viena no tām. Ir pienācis laiks animācijai!

Animācijas veidošana

#register(z-indekss: 21; necaurredzamība: 0; )

Atcerieties, ka pieteikšanās veidlapā ir z-indekss: 22? Otrajai veidlapai mēs piešķirsim šo parametru 21, lai to ievietotu “zem” pieteikšanās veidlapā.

Tagad jautrākā daļa: mēs apmainām veidlapas, izmantojot pseidoklase:target. Jums ir jāsaprot viena lieta par :target: mēs izmantosim enkurus, lai to pārvietotu. Parastā enkura darbība ir pāriet uz noteiktu lapas elementu. Bet mēs to nevēlamies, mēs tikai vēlamies apmainīt formas. Šeit palīdz mūsu triks, izmantojot divas saites lapas augšpusē. Tā vietā, lai novirzītu mūs tieši uz otro formu un riskētu ar lēciena efektu, mēs saitēm piešķirsim parametru displejs: nav. Tas palīdzēs izvairīties no lēkšanas. Es atklāju šo triku vietnē: CSS3 create (franču val.).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login(z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )

Tas notiek: kad mēs noklikšķinām uz pogas Pievienojieties, mēs ejam uz #reģistrēties. Tad notiek animācija un tikai tad pārejam uz elementu #register. Mēs izmantojam animāciju ar nosaukumu izbalināt Kreisajā pusē. Tā kā mēs “slēpjam” formu, izmantojot nulles caurspīdīgumu, mēs izmantosim animāciju, kas pakāpeniski parādīsies. Mēs arī mainījām z-indeksu, lai tas parādās virs citas formas. Tas pats notiek ar otru formu.
Šeit ir animācijas kods. Mēs izmantojām CSS3 animācijas sistēmu no Dan Eden un pielāgojām šo ietvaru savai apmācībai.

Animate (animācijas ilgums: 0,5 s; animācijas laika funkcija: vieglums; animācijas aizpildīšanas režīms: abi : 1 pārveidot: translateX(0);

Formai, kas "pazūd", pa kreisi būs izbalināta animācija:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animācijas nosaukums: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( necaurredzamība: 1; pārveidot: translateX(0); ) 100% ( necaurredzamība : 0 pārveidot: translateX(-20px);

Tagad varat izmantot citas Dan Eden animācijas, izmantojot failu animate.css: vienkārši mainiet .animate klasi un animāciju nosaukumus. Faila animate-custom.css beigās atradīsit arī vairākas citas animācijas.

Tas arī viss, draugi. Ceru, ka jums patika šī apmācība!

Ņemiet vērā, ka dažās pārlūkprogrammās šī opcija fona klips: teksts nav atbalstīts. Animācijas nedarbojas pārlūkprogrammā Internet Explorer 9. Internet Explorer 8 un jaunākās versijās pseidoklase:mērķa pseidoklase netiek atbalstīta, tāpēc šis efekts tur nedarbosies vispār.

P.S. Ar prieku pieņemšu komentārus par tulkojumu personīgā ziņā. Paldies!

Birkas: pievienojiet atzīmes

Dalīties

Vai esat kādreiz sekojis pieteikšanās lapai, kas tiek parādīta, reģistrējoties konkrētai vietnei? Pirmā lapa, kas parādās ikreiz, kad piesakāties, rada pirmo iespaidu par vietni. The pieteikšanās veidlapas dizains pati noteiks vietnes būtību, un tāpēc tai ir jāatbilst vietnei, uz kuru tā ved.

Patiesi pieteikšanās vai reģistrēšanās veidlapas ir viens no svarīgākajiem elementiem, ko satur tīmekļa lapa, un tāpēc šo tiešsaistes veidlapu izstrāde ir viena no svarīgākajām iezīmēm, kad runa ir par vietnes izstrādi. Veiksmīgi izveidota pierakstīšanās forma arī mudina, kā arī ļauj apmeklētājiem kļūt par biedru, abonentu vai klientu konkrētam uzņēmumam. Izskatīga, radoša, kā arī vizuāli pievilcīga pierakstīšanās veidlapa noteikti veicinās auglīgu apmeklētāja konversijas ātrumu, ja visas pārējās funkcijas ir pareizi saskaņotas.

Efektīvas un tīras pieteikšanās/reģistrēšanās veidlapas izstrāde prasa daudz radošuma no dizainera, jo ir svarīgi, lai vietnei būtu pievilcīga un izcila forma, lai tā būtu veiksmīga un efektīva.

Daži ļoti efektīvi un pievilcīgi pieteikšanās veidlapu modeļi

Ir dažas reģistrācijas veidlapas, kas sastāv no pamata un ir izveidotas, izmantojot dažas elementāras tīmekļa projektēšanas koncepcijas. Neatkarīgi no šiem elementārajiem, ir daži, kas zināmā mērā var izskatīties nedaudz atšķirīgi. Tomēr ir daži citi, kas ir ārkārtīgi iespaidīgi, kā arī radoši, kas kategoriski pievilina apmeklētāju ienākt vietnē.

Dažās no šīm veidlapām ir iespēja ievadīt detalizētu personisko kontaktinformāciju, un tajās ir iekļauta vārds, e-pasts, kontakttālrunis un citas lietas. Šo formu stili pārsniedz parasto, un daži no tiem pat ir izdomājuši ar roku rakstītu kaligrāfiju.

Dažas pieteikšanās lapas piedāvā dažādus novatoriskus teksta ievades stilus, kā arī dažas ļoti novatoriskas opcijas vai atlasītas izvēlnes. Šāda veida veidlapas patiešām prasa no dizaineriem augstu radošuma līmeni, it īpaši, ja runa ir par telpas noformēšanu starp dažādiem slāņiem, lielu un viegli lasāmu tekstu izveidi un sānjoslas saišu izveidi, kas tieši savienojas ar viņu e-pastiem.

Konkrēts veidlapas veids sniedz dramatisku ieskatu jaunā datu ievades laukā. Lietotāji var piekļūt pieteikšanās saitei no pašas mājas lapas un izsaukt pieteikšanās lodziņu, ko darbina jQuery. Šis konkrētais veidlapas veids nāk ar Ajax, ko tas izmanto, lai vadītu ārējo PHP skriptu. Tas novērtē informāciju, ko lietotājs ir izmantojis, piesakoties, un pēc apstrādes vai nu piešķir lietotājam atļauju, vai liedz to.

Vairāki pieteikšanās veidlapu modeļi, ko mēs redzam mūsdienās, patiešām ir ārkārtīgi dinamiski un sastāv no dažiem jaunākajiem dizainiem. Viens no šiem jaunā laikmeta dizainiem sniedz brīnišķīgu ieskatu dažādos datu ievades laukos. Lietotāji var viegli doties uz sākumlapu un noklikšķināt uz saites pieteikšanās lapā, lai izsauktu dinamisku pieteikšanās lodziņu, ko nodrošina jQuery. Šis konkrētais Pieslēgties formā nāk klajā ar iespēju piesaistīt ārējo PHP skriptu, kas palīdz novērtēt dažādu pieteikšanās informāciju un atkarībā no rezultāta iznākuma; tas vai nu ļauj ievadīt lietotājam, vai liedz to.

Pieteikšanās veidlapu piemēri

Designmodo pieteikšanās veidlapa no impresionistu lietotāja interfeisa

Lai gan no pirmā acu uzmetiena šķiet, ka ievades nedaudz paceļas gaisā, jo gradienti un vektoru realizācija, kas novietota uz teksturēta audekla, rada nelielu līdzsvarotu harmoniju. Tomēr šī rīka padomu iedvesmotā pamata pieteikšanās veidlapa izskatās interesanta un unikāla.

Haziq Mir pieteikšanās

Dizaineris novieto laukus rindā, padarot kopējo komponentu piemērotu salīdzinoši standarta šaurām galvenēm. Lai gan maiga, silta brūngana krāsa apvienojumā ar iekšējām ēnām piešķir katram priekšmetam patīkamu, gludu un pabeigtu izskatu, bet tumšajai versijai ir izsmalcinātāks izskats.

Zvaigžņu pieteikšanās, uzlabojis Haziq Mir

Pirmā lieta, kas piesaista uzmanību, ir fons, kas var kļūt par lielisku papildinājumu jebkuram sarežģītam vai ilustratīvam dizainam, kur izrādi vada dabiskas faktūras, piemēram, koks vai papīrs. Lai gan gludās ievades un pelēcīgā krāsa ir ideāli piemērota piezīmjdatora stila audeklam, milzīgā zilā poga “Sign In” piesaista visu uzmanību ar savu lielisko vizuālo svaru.

Sergeja Šmita pieteikšanās veidlapa

Šis ir lielisks piemērs tumšai pieteikšanās formai, kas izstaro izsmalcinātības tēlu, nebūdams brutāls. Glancēti brūnā poga acumirklī iekrīt acīs, aicinot rīkoties. Neliels metālisks pārslēgs piešķir kompozīcijai jauku skeuomorfisku nokrāsu.

Pieteikšanās veidlapa personīgai pieteikšanai no Ionut Zamfir

Veidlapas fons atdarina parasto piezīmju grāmatiņas virsmu, kur mēs parasti veicam piezīmes. Koka audekls uzlabo kopējo estētiku. Lai gan spīdīgās gradienta pogas nedaudz atraujas no motīva, šeit plakanas vai ieskicētas pogas varētu izskatīties dabiskākas, tomēr komponents rada harmonijas sajūtu.

Pierakstīties logrīks

Dizainere demonstrē smalku un elegantu tīmekļa formu, kuras wow faktoru rada tā daļēji caurspīdīgais fons. Tam ir optimāls kontrasts, kas atšķir burtus un ikonas no fona, un, kā parasti, milzīgs, gandrīz izliekts CTA.

iPhone lietotņu pieteikšanās veidlapa

Mason Yarnell iPhone lietotņu pieteikšanās veidlapa ir izpildīta iepriekšējo gadu iOS dizaina labākajās tradīcijās. Ir daudz glancētu lietu, dekoratīvas lentes, reljefas ikonas un, protams, sarežģīti teksturēti foni. Tomēr kopumā komponents izskatās tīrs, svaigs un ar daudz gaisa.

Viegla pieteikšanās, ko veicis Maxwell Barvian

Maxwell Barvian vieglā pieteikšanās izskatās tieši tā, kā norādīts uz datu plāksnītes: viegla, tīra un izteiksmīga. Pelēkās un baltās krāsas kopā var radīt brīnumus, viegli nodrošinot lietotājiem lielisku pieredzi. Kā jau pieklājas, labākai pārveidošanai galvenā poga ir apzināti liela izmēra un nokrāsota spilgtā tonī.

Kā izveidot pieteikšanās veidlapu, izmantojot CSS3 un jQuery

Tā ir neliela apmācība, kas ir piemērota pat iesācēju tīmekļa izstrādātājiem. Lai gan dizains ir diezgan vienkāršs un ievades lauki sākumā izskatās kā pogas gradienta stila dēļ; tomēr tas ir reprezentatīvs piemērs gludai un labi strukturētai tīmekļa formai, kas var noderēt daudzās lietotāja saskarnēs.

Pieteicies Paresh Khatri

Daži Paresh Khatri pieteikšanās dati ir niecīgs tīmekļa komponents, kas lepojas ar košu krāsu shēmu un rūpīgu uzmanību detaļām. Rīka padoma iedvesmotā forma, apļveida fotoattēla sīktēls, iestrādāta apstrāde, daļēji caurspīdīgs fons padara šo dizainu viegli izceltu no pūļa.

Lietotnes pieteikšanās

Uzmanīgi izkārtojot katru formas elementu vienu virs otra, Mynus izdodas sasaistīt dizainu kopā un novērst fonu, kas tikai novērstu uzmanību no izsmalcinātā ekrāna. Krāsojums, malas, formas, noapaļoti stūri, tipogrāfija, baltās vietas daudzums un reljefi padara dizainu unikālu un izteiksmīgu.

Ādama Vitkrofta tumšā pieteikšanās

Ādama Vitkrofta tumšā pieteikšanās izskatās izsmalcināta un izcila. Lieliska fontu izvēle tandēmā ar kontrastējošām krāsām nodrošina lietotājiem optimālu lasāmību. Poga “Pierakstīties”, pelēcīgie glifi un slēdzis izskatās nedaudz nevainojami, tomēr tie lieliski saplūst vidē.

Lietotāja pieteikšanās

Lietotāja pieteikšanās ir silta krēmveida krāsa, kas izraisa pozitīvas sajūtas. Oranžs un zils tiek izmantots kā dekoratīvs pieskāriens, kas piešķir pievilcību un padara formu piemērotu dažādiem dizainiem. Uz gradientu balstīta CTA ar izliektu izskatu vienkārši uzkrīt jums, aicinot uz darbību.

Čārlija Vaita ātrā pieteikšanās

Čārlija Vaita Snappy Login ir interesanta tīmekļa veidlapas versija, kurai ir vienkāršs, taču oriģināls izskats, galvenokārt pateicoties plakanām caurspīdīgām ievadēm. Lai gan teksts laukos ir nesalasāms, kad fons ir pārāk nomazgāts, tomēr kopumā tam noteikti ir šarms. Dekoratīvais fonts un reljefa poga izskatās izcili un, kā tam vajadzētu būt, piesaista uzmanību.

Ionuta Zamfira Sazzi Login

Ionut Zamfir Sazzi Login piedāvā jauku pagriezienu, ko rada CTA pogas. Primārais krāsojums ir glīti izvēlēts, un akcenta tonis lieliski papildina kopējo estētiku. Veidlapa lieliski izskatās uz monotoniem vai trokšņainiem audekliem, jo ​​īpaši ievades laukos, kas, šķiet, ir dabiski iebūvēti.

Piezīmju grāmatiņas pieteikšanās fināls, ko veica Haziq Mir

Haziq Mir piezīmju bloka pieteikšanās fināls ir vēl viens ilustratīvs mūsu kolekcijas minimālisma veids, kas ir izplānots līdz pēdējai detaļai. Fons satur motīvu kopā, oriģināliem svītrotiem laukiem un elegantai kursīvai tipogrāfijai ir mākslinieciska nojauta.

Stacked Paper pieteikšanās Patrik Larsson

Autors dodas uz tradicionālāku ceļu, izmantojot tīru fonu, standarta kastes ievadei, parasto veidu un mierīgu krāsu paleti. Šeit sarkanā krāsa tiek izmantota kā akcents, piešķirot CTA pārsteidzošu izskatu. Sīkas detaļas kā metāla klips, kā arī koka tekstūra tikai bagātina estētiku.

Šī ir apmācības par dalību balstītas tīmekļa vietnes izveidošanas turpinājums. Lai iegūtu sīkāku informāciju, lūdzu, skatiet iepriekšējo lapu.

Lejupielādējiet kodu

Visu reģistrācijas/pieteikšanās sistēmas avota kodu varat lejupielādēt no tālāk esošās saites:

Lejupielādējamajā failā ReadMe.txt ir ietverti detalizēti norādījumi.

Pieteikšanās forma

Šeit ir pieteikšanās veidlapas HTML kods.

Ielogoties

Mēs pārbaudām saņemto lietotājvārdu un paroli un pēc tam meklējam tos datu bāzē. Šeit ir kods:

function Login() ( if(empty($_POST["lietotājvārds"])) ( $this->HandleError("Lietotājvārds ir tukšs!"); return false; ) if(empty($_POST["parole"])) ( $this->HandleError("Parole ir tukša!"); return false; ) $lietotājvārds = trim($_POST["lietotājvārds"] $parole = trim($_POST["parole"]); >CheckLoginInDB($lietotājvārds,$parole)) (atgriež false; ) $_SESSION[$this->GetLoginSessionVar()] = $lietotājvārds;

Lai identificētu lietotāju kā autorizētu, mēs pārbaudīsim datu bāzē viņa lietotājvārda/paroles kombināciju, un, ja ir ievadīta pareiza kombinācija, mēs iestatīsim sesijas mainīgo.

Šeit ir kods lietotājvārda un paroles meklēšanai.

function CheckLoginInDB($lietotājvārds,$parole) ( if(!$this->DBLogin()) ( $this->HandleError("Pieteikšanās datu bāzē neizdevās!"); return false; ) $lietotājvārds = $this->SanitizeForSQL($ lietotājvārds $pwdmd5 = md5($qry = "Izvēlieties vārdu, e-pastu no $this->tablename ", kur lietotājvārds = "$ pwdmd5""; rezultāts = mysql_query($qry,$this->connection if(!$result || mysql_num_rows($result))<= 0) { $this->HandleError("Kļūda piesakoties." "Lietotājvārds vai parole nesakrīt"); return false; ) atgriezt patiesu; )

Lūdzu, ņemiet vērā, ka mums ir jāsalīdzina paroles vērtība no datu bāzes ar lietotāja ievadītās paroles MD5 šifrēto vērtību. Ja vaicājums atgriež rezultātu, mēs iestatām “autorizētu” sesijas mainīgo un pēc tam novirzām uz aizsargāto saturu. Ja nav rindu ar ievadītajiem datiem, mēs vienkārši novirzām lietotāju uz pieteikšanās formu vēlreiz.

Piekļuve kontrolētām lapām

Lapām, kurām var piekļūt tikai reģistrēti dalībnieki, lapas augšdaļā ir jāatzīmē atzīme.
Ņemiet vērā, ka iepriekš minētajā pieteikšanās kodā mēs iestatām “autorizētu” sesijas mainīgo. Lapu augšdaļā, kuras vēlamies aizsargāt, mēs pārbaudām šo sesijas mainīgo. Ja lietotājs ir autorizēts, mēs viņam parādām aizsargāto saturu, pretējā gadījumā novirzām uz pieteikšanās formu.

Iekļaujiet šo koda paraugu aizsargāto lapu augšpusē:

CheckLogin()) ( $fgmembersite->RedirectToURL("login.php"); iziet; ) ?>

Skatīt failu: piekļuves kontrolēts.php piemēram, lejupielādētajā kodā.

Šeit ir CheckLogin() funkcijas kods.

function CheckLogin() ( session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) ( return false; ) return true; )

Šie ir dalības vietnes izveides pamati. Tagad, kad jums ir pamatzināšanas, varat ar to eksperimentēt un pievienot jaunas funkcijas, piemēram, lapu “Aizmirsu paroli”, lai lietotājs varētu izgūt vai mainīt savu paroli, ja viņš to aizmirst.

Atjauninājumi

2012. gada 9. janvāris
Ir pievienotas paroles atiestatīšanas/paroles maiņas funkcijas.
Kods tagad tiek kopīgots vietnē GitHub.

Licence

Kods tiek koplietots saskaņā ar LGPL licenci. Varat to brīvi izmantot komerciālās vai nekomerciālās vietnēs.

Nav saistītu ziņu.

Komentāri par šo ierakstu ir slēgti.

Vai jums ir vietne? Ja jūsu atbilde uz šo jautājumu ir Jā, tad klasiskajam must have ir pievilcīga pieteikšanās forma. Neatkarīgi no tā, vai tā ir sociālā tīkla vietne vai tiešsaistes modes veikals, e-pasta vietne vai tiešsaistes žurnāls, pirmā lieta, kas piesaista klienta uzmanību, ir pieteikšanās iespēja. Tātad, kāpēc gan neļaut savam klientam gūt vēlamo iespaidu jau pirmajā kontaktā. Lejupielādējiet un iegūstiet savas vietnes izskatu, kas rada mūžīgu pirmo iespaidu.

Noderīgi raksti:

HTML5 apmācība — vienkāršas HTML pieteikšanās veidlapas izveide, izmantojot CSS!

Balta caurspīdīga HTML pieteikšanās veidlapas veidne

Pieteikšanās veidlapa — Orange Skin Type ir viegli lietojama pieteikšanās veidlapas veidne, kuras PSD ir gatava konvertēšanai uz CSS. Tam ir dažādi pogu stili, un tas ir ļoti pielāgojams.

Pamata pieteikšanās veidlapas veidne Bezmaksas HTML

8 Modern & Web 2.0 pieteikšanās/reģistrēšanās paneļi ir pieteikšanās veidlapu kopa ar futūristisku noskaņu ar savdabīgiem un jau izstrādātiem dizainiem. Šīs veidlapas ir slāņveida PSD un ir ļoti rediģējamas. Avots: codepen.io

Black Skin HTML pieteikšanās veidlapas veidne

Modernās pieteikšanās un reģistrācijas veidlapas ar gludu un gudru dizainu izskatās ļoti pievilcīgi. Viedie objekti un formas PSD ir viegli rediģējami, padarot šo veidni ļoti elastīgu un pielāgojamu jūsu vajadzībām.

Dienas/nakts pieteikšanās lapa ir ļoti burvīga HTML pieteikšanās veidne, kurai ir divas variācijas. Spilgtas krāsas pogas uz tumša vai balta fona ļoti piesaista uzmanību, un šī veidne ir viegli rediģējama.

Pieteikšanās/reģistrācijas forma ar paroles mērītāju

Šai veidnei ir paroles mērītājs, un tai ir nevainojami caurspīdīgs izkārtojums ar minimāliem dizaina efektiem. Tiem ir sārta nokrāsa fonam. Tiem ir pielāgota pieteikšanās lapa. Dizains ir balstīts uz vienu PSD slāni, kas padara to viegli rediģējamu. Teksti ir arī rediģējami, un tiem ir pievienoti Google tīmekļa fonti.

Betmena stila tumšā CSS3 pieteikšanās veidlapas lejupielāde

Šai dizainera veidnei ir tumšāks izskats, un tajā ir lieliski rediģējama CSS3 pieteikšanās forma ar vienkāršu dizainu. Šī veidne ir lieliski atsaucīga, un tā darbojas labāk jebkurā ierīcē, mobilajā vai galddatorā. Tas ir izdrukājams un to var pielāgot atbilstoši prasībām. Nišas pieteikšanās veidlapas dizains, šī veidne ir lieliski piemērota lietošanai korporatīvajās un profesionālās WordPress vietnēs.

Vienkārša HTML5 pieteikšanās veidlapas avota koda paraugs

Šīs veidlapas ir lieliski atsaucīgas un nodrošina vieglu, ar vienkāršu jauku izkārtojumu. Viņiem ir arī tumšāks fons ar baltu pieteikšanās veidlapu. Šī veidne ir vislabākā, lai iekļautu un sazinātos ar lapām vietnēs. To izskats padara tos lieliski piemērotus jebkuram vietnes iestatījumiem. Tas ir pilnībā rediģējams.

8 mūsdienīgi HTML pieteikšanās reģistrēšanās paneļi

Šai veidnei ir ārkārtīgi nišas izkārtojums, un tajā ir 8 moderni HTML balstīti reģistrācijas paneļi. Tam ir balts izkārtojums ar ļoti unikālām dizaina struktūrām, kas ir lieliski integrētas, lai radītu pārsteidzošus efektus pieteikšanās veidlapām. Tas ir pilnībā atsaucīgs, un to var rediģēt atbilstoši prasībām. Tas ir lieliski piemērots komerciālām, kā arī emuāru vietnēm.

Pilnīgi vienkārši un pamata veidņu faili, tos var viegli pielāgot, un tie ir draudzīgi pārlūkprogrammai. Veidne lieliski darbojas ar jebkuru ierīci, lielu vai mazu, klēpjdatoru vai planšetdatoru, viedtālruni vai galddatoru. Tā piedāvā vienkāršu pieteikšanās lapu html opcijā. Ir integrēts Google pieteikšanās rīks. Piekļūstiet Google kontam, izmantojot e-pastu un paroli.

Kā savā vietnē izmantot pielāgotu pieteikšanās veidlapu

Pielāgotas pieteikšanās veidlapas izveide savai WordPress vietnei ir diezgan vienkārša, izmantojot jaunākos motīvus un veidnes. Tie ir pilnībā pielāgojami un rediģējami. Tagad rediģējiet pieteikšanās logotipu, lai padarītu to pievilcīgāku. Nomainiet logotipu ar sava zīmola ikonu. Tas palīdz zīmola daļā un parāda skaidru vēstījumu apmeklētājiem. Ir pieejami vairāki spraudņi, kas palīdz izveidot pielāgotu pieteikšanās veidlapu jūsu vietnei. Šos spraudņus ir viegli instalēt, un tie palīdz nodrošināt visnovatoriskākās pieteikšanās lapas, kuras jūsu vietnei ir pilnībā rediģējamas un atsaucīgas. Pielāgotas pieteikšanās veidlapas izmantošana savā vietnē kļūst vienkāršāka.

Kā noformēt / izveidot pieteikšanās veidlapu HTML

Uzņēmējdarbībai ir ļoti svarīgi, lai būtu jauka un radoša pieteikšanās forma. Šis ir pirmais kontaktpunkts daudziem klientiem, un tāpēc ir jāpieliek lielas pūles, lai izveidotu ideāla dizaina pieteikšanās veidlapu. Ir iespējams kodēt visu tīmekļa lapu HTML formātā, un tīmeklī ir pieejamas arī bezmaksas HTML5 un CSS3 pieteikšanās veidlapu lejupielādes. Šīs veidnes var izmantot ar nelielām izmaiņām, un tas ietaupa daudz laika un pūļu, veidojot jebkuru lapu. Daži var dot priekšroku apmaksātu veidņu izmantošanai tīmekļa izstrādei, bet citi var vienkārši ķerties pie tā izveides no nulles.

HTML dienas, nakts pieteikšanās lapas veidne

Ļoti unikāla pieteikšanās lapa ar dienas nakts iestatījumiem, šī veidne ir pilnībā atsaucīga un sola saderību starp pārlūkprogrammām. Tā ir ideāla niša dizaina izkārtojumu un pogu konfigurāciju ziņā. Tam ir vairākas sociālās pieteikšanās iespējas, izmantojot Twitter, Facebook un Google+. Šajā veidnē ir veidlapu paraugi, kuras var viegli pielāgot.

Horizontālās adaptīvās pieteikšanās veidlapas lietotāja interfeisa dizains

Šai veidnei ir horizontāls izkārtojums, un tā solās būt 100% atsaucīga, kas padara tās lieliski pieejamas gan galddatoriem, gan viedtālruņu ierīcēm. To var pielāgot bez jebkādām problēmām. Tam ir vēss debeszils izkārtojums, kas sastāv no nolaižamās izvēlnes un radio pogām. Tas ir lieliski piemērots personīgām reģistrācijas veidlapām un emuāru vietnēm.

Skaista pieteikšanās veidlapa ar jauniem HTML5 atribūtiem

Ar minimālistisku un vienkāršu projektēšanas interfeisu šī veidnes pieteikšanās veidlapa ir lieliski piemērota mūsdienu vietnēm. Šai veidnei ir slāņveida PSD faili, un tai ir viegli pielāgojamas funkcijas. Ir plašs HTML5 atribūtu klāsts, kas padara to tik īpašu un unikālu. Tas ir lieliski saderīgs ar mobilajām ierīcēm, piemēram, viedtālruni un planšetdatoriem. jūs arī varat redzēt.

HTML kodēta pieteikšanās veidlapas veidne

Avots: premiumfreebies.eu | Šai HTML veidnei ir vienkāršs interfeiss, un tai ir minimālistisks dizaina izkārtojums. Tas ir saderīgs ar dažādām pārlūkprogrammām un piedāvā vienkāršu un ātru ielādi. Tas solās būt draudzīgs printerim. Dažas funkcijas ietver Google tīmekļa fontus, sagrieztu PSD, nolaižamo izvēlni, pielāgojamu krāsu motīvu, favicon un sociālās koplietošanas opcijas.

Tumšā HTML pieteikšanās veidlapas veidne

Šai veidnei ir diezgan tumšs izskats. Bet tam ir saprātīgs un nišas izkārtojums, kas sola piedāvāt vieglu navigāciju pa sadaļām. 100% atsaucīga un viegli pielāgojama, šī veidne ir vislabāk piemērota izklaides un žurnālu portāliem. Tas ir bagāts ar īpašībām un viegli ietekmē acis.

Skaista CSS3 pieteikšanās veidlapas veidne

Šīs ir ļoti eleganti izstrādātas un nišas veidnes veidlapām un pieteikšanās lapām. Reģistrācijas veidlapas veidnes html css bezmaksas lejupielāde ir atsaucīga un lieliski darbojas ar jebkuru pārlūkprogrammu, neatkarīgi no tā, vai tā ir IE, Chrome vai Safari. Tam ir tīklenes displejs, un tas sola piedāvāt vienmērīgu navigāciju. Tajā ir sociālās koplietošanas opcijas, kas instalētas mājaslapā.

Tīra dizaina HTML pieteikšanās lapa

Īpaši nišas izkārtojums, šai veidnei ir tumši toņi ar sociālās koplietošanas opcijām, kas integrētas sākumlapā. Šī veidne ir pilnībā pielāgojama, un tā var viegli darboties ar jebkuru pārlūkprogrammu un ierīci. Tajā ir nolaižamā izvēlne un paroles atcerēšanās poga. Tas piedāvā arī ātras ielādes iespēju un solās būt draudzīgs printerim. Tas nāk ar rediģējamiem kodēšanas failiem.

HTML un CSS pieteikšanās veidlapas veidne, izmantojot Asp.Net

Daži programmētāji izmanto arī C# valodu, lai izveidotu HTML pieteikšanās lapu. Programmēšanas valoda programmētājiem piedāvā daudz daudzpusības, kā arī ir viegli apkopot pieteikšanās veidlapu ar C# palīdzību.

JQuery mobilās pieteikšanās veidlapas veidlapa

Administratora pieteikšanās/pierakstīšanās forma, izmantojot PHP veidni