Si të bëni autorizim në php. Formulari i hyrjes dhe regjistrimit me HTML5 dhe CSS3
Përshëndetje miq! Sot duam t'ju sjellim një tjetër mësim CSS! Me të gjithë butonat e radios dhe pikat e lëshimit jashtë rrugës, le të kalojmë në hartimin e formularëve. Në përgjithësi, ne do të krijojmë formularë autorizimi. Sot, pothuajse çdo ueb shërbim, aplikacion, lojë, etj., na ofron (dhe ndonjëherë edhe kërkon) një abonim, që nënkupton nevojën për të pasur një formë përmes së cilës përdoruesi regjistrohet ose futet.
Me këtë në mendje, ne u përpoqëm të zhvillonim disa forma të ndryshme identifikimi, disa prej të cilave u frymëzuan nga idetë e dizajnit nga Interneti. Qëllimi ynë ishte t'i jepnim secilit një lloj të veçantë.
Disa gjëra para se të fillojmë:
* Nuk do të shihni prefikset e shfletuesit në copat e kodit CSS, por ato janë të gjitha aty në kodin burimor.
*Qëllimi i këtij tutoriali është t'ju tregojë potencialin e CSS, veçanërisht CSS3, dhe për këtë arsye interpretimi mund të ndryshojë në IE8 dhe më poshtë. Nëse planifikoni të ofroni mbështetje për këta shfletues, përpiquni të ofroni opsione rezervë.
* Ne nuk përdorim atribute si veprim ose metodë në etiketën e formës, pasi qëllimi ynë është të përqendrohemi në dizajn.
* Këtu përdorim model-box, ku [width]=[gjerësia e elementit]+[padding]+[borders]. Ky model mund të aktivizohet me kodin e mëposhtëm:
*,
*: pas
*:përpara (
kuti-sizing: kufi-kuti;
}
Disa fjalë për mirëdashësinë e përdoruesit
Ju nevojiten formularë për situata të ndryshme ku ndërveprimi midis përdoruesit dhe aplikacionit tuaj është i pashmangshëm: hyrje, komente, reagime dhe shumë raste të tjera. Nëse e vidhosni formularin tuaj, mund të jeni i sigurt se e vidhosni edhe përdoruesin.
Me këtë në mendje, ka disa rregulla që duhet të ndiqni për t'i bërë format tuaja më të mira, më miqësore për përdoruesit. Le të hedhim një vështrim në një përzgjedhje të vogël.
* Shkurtoret: Shkurtoret janë shumë të rëndësishme. Ne nuk po flasim për etiketën "etiketë" tani, ne po flasim për nevojën për të lejuar qartë dhe qartë përdoruesin të kuptojë qëllimin e kësaj apo asaj fushe. Le të jemi të qartë: të gjitha fushat janë të njëjta. Dhe vetëm për shkak se përdoruesi i sheh etiketat, ai e kupton se çfarë duhet të futet në cilën fushë. Përdorni shkurtore, ose ikona, ose çfarëdo tjetër, për sa kohë që përdoruesi kupton gjithçka menjëherë dhe me saktësi.
* Fushat: Sa më tërheqëse të jenë fushat tuaja të hyrjes, aq më të këndshme janë për t'u parë dhe, për rrjedhojë, aq më i kënaqur do të jetë përdoruesi. Krijo pak hapësirë rreth fushave të hyrjes. Mos i futni ato në përmbajtjen tuaj. Fushat e hyrjes duhet të jenë mjaft të mëdha (ato të paktën duhet të përmbajnë atë që po plotësohet). Mos i bëni fushat e hyrjes në miniaturë, duke i detyruar përdoruesit të lundrojnë nëpër to duke përdorur tastet e shigjetave.
* Etiketat + Fushat: Krijoni një lidhje midis fushave tuaja të hyrjes dhe etiketave të tyre përkatëse. Aplikoni atributin "për" në etiketat. Klikimi në fushat e futjes së tekstit është shumë i lehtë, edhe në pajisjet mobile. Klikimi në një kuti kontrolli mund të shkaktojë komplikime, veçanërisht kur bëhet fjalë për navigimin celular. Nëse zbatoni aftësinë për të klikuar në një shkurtore për të kontrolluar një kuti, do ta lehtësoni shumë jetën për përdoruesit. Ne ju rekomandojmë gjithashtu që t'i bëni fushat e hyrjes mjaftueshëm të mëdha për të qenë të dukshme kur shikohen në një pajisje celulare.
* Pozicionet: CSS na lejon të identifikojmë një element nga pozicioni i tij aktual: i pezulluar, i fokusuar, aktiv, i paracaktuar, etj. Është e rëndësishme t'i tregoni përdoruesit se ata janë duke qëndruar pezull mbi diçka që mund të klikojnë ose të nënvizojnë diçka që mund të plotësojnë.
* Butoni i konfirmimit: Butoni i konfirmimit është hapi i fundit kur plotësoni formularin. Duhet të jetë qartë e dukshme. Mos harroni për elementët që inkurajojnë veprimin. Mos përdorni të njëjtin stil për butonin e konfirmimit, bëjeni më argëtues, më tërheqës! Asnjëherë mos përdorni mbishkrimin "Dorëzo"! Ajo është e turpshme! Nëse ky është një formular autorizimi, atëherë përdorni mbishkrimin e duhur "Identifikohu" ose "Identifikohu". Nëse kjo është një formë komenti, përdorni diçka në zhanrin "Post" ose "Lini një koment". Tregojini përdoruesit se çfarë bën butoni.
* Atributet dhe fushat e hyrjes në HTML5: HTML5 na ofron shumë atribute të reja të përshtatshme dhe fusha hyrëse, gjë që lehtëson shumë punën tonë me formularët. Përdorni këto atribute dhe fusha hyrëse sipas nevojës, dhe sigurisht, mos harroni për kthimet për shfletuesit e pambështetur. Mund të lexoni më shumë rreth kësaj në Wufoo.
Pra, ne ju kemi treguar të gjithë informacionin që ju nevojitet! Është koha për të filluar zhvillimin e formave, miq!
Shembulli 1
Siç thamë edhe më parë, ne u përpoqëm që çdo formë të jetë e ndryshme nga të tjerat, për t'u dhënë atyre specifikë. Në këtë shembull, ne do të shikojmë një buton konfirmimi që ka qoshe të rrumbullakosura dhe jep pamjen e të qenit i pavarur nga ekrani.
Shënimi
Pra, shembulli ynë i parë do të jetë mjaft miniaturë, ne nuk do të përdorim shkurtore këtu. Por sigurisht që ne duhet t'u tregojmë përdoruesve se çfarë duhet të shkruajnë në ato fusha, kështu që ne përdorim... ikona! Etiketa të vogla "i".
Shënim: Si zakonisht, ne nuk do të mbulojmë se si të përdorim fontet ikonë si FontAwesome këtu. Nëse dëshironi të studioni këtë temë, mund të vizitoni faqen zyrtare të internetit.
Kemi dy kontejnerë që do të mbështjellin fushën e hyrjes dhe ikonën. Butoni i konfirmimit do të jetë në një enë të veçantë dhe ne po përdorim "button" në vend të "input" me një ikonë brenda.
Ne do të përfshijmë gjithashtu cung për t'i bërë gjërat edhe më të qarta për shfletuesit e mbështetur. Më shumë informacion rreth mbështetjes së shfletuesit për atributin mbajtës të vendndodhjes mund të gjenden në CanIUse.com.
Kodi CSS
Le të fillojmë duke stiluar vetë elementin e formës. Forma do të jetë guaska kryesore e demonstrimeve tona, prandaj jepini një gjerësi dhe vendoseni në qendër duke përdorur margjinat.
Forma-1 (
/* Madhësia dhe pozicioni */
gjerësia: 300 px;
marzhi: 60px automatik 30px;
mbushje: 10 px;
pozicioni: i afërm; /* Për pozicionimin e butonit dërgo */
/* Stilet */
kuti-hije:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
futur 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
kufiri-radius: 5px;
sfond: linear-gradient(#eeefef, #ffffff 10%);
}
Fusha Form-1 (
pozicioni: i afërm; /* Për pozicionimin e ikonës */
}
E rëndësishme: e vendosëm në pozicionim relativ në mënyrë që të pozicionojmë absolutisht butonin e konfirmimit. Ne bëjmë të njëjtën gjë me containers.field në mënyrë që të pozicionojmë absolutisht ikonat.
Duke folur për ikonat, le t'i bëjmë ato menjëherë.
Forma-1 .fusha i (
/* Madhësia dhe pozicioni */
majtas: 0px;
sipër: 0px;
pozicioni: absolut;
lartësia: 36 px;
gjerësia: 36 px;
/* Linjë */
kufiri-djathtas: 1px solid rgba(0, 0, 0, 0.1);
kuti-hije: 1px 0 0 rgba(255, 255, 255, 0.7);
/* Stilet */
ngjyra: #777777;
text-align: qendër;
lartësia e vijës: 42 px;
tregues-ngjarje: asnjë;
}
Shtojmë një vijë të vogël në anën e djathtë të ikonës, duke vendosur kufirin e duhur dhe hijen e kutisë.
Meqenëse duam të luajmë me ngjyrat e tyre për pozicionet :hover dhe :focus, ne u japim atyre një tranzicion të qetë.
Shtesa "pointer-events: asnjë" na lejon të klikojmë në zonën e ikonës dhe të zhvendosim fokusin në fushën e hyrjes që ndodhet më poshtë (d.m.th., ne po klikojmë në vetë fushën).
Tani duhet të stilojmë fushat e hyrjes:
Hyrja e formularit-1,
.forma-1 hyrje (
madhësia e shkronjave: 13 px;
pesha e shkronjave: 400;
/* Madhësia dhe pozicioni */
gjerësia: 100%;
mbushje: 10px 18px 10px 45px;
/* Stilet */
kuti-hije:
futje 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
kufiri-radius: 3px;
sfond: #f9f9f9;
ngjyra: #777;
tranzicioni: ngjyra 0,3s lehtësim;
}
Hyrja e formularit-1 (
margjina-fund: 10px;
}
Duhet të sigurohemi që as ikona dhe as butoni enter nuk mbivendosin tekstin. Kjo mund të bëhet duke i dhënë fushës së hyrjes një mbushje të mirë. Ne gjithashtu vendosëm kufirin e poshtëm në fushën e parë të hyrjes për të shmangur mbivendosjen e fushës së dytë.
Hyrja e formularit 1: rri pezull ~i,
.form-1 hyrje:hover ~ i (
ngjyra: #52cfeb;
}
Hyrja e formës 1: fokus ~i,
.form-1 hyrje: fokus ~ i (
ngjyra: #42A2BC;
}
Hyrja e formularit-1: fokus,
.form-1 hyrje: fokus,
përvijimi: asnjë;
}
Është e rëndësishme të theksohen dy gjëra këtu: ne përdorim një përzgjedhës të lidhur (~) për të ndryshuar ngjyrën e ikonave kur ndërveprojmë me fushat e hyrjes: blu e lehtë për pozicionin e pezullimit, blu e errët për pozicionin aktiv. Dhe për shfletuesin Chrome ne përjashtojmë skicën.
Gjëja e fundit që duhet të dizajnojmë është butoni i konfirmimit. Për shkak të mbivendosjes jo shumë tërheqëse (parametri i mallkuar me indeksin z), duhej ta mbështillnim në një enë në mënyrë që gjithçka të funksiononte. Ndoshta mund ta heqim këtë kontejner, por atëherë do të duhet të përdorim truke të tjera të zbukuruara CSS dhe nuk kemi nevojë për këtë.
Formulari-1 .paraqit (
/* Madhësia dhe pozicioni */
gjerësia: 65 px;
lartësia: 65 px;
pozicioni: absolut;
sipër: 17px;
djathtas: -25px;
mbushje: 10 px;
z-indeksi: 2;
/* Stilet */
sfond: #ffffff;
kufi-rrezja: 50%;
kuti-hije:
0 0 2px rgba(0,0,0,0.1),
0 3px 2px rgba(0,0,0,0,1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}
Gjithçka është mjaft e thjeshtë këtu: ne krijojmë një rreth dhe e vendosim në majë të formës sonë, pak në të djathtë. Hijet e bllokut do të ndihmojnë në theksimin e këtij efekti të mbivendosjes.
Problemi: Hijet e bllokut theksojnë këtë efekt përzierjeje, por ato gjithashtu mund ta prishin atë. Në fakt, ne mund të shohim hijen në kufirin e formës (hapësira midis margjinave dhe kufirit të djathtë të formës).
Në përgjithësi, ne mund t'i fshehim këto hije me maska me të njëjtën ngjyrë sfondi të formës. Dhe kjo vepër është menduar për një pseudo-element!
Formulari-1 .submit:pas (
/* Madhësia dhe pozicioni */
përmbajtja: "";
gjerësia: 10 px;
lartësia: 10 px;
pozicioni: absolut;
krye: -2px;
majtas: 30 px;
/* Stilet */
sfond: #ffffff;
/* Mashtrime të tjera me maska */
kuti-hije: 0 62px e bardhë, -32px 31px e bardhë;
}
Ne kemi tre hije që duhet të fshihen sepse elementi ynë i rrethit është në kryqëzimin e hapësirës midis margjinave dhe mbushjes së djathtë të formularit. Të parën e vendosim sipër elementit të rrethit. Dhe përmes parametrit box-shadow ne simulojmë dy maskat e tjera. Ne e kemi pak të vështirë për ta shpjeguar këtë, prandaj ju rekomandojmë që të hapni mjetin tuaj të zhvillimit dhe të çaktivizoni linjën kuti-shadow në .submit:pas për të kuptuar se çfarë po ndodh këtu. E fundit, por jo më pak e rëndësishme është vetë butoni i konfirmimit:
Butoni Forma-1 (
/* Madhësia dhe pozicioni */
gjerësia: 100%;
lartësia: 100%;
margin-top: -1px;
/* Stilet e ikonave */
madhësia e shkronjave: 1.4em;
lartësia e vijës: 1,75;
ngjyra: e bardhë;
/* Stilet */
kufiri: asnjë; /* Hiq kufirin e paracaktuar */
kufiri-radius: trashëgoj;
sfond: linear-gradient (#52cfeb, #42A2BC);
kuti-hije:
0 1px 2px rgba(0,0,0,0,35),
futje 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);
Kursori: treguesi;
}
Së fundi, ne stilojmë pozicionet e butonit të pezullimit, të fokusit dhe aktiv (të shtypur):
Butoni Forma-1: rri pezull,
butoni .form-1: fokus (
sfond: #52cfeb;
tranzicioni: të gjitha 0.3s lehtësim;
}
Butoni Forma-1: aktiv (
sfond: #42A2BC;
kuti-hije:
futje 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}
Është shumë e thjeshtë: një ngjyrë e fortë për pozicionet e pezullimit dhe fokusit. Por prisni, ka më shumë këtu! Meqenëse ne përdorim gradimin në pozicionin standard dhe gradimet nuk mund të përzihen pa probleme në tekst të fortë, shfletuesi fillimisht çaktivizon gradimin, më pas aplikon ngjyrën e sfondit. Kjo sjellje bën që të shfaqet një blic i bardhë kur qëndroni pezull mbi buton, i cili mendojmë se duket i këndshëm! Është si një blic drite!
Shembulli 2
Shembulli tjetër nuk është aq i thjeshtë dhe ofron disa opsione të reja: një buton "Identifikohu me Twitter" dhe një çelës "Trego fjalëkalimin". Këtu do të na duhet një kod javascript.
Shënimi
Këtu do të përdorim një titull. Ne kemi përdorur h1, por ju mund të përdorni çfarë të doni. Ne përdorëm gjithashtu etiketa të lidhura me fushat e hyrjes duke përdorur atributin "për".
Kodi CSS
Le të fillojmë duke i dhënë disa stilime bazë të gjithë formës:
Forma-2 (
/* Madhësia dhe pozicioni */
gjerësia: 340 px;
marzhi: 60px automatik 30px;
mbushje: 15 px;
pozicioni: i afërm;
/* Stilet */
sfond: #fffaf6;
kufiri-radius: 4px;
ngjyra: #7e7975;
kuti-hije:
0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0,2),
0 0 0 12px rgba(255,255,255,0.4);
}
Ne do të krijojmë një kufi gjysmë transparent duke aplikuar hijet e kutisë.
Tani që i kemi dhënë formës sonë disa stilime bazë, le të punojmë me titullin. Në kokë kemi tre stile të ndryshme: bold (bold), caps (shkronja të mëdha) dhe gri të errët (gri e errët); të theksuara, kapele dhe portokalli, si dhe gri të lehta, të ulëta dhe të lehta. Pra, stili kryesor + 2 shtesë:
Forma-2 h1 (
madhësia e shkronjave: 15 px;
pesha e shkronjave: bold;
ngjyra: #bdb5aa;
mbushje-fund: 8px;
kufiri-fund: 1px solid #EBE6E2;
tekst-hije: 0 2px 0 rgba(255,255,255,0.8);
kuti-hije: 0 1px 0 rgba(255,255,255,0.8);
}
Formulari-2 h1 .hyrja,
.forma-2 h1 .regjistrohuni (
ekrani: inline-block;
tekst-transformim: shkronja të mëdha;
}
Form-2 h1 .hyni (
ngjyra: #6c6763;
mbushje-djathtas: 2px;
}
Formulari-2 h1 .regjistrohuni (
ngjyra: #ffb347;
mbushje-majtas: 2px;
}
Më pas, do të përdorim dy paragrafë që do të vendosen pranë njëri-tjetrit. Secili do të zërë 50% të hapësirës së disponueshme në elementin e formës dhe, falë madhësisë së kutisë "kufitare", mbushja do të llogaritet brenda atij 50%. Kështu, ne mund të krijojmë një hendek midis këtyre dy elementeve.
Forma-2 .noton (
gjerësia: 50%;
noton: majtas;
padding-top: 15px;
kufiri-lart: 1px solid rgba(255,255,255,1);
}
Form-2 .float:i pari i llojit (
mbushje-djathtas: 5px;
}
Form-2 .float:i fundit i llojit (
mbushje-majtas: 5px;
}
Predhat tona janë të ekspozuara. Le të stilojmë elementët brenda tyre! Ne kemi një shkurtore dhe një fushë hyrëse. Në këtë shembull, ikona brenda shkurtores:
Etiketa Forma-2 (
shfaqja: bllok;
mbushje: 0 0 5px 2px;
kursori: treguesi;
tekst-transformim: shkronja të mëdha;
pesha e shkronjave: 400;
tekst-hije: 0 1px 0 rgba(255,255,255,0.8);
madhësia e shkronjave: 11 px;
}
Forma-2 etiketa i (
margin-djathtas: 5px; /* Hendeku midis ikonës dhe tekstit */
ekrani: inline-block;
gjerësia: 10 px;
}
Shënim: Përdorimi i kursorit: treguesi në etiketa i ndihmon përdoruesit të kuptojnë se mund të klikojnë mbi atë element. Kjo është një pikë shumë e rëndësishme.
Hyrja e formularit-2,
Hyrja .form-2 (
font-familja: "Lato", Calibri, Arial, sans-serif;
madhësia e shkronjave: 13 px;
pesha e shkronjave: 400;
shfaqja: bllok;
gjerësia: 100%;
mbushje: 5 px;
margjina-fund: 5px;
kufiri: 3px solid #ebe6e2;
kufiri-radius: 5px;
tranzicioni: të gjitha 0.3s lehtësim;
}
Mos harroni për pozicionet e drejtimit dhe fokusimit:
Hyrja e Form-2: rri pezull,
.form-2 hyrje: rri pezull (
kufiri-ngjyra: #CCC;
}
Etiketa Form-2: hover ~ input (
kufiri-ngjyra: #CCC;
}
Hyrja e formularit-2: fokus,
.form-2 hyrje: fokus (
kufiri-ngjyra: #BBB;
përvijimi: asnjë; /* Hiq konturin e Chrome */
}
Shihni se si ne përdorim përzgjedhësin përkatës (~) për të lëvizur fushat e hyrjes kur kalojmë mbi etiketa. E bukur, apo jo?
Tani, në lidhje me butonat e konfirmimit. Por prisni, pasi që të dy notojnë në enën e tyre, ne duhet të aplikojmë clearfix për to. A keni harruar se si duhet ta bëjmë këtë?
Pastro: pas (
përmbajtja: "";
shfaqja: tabela;
qartë: të dyja;
}
Hyrja e formularit-2,
.form-2 .log-twitter (
/* Madhësia dhe pozicioni */
gjerësia: 49%;
lartësia: 38 px;
noton: majtas;
pozicioni: i afërm;
/* Stilet */
kuti-hije: inset 0 1px rgba(255,255,255,0.3);
kufiri-radius: 3px;
kursori: treguesi;
/* Stilet e shkronjave */
font-familja: "Lato", Calibri, Arial, sans-serif;
madhësia e shkronjave: 14 px;
lartësia e vijës: 38 px; /* Njësoj si lartësia */
text-align: qendër;
pesha e shkronjave: bold;
}
Hyrja e formularit-2 (
diferencë-majtas: 1%;
sfond: linear-gradient(#fbd568, #ffb347);
kufiri: 1px solid #f4ab4c;
ngjyra: #996319;
tekst-hije: 0 1px rgba(255,255,255,0.3);
}
Forma-2 .log-twitter (
marzh-djathtas: 1%;
sfond: linear-gradient(#34a5cf, #2a8ac4);
kufiri: 1px solid #2b8bc7;
ngjyra: #ffffff;
tekst-hije: 0 -1px rgba(0,0,0,0.3);
tekst-dekorim: asnjë;
}
Të dy butonat kanë 49% gjerësi dhe margjina majtas/djathtas, duke lejuar një hendek të vogël midis tyre. Tani do t'u shtojmë atyre pozicionin e pezullimit dhe pozicionin aktiv.
Hyrja e Form-2: rri pezull,
.form-2 .log-twitter:hover (
kuti-hije:
futje 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
Hyrja e formularit-2: aktive,
.form-2 .log-twitter:active(
sipër: 1px;
}
Falë pozicionimit relativ, ne mund të aplikojmë top: 1px në butonat në pozicionin aktiv për t'i bërë ato të duken sikur po i klikojmë.
E rëndësishme: për shfletuesit që nuk mbështesin box-shadow (dhe ka ende disa), ne përdorim një ndryshim në ngjyrën e sfondit. Klasa "no-boxshadow" do të aplikohet në HTML nga Modernizr në rast se shfletuesi nuk mbështet hijet e kutisë. Ky është një shembull shumë i mirë se si mund të krijojmë shpejt një rikthim për shfletuesit më të vjetër:
No-boxshadow .form-2 input:hover (
sfond: #ffb347;
}
No-boxshadow .form-2 .log-twitter:hover (
sfond: #2a8ac4;
}
kodi javascript
Hej, a e kemi harruar veçorinë tonë të vogël të shfaqjes së fjalëkalimit? Kjo është pikërisht ajo që ne do të bëjmë tani! Së pari, le të zbulojmë, a e dini se nuk mund të ndryshojmë atributin "lloj" të një elementi hyrës? E pamundur! Për ta bërë etiketën "shfaq fjalëkalimin" një ndërprerës, duhet të heqim fushën ekzistuese të fjalëkalimit dhe të krijojmë një fushë për futjen e tekstit.
Ne gjetëm një të vogël nga Aaron Saray që do të na ndihmojë të kryejmë punën. Le t'i hedhim një sy:
$(funksion())(
$(".shfaq fjalëkalimin").each(funksion(indeks,hyrje) (
var $input = $(hyrje);
$("
").append(
$(""). kliko (funksioni () (
var ndryshim = $(this).është (":kontrolluar") ? "tekst" : "fjalëkalim";
var rep = $(" ")
.attr("id", $input.attr("id"))
.attr("emri", $input.attr("emri"))
.attr("class", $input.attr("class"))
.val($input.val())
.insertPara ($input);
$input.remove();
$input = rep;
})
).append($("
Ai tregon të gjithë elementët hyrës me klasën .showpassword.
Krijon një kontejner të ri (.opt).
Brenda këtij kontejneri, ai krijon një kuti kontrolli me një etiketë të bashkangjitur në të.
Ai fut një kontenier pas elementit prind të fushës.showpassword.
Kur klikohet një kuti, ajo fshin elementin e hyrjes .showpassword dhe krijon një tjetër në vend të tij, por me atributin përkatës "lloj".
Le të mos harrojmë për stilimin e kutisë së zgjedhjes dhe shkurtores së re.
Forma-2 p: lloji i fundit (
qartë: të dyja;
}
Forma-2 .opt (
text-align: djathtas;
margin-djathtas: 3px;
}
Etiketa Forma-2 (
ekrani: inline-block;
margjina-fund: 10px;
madhësia e shkronjave: 11 px;
pesha e shkronjave: 400;
tekst-transformoj: shkronjë shkronjë;
}
Hyrja e formularit-2 (
vertikale-linjë: në mes;
diferenca: -1px 5px 0 1px;
}
E fundit, por jo më pak e rëndësishme, duhet të shtojmë disa rreshta të kodit jQuery për të ndryshuar ikonën kur kontrollohet kutia e kontrollit! Është shumë e thjeshtë, por tepër efektive!
$("#showPassword"). kliko(funksion())(
if($("#showPassword").is (":kontrolluar")) (
$(".icon-lock").addClass("icon-zhbllokimi");
$(".icon-zhbllokimin").removeClass("ikon-kyçja");
) tjeter (
$(".icon-zhbllokimin").addClass("icon-lock");
$(".icon-lock").removeClass("icon-zhbllokimi");
}
});
Shembulli 3
Ky shembull u frymëzua nga një pjesë e vjetër e Virgil Pana në Dribbble. Fatkeqësisht, ai duket se e ka hequr punën nga faqja, kështu që ne nuk do të jemi në gjendje t'ju tregojmë idenë origjinale. Gjithsesi, me siguri e keni marrë me mend se ky shembull na tregon qartë se si mund të krijoni një efekt të jashtëzakonshëm ndriçimi duke përdorur CSS.
Shënimi
Shikoni teksa prezantojmë një veçori të re në këtë formular: opsionin "Më mbaj mend". Kjo është diçka specifike për format e hyrjes, pasi ky opsion i lejon aplikacionit të kujtojë përdoruesit e regjistruar.
Kodi CSS
Forma-3 (
pesha e shkronjave: 400;
/* Madhësia dhe pozicioni */
gjerësia: 300 px;
pozicioni: i afërm;
marzhi: 60px automatik 30px;
mbushje: 10 px;
vërshoj: i fshehur;
/* Stilet */
sfond: #111;
kufiri-rreze: 0.4em;
kufiri: 1px solid #191919;
kuti-hije:
futje 0 0 2px 1px rgba(255,255,255,0,08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
Hija nën formularin e hyrjes duket e veçantë për shkak të rrezes negative. Ne mund të përdorim hijen si kjo.
Le të zhytemi pak më thellë në strukturën e formës sonë. Sa i përket fushave, këtu përdorim dy etiketa p që mbështjellin etiketën dhe elementin hyrës, të dyja janë float. Kjo do të thotë që ne duhet të aplikojmë clearfix në kontejnerët tanë (shih shembullin e mëparshëm).
Le të shtojmë disa stile në etiketat tona dhe fushat e futjes së tekstit dhe fjalëkalimit, dhe të finalizojmë pozicionet e tyre të lëvizjes dhe fokusimit:
Etiketa e formularit-3 (
/* Madhësia dhe pozicioni */
gjerësia: 50%;
noton: majtas;
padding-top: 9px;
/* Stilet */
ngjyra: #ddd;
madhësia e shkronjave: 12 px;
tekst-transformim: shkronja të mëdha;
ndarja e shkronjave: 1 px;
tekst-hije: 0 1px 0 #000;
teksti-indent: 10px;
pesha e shkronjave: 700;
kursori: treguesi;
}
Hyrja e formularit-3,
Hyrja .form-3 (
/* Madhësia dhe pozicioni */
gjerësia: 50%;
noton: majtas;
mbushje: 8px 5px;
margjina-fund: 10px;
madhësia e shkronjave: 12 px;
/* Stilet */
sfond: linear-gradient(#1f2124, #27292c);
kufiri: 1px solid #000;
kuti-hije:
0 1px 0 rgba(255,255,255,0.1);
kufiri-radius: 3px;
/* Stilet e shkronjave */
font-familja: "Ubuntu", "Lato", sans-serif;
ngjyra: #fff;
Hyrja e formularit-3: rri pezull,
.form-3 hyrja:hover,
.form-3 etiketa:hover ~ hyrje,
.form-3 etiketa:hover ~ input (
sfond: #27292c;
}
Hyrja e formularit-3: fokus,
.form-3 hyrje: fokus (
box-hije: inset 0 0 2px #000;
sfond: #494d54;
kufiri-ngjyra: #51cbee;
përvijimi: asnjë; /* Hiq konturin e Chrome */
}
Tani që kemi fusha tërheqëse të hyrjes, duhet të krijojmë një kuti të vogël kontrolli për opsionin "Më mbaj mend", si dhe një buton konfirmimi. Këto dy gjëra do të rreshtohen pranë njëra-tjetrës:
Forma-3 p:fëmija n-të(3),
.form-3 p:nth-child(4) (
noton: majtas;
gjerësia: 50%;
}
Ne do të përdorim përzgjedhës të avancuar CSS për t'i përcaktuar ato, por ju mund ta përdorni klasën nëse dëshironi (ose nëse duhet, për të mbështetur shfletuesit e vjetër). Gjithsesi, le të fillojmë të dizajnojmë kutinë e zgjedhjes dhe etiketën e saj:
Etiketa e formularit-3 (
gjerësia: auto;
float: asnjë;
ekrani: inline-block;
tekst-transformoj: shkronjë shkronjë;
madhësia e shkronjave: 11 px;
pesha e shkronjave: 400;
ndarja e shkronjave: 0px;
teksti-indent: 2px;
}
Hyrja e formularit-3 (
margjina-majtas: 10px;
vertikale-linjë: në mes;
}
Meqenëse kjo shkurtore është shumë e ndryshme nga të tjerat, duhet të ndryshojmë disa gjëra për ta bërë atë plotësisht të saktë. Është mirë që fillimisht të përjashtohen të gjitha stilet e ekspozuara më parë. Sa i përket kutisë së zgjedhjes, do të shtojmë një diferencë të vogël në anën e djathtë të saj në mënyrë që etiketa të mos ngjitet me të, dhe gjithashtu do të rregullojmë pak shtrirjen vertikale.
Më në fund, butoni ynë i konfirmimit me pozicionin e pezullimit:
Hyrja e formularit-3 (
/* Gjerësia dhe pozicioni */
gjerësia: 100%;
mbushje: 8px 5px;
/* Stilet */
kufiri: 1px solid #0273dd; /* Tërhiqem */
kufiri: 1px solid rgba(0,0,0,0.4);
kuti-hije:
futje 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
kufiri-radius: 3px;
sfond: #38a6f0;
kursori: treguesi;
/* Stilet e shkronjave */
font-familja: "Ubuntu", "Lato", sans-serif;
ngjyra: e bardhë;
pesha e shkronjave: 700;
madhësia e shkronjave: 15 px;
tekst-hije: 0 -1px 0 rgba(0,0,0,0.8);
}
Hyrja e formularit 3: rri pezull (
kuti-hije: inset 0 1px 0 rgba(255,255,255,0.6);
}
Hyrja e formularit-3: aktive (
sfond: #287db5;
box-hije: inset 0 0 3px rgba(0,0,0,0.6);
kufiri-ngjyra: #000; /* Tërhiqem */
kufiri-ngjyra: rgba(0,0,0,0.9);
}
No-boxshadow .form-3 input:hover (
sfond: #2a92d8;
}
Por ku është efekti i premtuar i ndriçimit? Pra, miq, le të shkojmë tek ajo tani. Do të na duhen tre elementë:
* një për vijën e gradimit nga maja e formularit
*një për blicin e vogël në rreshtin e mëparshëm
* një për reflektimin e madh në anën e djathtë të formularit
Le të fillojmë me dy elementët e parë me pseudo elementë në etiketën e formës.
/* Linja e gradientit */
.forma-3:pas (
/* Madhësia dhe pozicioni */
përmbajtja: "";
lartësia: 1 px;
gjerësia: 33%;
pozicioni: absolut;
majtas: 20%;
krye: 0;
/* Stilet */
sfond: linear-gradient (majtas, transparent, #444, #b6b6b8, #444, transparent);
}
/* Blic i vogël */
.forma-3:para (
/* Madhësia dhe pozicioni */
përmbajtja: "";
gjerësia: 8 px;
lartësia: 5 px;
pozicioni: absolut;
majtas: 34%;
krye: -7px;
/* Stilet */
kufi-rrezja: 50%;
kuti-hije: 0 0 6px 4px #fff;
}
Më në fund, reflektimi ynë i dritës. Prit, ne nuk kemi mjaft pseudo-elementë, apo jo? Mos u shqetësoni, ne do të përdorim elementin tonë të paragrafit të parë për këtë.
Form-3 p:nth-child(1):para(
/* Madhësia dhe pozicioni */
përmbajtja: "";
gjerësia: 250 px;
lartësia: 100 px;
pozicioni: absolut;
krye: 0;
majtas: 45 px;
/* Stilet */
transformimi: rrotullohet (75 gradë);
sfond: linear-gradient(50deg, rgba(255,255,255,0.15), rgba (0,0,0,0));
tregues-ngjarje: asnjë;
}
E rëndësishme: Do t'ju duhet të çaktivizoni ngjarjet e klikimeve duke përdorur parametrin pointer-events. Nëse nuk e bëni këtë, nuk do të mund të klikoni në fushat e hyrjes sepse do të ketë një shtresë tjetër sipër tyre. Do të na duhet të heqim reflektimin në shfletues që nuk mbështesin ngjarjet e treguesit:
No-pointerevents .form-3 p:nth-child(1):para (
shfaqja: asnjë;
}
Shembulli 4
E veçanta e këtij shembulli është mungesa e shkurtoreve. Ose ikona. Po, ne e dimë që kemi thënë më parë se duhet të kemi diçka që u tregon përdoruesve se për çfarë janë fushat. Dhe ne do të kemi gjithçka këtu! Ne do të kemi cung. Dhe për shfletuesit që nuk i mbështesin, ne do të bëjmë shkurtore të dukshme!
Shënimi
Le të prezantojmë atributin "e nevojshme". Kur mbështetet, ai i lejon shfletuesit të kontrollojë nëse një fushë është e plotësuar apo jo dhe të vërtetojë formularin në përputhje me rrethanat.
E rëndësishme: Ne ju rekomandojmë që gjithmonë të krijoni vërtetimin e formularit nga ana e serverit. Mund të përjashtoni lehtësisht një atribut duke përdorur inspektorin e uebit dhe mbështetja e javascript gjithashtu mund të çaktivizohet, kështu që ne nuk ju rekomandojmë të mbështeteni vetëm në vërtetimin nga ana e klientit.
Kodi CSS
Si zakonisht, le të fillojmë me formën dhe titullin, pasi gjithçka është shumë e thjeshtë këtu.
Forma-4 (
/* Madhësia dhe pozicioni */
gjerësia: 300 px;
marzhi: 60px automatik 30px;
mbushje: 10 px;
pozicioni: i afërm;
/* Stilet e shkronjave */
ngjyra: e bardhë;
tekst-hije: 0 2px 1px rgba(0,0,0,0.3);
}
Forma-4 h1 (
madhësia e shkronjave: 22 px;
mbushje-fund: 20px;
}
Më pas kalojmë te elementët hyrës:
Hyrja e formularit-4,
Hyrja .form-4 (
/* Madhësia dhe pozicioni */
gjerësia: 100%;
mbushje: 8px 4px 8px 10px;
margjina-fund: 15px;
/* Stilet */
kufiri: 1px solid #4e3043; /* Tërhiqem */
kufiri: 1px solid rgba(78,48,67, 0,8);
sfond: rgba (0,0,0,0.15);
kufiri-radius: 2px;
kuti-hije:
inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-tranzicioni: të gjitha 0.3s lehtësim;
-moz-tranzicioni: të gjitha 0.3s lehtësim;
-ms-tranzicion: të gjitha 0.3s lehtësim;
-o-tranzicioni: të gjitha 0.3s lehtësim;
tranzicioni: të gjitha 0.3s lehtësim;
/* Stilet e shkronjave */
font-family: "Raleway", "Lato", Arial, sans-serif;
ngjyra: #fff;
madhësia e shkronjave: 13 px;
}
Le të ndryshojmë stilin e cungjeve (ku është e mundur):
Hyrja Form-4::-webkit-input-placeholder (
ngjyra: rgba(37,21,26,0.5);
}
Hyrja Form-4:-moz-placeholder (
ngjyra: rgba(37,21,26,0.5);
tekst-hije: 0 1px 0 rgba(255,255,255,0.15);
}
Hyrja Form-4:-ms-input-placeholder (
ngjyra: rgba(37,21,26,0.5);
tekst-hije: 0 1px 0 rgba(255,255,255,0.15);
}
Më pas, le t'u shtojmë stil elementëve në lëvizje dhe fokusim:
Hyrja e formularit-4: rri pezull,
.form-4 hyrje: rri pezull (
kufiri-ngjyra: #333;
}
Hyrja e formularit-4: fokus,
.form-4 hyrje: fokus,
.form-4 hyrje: fokus (
kuti-hije:
0 1px 0 rgba(255,255,255,0,2),
futje 0 1px 1px rgba(0,0,0,0.1),
0 0 0 3px rgba(255,255,255,0.15);
përvijimi: asnjë;
}
/* Tërhiqem */
.no-boxshadow .form-4 hyrje:fokus,
.no-boxshadow .form-4 hyrje:fokus (
skicë: 1px e bardhë e fortë;
}
Dhe gjithashtu një buton konfirmimi:
Hyrja e formularit-4 (
/* Madhësia dhe pozicioni */
gjerësia: 100%;
mbushje: 8px 5px;
/* Stilet */
sfond: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
kufiri-radius: 5px;
kufiri: 1px solid #4e3043;
kuti-hije:
inset 0 1px rgba(255,255,255,0.4),
0 2px 1px rgba(0,0,0,0.1);
kursori: treguesi;
tranzicioni: të gjitha 0.3s lehtësim;
/* Stilet e shkronjave */
ngjyra: e bardhë;
tekst-hije: 0 1px 0 rgba(0,0,0,0.3);
madhësia e shkronjave: 16 px;
pesha e shkronjave: bold;
font-family: "Raleway", "Lato", Arial, sans-serif;
}
Hyrja e formularit-4: hover (
kuti-hije:
inset 0 1px rgba(255,255,255,0.2),
inset 0 20px 30px rgba(99,64,86,0.5);
}
/* Tërhiqem */
.no-boxshadow .form-4 hyrje:hover (
sfond: #594642;
}
Tani, le të kuptojmë opsionin tonë të rikthimit në rast se nuk ka mbështetje për elementin "vendoshor". Mbajtësi i vendit ose "mbajtësi i vendit" nuk është një element kritik, me sa dimë, përveç nëse mbështeteni plotësisht në të. Në këtë rast, ne vetëm duhet të ofrojmë një opsion rezervë.
Etiketa e formularit-4 (
shfaqja: asnjë;
mbushje: 0 0 5px 2px;
kursori: treguesi;
}
Etiketa Form-4: hover ~ input (
kufiri-ngjyra: #333;
}
No-placeholder .form-4 etiketa (
shfaqja: bllok;
}
Është shumë e thjeshtë: nëse cungët nuk mbështeten, atëherë shkurtoret bëhen të dukshme. Fundi i historise.
Shembulli 5
Shembulli i fundit na paraqet një formë minimaliste në stil xhami. Ne nuk do të përdorim shkurtore dhe gjithçka këtu do të duket kompakte. Do ta rrotullojmë tekstin e butonit të konfirmimit dhe do të bëjmë që shigjeta të shfaqet në lëvizje.
Shënimi
Paraqitja minimaliste për një formë minimaliste.
Kodi CSS
Forma-5 (
/* Madhësia dhe pozicioni */
gjerësia: 300 px;
marzhi: 60px automatik 30px;
pozicioni: i afërm;
/* Stilet */
kufiri-radius: 5px;
kuti-hije: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}
Le të formatojmë paragrafin dhe fushat e hyrjes:
Forma-5 p (
gjerësia: 70%;
noton: majtas;
kufiri-radius: 5px 0 0 5px;
kufiri: 1px solid #fff;
kufiri-djathtas: asnjë;
}
Hyrja e formularit-5,
/* Madhësia dhe pozicioni */
gjerësia: 100%;
lartësia: 50 px;
mbushje: 0 10px;
/* Stilet */
kufiri: asnjë; /* Hiq kufirin e paracaktuar */
sfond: e bardhë; /* Tërhiqem */
sfond: rgba (255,255,255,0.2);
kuti-hije:
inset 0 0 10px rgba(255,255,255,0.5);
/* Stilet e shkronjave */
font-family: "Montserrat", sans-serif;
teksti-indent: 10px;
ngjyra: #ee4c8d;
tekst-hije: 0 1px 2px rgba(0,0,0,0.3);
madhësia e shkronjave: 20 px;
}
Hyrja e formularit-5 (
kufiri-fund: 1px solid #fff; /* Tërhiqem */
kufiri-fund: 1px solid rgba(255,255,255,0.7);
kufiri-rreze: 5px 0 0 0;
}
Hyrja e formularit-5 (
kufiri-lart: 1px solid #CCC; /* Tërhiqem */
kufiri-lart: 1px solid rgba(0,0,0,0.1);
kufiri-radius: 0 0 0 5px;
}
Le të shtojmë disa stilime dhe mbajtëse të vendndodhjes këtu:
Hyrja e formularit-5: rri pezull,
.form-5 hyrja:hover,
.form-5 hyrje: fokus,
.form-5 hyrje: fokus (
sfond: #f7def7; /* Tërhiqem */
sfond: rgba (255,255,255,0.4);
përvijimi: asnjë;
}
Hyrja Form-5::-webkit-input-placeholder (
ngjyra: #fff;
}
Hyrja Form-5:-moz-placeholder (
ngjyra: #fff;
tekst-hije: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
Hyrja Form-5:-ms-input-placeholder (
ngjyra: #fff;
tekst-hije: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
Tani, është koha për të kaluar te butoni i konfirmimit. Elementi i vogël i do të përmbajë një ikonë shigjete, por për momentin nuk do ta bëjmë të dukshëm, vetëm në lëvizje. Vini re se ne po përdorim një element span brenda butonit për të rrotulluar tekstin pa e rrotulluar butonin.
Butoni Forma-5 (
/* Madhësia dhe pozicioni */
gjerësia: 30%;
lartësia: 102 px;
noton: majtas;
pozicioni: i afërm;
vërshoj: i fshehur;
/* Stilet */
sfond:
url (../images/noise.png),
gradient radial (elipsi në qendër, #ee4c8d 0%,#b53467 100%);
kufiri-radius: 0 5px 5px 0;
kuti-hije:
inset 0 0 4px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
kufiri: asnjë;
kufiri-majtas: 1px argjend i fortë;
kursori: treguesi;
lartësia e vijës: 102 px; /* Njësoj si lartësia */
}
Forma-5 butoni i (
pozicioni: absolut;
gjerësia: 100%;
lartësia: 100%;
krye: 0;
majtas: -20px;
madhësia e shkronjave: 64 px;
lartësia e vijës: 109 px;
ngjyra: #8d1645;
errësirë: 0;
tranzicioni: të gjitha 0.2s lehtësim;
}
Hapësira e butonit Form-5 (
shfaqja: bllok;
/* Stilet e shkronjave */
ngjyra: #8d1645;
font-family: "Montserrat", Arial, sans-serif;
madhësia e shkronjave: 20 px;
tekst-hije: 0 1px 0 rgba(255,255,255,0.4);
transformimi: rrotullimi (-90 gradë);
tranzicioni: të gjitha 0.2s lineare;
}
Nëse shfletuesi nuk e mbështet parametrin "transformim", teksti thjesht nuk do të rrotullohet. Jo një humbje e madhe.
Ne gjithashtu shtuam një teksturë delikate në butonin duke aplikuar dy sfonde: një teksturë dhe një gradim radial që qëndron poshtë teksturës.
Tani le të kalojmë te efekti mbi rri pezull, fokus dhe pozicion aktiv. Kur rri pezull, do të bëjmë që elementi i hapësirës të rrëshqasë majtas dhe të shpërndahet dhe të shfaqet një shigjetë:
Butoni Form-5: fokus (
përvijimi: asnjë;
}
Butoni Form-5: shtrirja e rri pezull,
Butoni .form-5: shtrirja e fokusit (
errësirë: 0;
transformoj: rrotullo(-90deg) translateY(-20px);
}
Butoni Form-5: hover i,
butoni .form-5: fokus i (
opaciteti: 0,5;
majtas: 0;
kalim-vonesa: 0.2 s;
}
/* Klikoni në butonin */
Butoni Form-5: hapësirë aktive,
butoni .form-5: aktiv i (
tranzicioni: asnjë;
}
Butoni Form-5: hapësirë aktive (
errësirë: 0;
}
Butoni Form-5: aktiv i (
opaciteti: 0,5;
majtas: 0;
ngjyra: #fff;
}
Kur klikojmë butonin, nuk kemi nevojë për ndonjë tranzicion, kështu që gjithçka duket mjaft e rregullt.
kodi javascript
Le të përdorim disa javascript këtu për të simuluar se si funksionon parametri HTML5 Placeholder në shfletues që nuk e mbështesin atë. Ne do të përdorim shtojcën jQuery nga Mathias Bynens. Ju lutemi referojuni depove për detaje.
Pasi kemi përfshirë jQuery dhe skriptin, ne thjesht e quajmë atë kështu:
$(funksion())(
$("input, textarea").placeholder();
});
Dhe kjo do të shtojë një cung tallës në versionet më të vjetra të shfletuesve.
Kujdes! Ju nuk keni leje për të parë tekstin e fshehur.
Të gjithë ata që zhvillojnë faqe në internet herët a vonë përballen me një detyrë të tillë si autorizimi dhe vërtetimi i përdoruesit, i implementuar pikërisht duke përdorur një gjuhë programimi, dhe jo duke përdorur standardin e protokollit http. Sot do të shikojmë një shembull të krijimit të një autorizimi të thjeshtë duke përdorur gjuhën e programimit PHP dhe do të ruajmë të dhënat e përdoruesit në bazën e të dhënave MySQL.
Metoda më poshtë është e thjeshtë ose, si të thuash, baza për krijimin e një autorizimi normal, por mund ta përdorni lehtësisht, pasi funksionon mjaft mirë, dhe gjithashtu mund ta përmirësoni vetë këtë metodë dhe ta zbatoni në faqen tuaj të internetit.
Kjo metodë bazohet në sesione, por unë përdor gjithashtu cookie këtu, në mënyrë që shfletuesi të kujtojë përdoruesin që vërtetoi herën e fundit, në mënyrë që të mos futni hyrjen çdo herë, sigurisht që mund ta ruani fjalëkalimin në cookie, por kjo nuk është i sigurt, edhe nëse është i koduar. Për të përfunduar seancën, thjesht mbyllni shfletuesin dhe hapeni përsëri.
Krijimi i objekteve në bazën e të dhënave
Le të kalojmë në praktikë. Së pari, le të krijojmë një tabelë për ruajtjen e të dhënave të përdoruesit në bazën e të dhënave MySQL. Unë sugjeroj përdorimin e një strukture të thjeshtë tabele ( Sigurisht, ju mund ta plotësoni atë me diçka, databaza ime quhet test, dhe tabela është përdorues):
Krijoni testin e tabelës.users (user_id int (11) të nënshkruar jo të pavlefshëm auto_increment, user_login varchar (30) jo null, user_password varchar (32) jo null, çelës parësor (user_id)) motori = karakteri myisam i vendosur utf8 kolati utf8_general_ci;
Dhe le të shtojmë menjëherë një hyrje në këtë tabelë:
Fut vlerat në test.users (user_login, user_password) ("mylogin","202cb962ac59075b964b07152d234b70")
Në total kemi marrë:
- Identifikohu– mylogin;
- Fjalëkalimi -;
Sigurisht, ne do ta ruajmë fjalëkalimin në formë hash, pasi ruajtja e fjalëkalimit në tekst të qartë është, për ta thënë butë, jo e sigurt. Hash-i ynë i mësipërm i fjalëkalimit është 123, kështu që kur të vendosim fjalëkalimin në formular, do të fusim saktësisht 123, dhe jo.
Krijimi i një formulari regjistrimi
Në mënyrë që përdoruesi të regjistrohet vetë, të bëjë një formular, të dhënat nga i cili do të dërgohen në dosjen e përpunimit të regjistrimit, d.m.th. të regjistrohet në bazën e të dhënave. Për shembull, këtu është mënyra më e thjeshtë:
0) ( $error = "Ka tashmë një përdorues me këtë hyrje"; ) // Nëse jo, atëherë shtoni një përdorues të ri if(!isset($error)) ( $login = mysql_real_escape_string(trim(htmlspecialchars($_POST[ "login" ]))) // Hiq hapësirat dhe hash fjalëkalimin $password = md5(trim($_POST["password"])); user_password=" ".$password.""); gabim;) ) //si parazgjedhje të dhënat do të dërgohen në të njëjtin skedar printimi<<< html
html; ?>Nga rruga, me këtë metodë është më mirë të përdorni shkronja latine për hyrje ( ato. anglisht), nëse doni të shkruani një hyrje në Rusisht, do të duhet të rregulloni pak kodin. Ju mund ta emërtoni skedarin si të dëshironi ( për testin kam përdorur reg.html).
Shënim! Për testim, përdor vetëm një skedar, e quajta mylogin.html (kodi i skedarit më poshtë). Mund ta përdorni në skedarët tuaj dhe t'i quani si të doni, unë e përshkruaj vetë procesin e autorizimit këtu, kështu që mund ta aplikoni kudo. Nga rruga, në të gjithë skedarët do të duhet të përdorni funksionin session_start(); në mënyrë që të mund të kontrolloni nëse përdoruesi është i autorizuar apo jo. Dhe një gjë tjetër, sigurisht, shkruani cilësimet tuaja për t'u lidhur me bazën e të dhënave.
Krijimi i një formulari autorizimi
"." Jeni të identifikuar
Ato. ne e kemi kontrolluar seancën dhe mund të hapim akses në të dhëna të caktuara"; ) else ( $login = ""; //kontrollo skedarin, ndoshta ai tashmë e ka vizituar këtu nëse (isset($_COOKIE["CookieMy"]))( $ login = htmlspecialchars( $_COOKIE["CookieMy"]);<<< html
Shënim! Nëse papritmas analizuesi juaj php refuzon të punojë, d.m.th. Vetë kodi php shfaqet në ekranin tuaj, atëherë thjesht nuk keni të aktivizuar përpunimin PHP në skedarët html. Cilësimet bëhen në skedarin e konfigurimit të serverit të uebit httpd.conf (nëse apache):
Aplikacioni AddType/x-httpd-php .php .html
Në IIS, në dritaren Add Module Mapping, shtoni *.php në *.html, të ndara me presje. Kjo është nëse e bëni në shtëpi në serverin tuaj të internetit, dhe nëse i bëni të gjitha këto në hoster, atëherë do t'ju duhet t'i shkruani atyre dhe t'i kërkoni që të bëjnë ndryshimet e nevojshme që disa hoste i kanë bërë ato.
Unë komentova kodin, kështu që mendoj se gjithçka duhet të jetë e qartë. Më lejoni t'ju kujtoj edhe një herë se në të gjithë skedarët, përmbajtjet e të cilëve nuk dëshironi t'u tregoni përdoruesve të paautorizuar, duhet të shkruani session_start, dhe, mbase kjo është e gjitha. Nëse keni pyetje, pyesni në komente. Paç fat!
Pershendetje te gjitheve. Pra, ne kemi mësuar disa elementë për të krijuar forma. Është koha për të kombinuar njohuritë tona për të zgjidhur një problem më të madh. Le të krijojmë formën më të thjeshtë për autorizim në faqe. Për ta bërë këtë, na duhen dy fusha, ne krijojmë dhe bashkojmë nënshkrimet në to.
Fusha e parë është për hyrjen, e dyta është për fjalëkalimin. Dhe me të dytin nuk është aq e thjeshtë. Sepse për momentin është vetëm një fushë e futjes së tekstit.
Rezultati në shfletues:
Në mënyrë që teksti i futur në të të zëvendësohet me yll, siç është zakon për një fushë të këtij lloji, duhet të bëni një veprim të thjeshtë. Gjegjësisht, për të zëvendësuar vlerën e atributit lloji në fjalëkalimin:
Rezultati: 
Butoni i paraqitjes së formularit
Ja ku shkoni. Formulari ynë është pothuajse gati. Tani, për të përfunduar krijimin e tij, duhet të krijoni një buton që do të përdoret për të dorëzuar formularin. Problemi zgjidhet duke përdorur një etiketë me llojin dorëzojë.
Nëse butoni duhet të ketë një lloj mbishkrimi, atëherë mund të bëhet duke përdorur atributin vlerë. Varet nga ju t'i caktoni një emër butonit ose jo nëse e bëni këtë, serveri do të marrë këtë emër, si dhe vlerën e butonit.
Si rregull, emri i butonit të paraqitjes së formularit nevojitet kur formulari ka disa butona, secili prej të cilëve kryen një veprim specifik. Falë kësaj, serveri, duke marrë emrin dhe vlerën e butonit nga shfletuesi, kupton se cilin buton klikoi përdoruesi dhe çfarë, në përputhje me rrethanat, duhet të bëhet.
Si rezultat, kodi për formularin tonë do të jetë si më poshtë:
Rezultati në shfletues: 
Autorizimi dhe regjistrimi janë një nga funksionet më të rëndësishme të çdo faqe interneti, të cilat në masë të madhe përcaktojnë fytyrën e burimit. Numri i përdoruesve në bazën tuaj të të dhënave varet drejtpërdrejt nga disponueshmëria dhe lehtësia e regjistrimit, dhe lehtësia e autorizimit ndikon në mënyrë dramatike në UX dhe dëshirën e përdoruesit për të vazhduar marrëdhënien me ju. Gjithashtu, formularët e thjeshtë, të kuptueshëm dhe me funksionim të përsosur do t'ju shpëtojnë nga një breshëri letrash drejt mbështetjes teknike, e cila sigurisht do t'ju bëhet një dhimbje koke nëse procesi i regjistrimit dhe autorizimit në faqen tuaj mbetet problematik dhe i ndërlikuar me një numër mjaft të madh përdoruesish.
Për këtë arsye, ne kemi diskutuar tashmë çështjen e formularëve të regjistrimit/autorizimit më shumë se një herë, si në dhe.
Në materialin e sotëm do të diskutojmë 10 qasje të rëndësishme dhe relevante, përdorimi i integruar i të cilave do t'ju lejojë të krijoni forma me përdorshmëri të lartë dhe, më e rëndësishmja, aksesueshmërisë. Për lexuesit që hasin këtë term për herë të parë, më lejoni të shpjegoj - aksesueshmërisë ekziston një shkallë e aksesueshmërisë së një shërbimi ose faqeje për personat me aftësi të kufizuara, duke filluar nga përdoruesit që kanë perceptim të dëmtuar të ngjyrave dhe duke përfunduar me ata që nuk mund ta kontrollojnë miun shumë mirë dhe saktë. Nga rruga, një nga artikujt e mëposhtëm do t'i kushtohet tërësisht temës së aksesit, pasi përdoruesit, zhvilluesit e uebit dhe optimizuesit në RuNet nuk janë ende të njohur me këtë koncept dhe qasjet e lidhura me të, dhe në dritën e tendencave të zhvillimit në gjuhën ruse-folëse. në segmentin e rrjetit, çështja e aksesit në uebsajt për personat me aftësi të kufizuara bëhet akute dhe e rëndësishme.
1. Mënyra më e mirë e autorizimit është mungesa e tij.
Po, pika jonë e parë është një truizëm dhe një e vërtetë bazë e UX - sa më pak veprim të kërkohet nga përdoruesi, aq më mirë. Shpesh, kur përdor disa sajte, kam një pyetje: "Pse duhet të regjistrohem këtu për të përdorur një shërbim të caktuar një herë?" Dhe megjithëse ka më pak faqe të tilla që ju detyrojnë të regjistroheni në mungesë të arsyeve bindëse, në shumë sajte të tregtisë elektronike mund të gjeni ende regjistrim, qëllimi i vetëm i të cilit është të ndërlikojë jetën e përdoruesit. Kjo, para së gjithash, vlen për një sërë dyqanesh online që kërkojnë nga ju të regjistroheni edhe për një blerje një herë të disa gjërave të thjeshta.
Pra, së pari, sigurohuni që vërtet keni nevojë për regjistrimin e përdoruesit në mënyrë që t'i siguroni atij shërbimin e duhur dhe funksionalitetin e plotë. Nëse është kështu, atëherë para së gjithash, merrni parasysh metodën më të thjeshtë dhe më të shpejtë të autorizimit, përkatësisht përdorimin e moduleve të rrjeteve sociale, të cilat janë të kudogjendura në internet për momentin dhe ofrojnë vërtetimin e përdoruesit me një klik. Dhe nëse disa vjet më parë, në përgjigje të propozimit për të përdorur module të rrjeteve sociale, mund të argumentohet se jo të gjithë përdoruesit kanë shkuar ende në rrjetet dhe shërbimet sociale, por tani shumica absolute, dërrmuese e përdoruesve kanë një llogari në një ose një tjetër shërbimi.
Ka një numër të madh shërbimesh jashtëzakonisht të njohura që arrijnë miliona përdorues në mbarë botën. Ekziston një shans shumë i mirë që përdoruesi juaj mesatar të ketë një llogari me të paktën një nga të gjitha shërbimet e paraqitura. Dhe vërtet mund të imagjinoni shumë: duke u nisur nga tradicionaljaFacebookdhe duke përfunduarYahoo, AmazonDheGitHub.
Kundërshtimi i dytë i vazhdueshëm ndaj moduleve sociale, i hasur më parë në procesin e zhvillimit të uebit, ishte shqetësimi i përdoruesit në lidhje me përputhshmërinë e faqes me konfidencialitetin dhe sigurinë e të dhënave personale që përdoruesi i ofron faqes automatikisht, duke identifikuar identitetin e tij përmes një prej rrjeteve sociale. llogaritë. Për momentin, së bashku me përhapjen dhe integrimin e paprecedentë të shërbimeve sociale në jetën tonë të përditshme, frika të tilla tek përdoruesit po bëhen gjithnjë e më pak të zakonshme, ndërsa klikimi pothuajse automatik i butonave të autorizimit përmes rrjeteve sociale është kthyer në një praktikë të vazhdueshme.
2. Email-i duhet të jetë një alternativë për çdo ID tjetër përdoruesi.
Ndryshe nga emrat dhe pseudonimet e ndryshme, të cilat shpesh harrohen nga përdoruesit, në shumicën e rasteve një person kujton gjithmonë emailin e tij. Sinqerisht, unë jam gjithmonë i gëzuar nga një faqe që nuk është shumë kërkuese për mua dhe që është e gatshme të pranojë emrin tim unik të specifikuar gjatë regjistrimit dhe emailin e specifikuar gjatë regjistrimit. Në përgjithësi, është thjesht një ide e shkëlqyeshme për t'i lejuar përdoruesit të identifikohet duke përdorur postë dhe një emër unik. Avantazhi i madh i kësaj qasjeje është kryesisht për shkak të faktit se emaili dhe fjalëkalimi janë një lidhje e fortë që jeton në mendjen e përdoruesit. Ai i drejtohet asaj sa herë që regjistrohet në një faqe të re, kështu që pse të mos e zhvilloni këtë kombinim logjik dhe t'i jepni mundësinë për ta përdorur atë kur regjistroheni?
Mundësia për të futur emailin tuaj në fushëpërdorues– manifestimi më elokuent i shqetësimit për përdoruesin në fazën e autorizimit.
Për më tepër, një pikë tjetër e rëndësishme lidhet gjithashtu me emailin e përdoruesit - gjatë procedurës për rivendosjen e hyrjes në sit, nëse fjalëkalimi harrohet, mos e bëni të detyrueshëm të tregoni një emër përdoruesi unik - ndryshe nga emaili, ai me të vërtetë harrohet shumë shpesh.
3. Aftësia për të kaluar shpejt ndërmjet formularëve të autorizimit dhe regjistrimit.
Do të ishte mjaft logjike që formularët e regjistrimit dhe të regjistrimit të autorizimit të vendosnin pranë njëri-tjetrit. Dhe megjithëse ato kanë funksione dhe algoritme të ndryshme veprimi, ekziston ende një ngjashmëri konceptuale e caktuar midis tyre. Duke vendosur në mënyrë kompakte formularët e regjistrimit dhe të autorizimit pranë njëri-tjetrit, si dhe duke siguruar një kalim të lehtë ndërmjet tyre (me një klikim), ju do të përmirësoni ndjeshëm përdorshmërinë e faqes. Për më tepër, një mënyrë e mirë për ta zbatuar atë do të ishte vendosja e dy butonave "Regjistrimi" dhe "Hyrja" pranë njëri-tjetrit, kur klikoni mbi të cilët do të shfaqet forma kryesore ose në formën e një dritareje kërcyese ose rrëshqitëse. panel.
Vendndodhja më kompakte dhe më e afërt e formularëve të regjistrimit dhe identifikimit në faqen e internetit të revistësTë Prag .
4. Gjuhë e thjeshtë dhe koncize.
Përkundër faktit se terminologjia e përdorur në RuNet është bërë shumë më e mirë kohët e fundit, formulime të paqarta dhe fjalë të paqarta mund të gjenden ende në butona që tregojnë gjëra kaq të thjeshta dhe të parëndësishme si regjistrimi dhe autorizimi.
Në një mënyrë apo tjetër, ekzistojnë disa qasje të ndryshme për zgjedhjen e etiketave të butonave. Natyrisht, në shumicën e rasteve ka më shumë kuptim përdorimi i etiketave koncize dhe të paqarta si "Hyrja", "Hyrja", "Krijo", "Bashkohu" dhe "Regjistrohu". Sidoqoftë, nëse po përpiqeni të krijoni një efekt të caktuar, atëherë është mjaft e pranueshme të largoheni nga formulimet lakonike në ato më shumëngjyrëshe, të tilla si "Bëhuni pjesëmarrës", "Hyni në botë" etj.
Vlen të përmendet se nëse keni kohë dhe burime, kryerja e testimit A\B do të jetë gjithmonë e dobishme.
Si shembull se si formohen dhe ndryshojnë preferencat e përdoruesve, sondazhi i Jeff Atwood demonstron popullaritetin e mënyrave të ndryshme për të etiketuar butonin e hyrjes në Shtetet e Bashkuara dhe Mbretërinë e Bashkuar. Shpresojmë që së shpejti analiza të tilla të bëhen të zakonshme në RuNet.
« Shenjë Në » përdoret gjithnjë e më shumë në vend të çdo formulimi tjetër.
5. Pajtueshmëria e formularëve të autorizimit me menaxherët e fjalëkalimeve të shfletuesve të ndryshëm.
Menaxherët e fjalëkalimeve të integruar në shfletues janë një shpikje e shkëlqyer që lehtëson shumë përdorimin e internetit. Ata janë bërë një pjesë kaq e njohur e përditshmërisë sonë, saqë prej kohësh nuk i mendojmë më si të tillë. Ne thjesht e marrim si të mirëqenë faktin që pas një hyrjeje të vetme në një sajt nuk do të na duhet ta bëjmë më, jemi mësuar të shohim formularë të plotësuar automatikisht dhe fillojmë të ndihemi shumë të pakëndshëm kur zbulojmë se një formular në një sajt në të cilën Ne kemi hyrë tashmë, rezulton të jetë bosh.
Duke marrë parasysh të gjitha këto, testimi i formularit të hyrjes me menaxherët e fjalëkalimeve të shfletuesve të ndryshëm është një domosdoshmëri që nuk mund të neglizhohet. Sigurisht, përveç menaxherëve të integruar në shfletues, përdoruesit mund të përdorin fare mirë menaxherë të palëve të treta, por, si rregull, me kusht që forma juaj të ndërveprojë saktë me të gjithë shfletuesit e zakonshëm, ajo do të plotësohet saktë nga një fjalëkalim i palës së tretë. menaxher.
6. Paralajmërimi dhe korrigjimi automatik i gabimeve në hyrje.
Përdoruesit shumë shpesh bëjnë gabime kur plotësojnë formularët. Është tipike që shpesh gabimet e bëra nga përdoruesi nuk janë të dukshme për të, edhe nëse bëhet fjalë për një hyrje të parëndësishme me një paraqitje të pasaktë ose një shkronjë që mungon në fjalëkalim. Ne duhet të punojmë me gabimet e përdoruesit në dy drejtime njëherësh - të njoftojmë qartë përdoruesin, duke treguar gabimet dhe të korrigjojmë automatikisht atë që mund të korrigjohet.
Sa i përket njoftimeve, grupi i paralajmërimeve për aktivizimin e Caps Lock, paraqitjen e gabuar ose karakteret e pavlefshme është bazë - nuk mund ta neglizhoni atë, për hir të sigurimit të komoditetit të përdoruesit, duhet të tregoni të gjitha gabimet pa përjashtim.
Korrigjimi automatik i gabimeve të shkrimit dhe gabimeve në hyrje është një temë mjaft e diskutueshme dhe e diskutueshme. Më saktë, korrigjimi automatik në formularë mund të funksionojë me gabime shtypi kur përdoruesi specifikon një email. Shkronjat që mungojnë në një domen ose një periudhë që mungojnë mund të korrigjohen lehtësisht duke përdorur një algoritëm automatik, pa frikë se do të korrigjoni ndonjë gjë që përdoruesi ka futur saktë.
7. A duhet të detyrohen përdoruesit të zgjedhin një fjalëkalim “të përshtatshëm”?
Kjo është një tjetër çështje e diskutueshme midis zhvilluesve të uebit. Për të filluar, duhet pranuar se pavarësisht nga të gjitha paralajmërimet, përdoruesi mesatar ende nuk i kushton rëndësi të mjaftueshme krijimit të një fjalëkalimi të fortë dhe kompleks. Çfarë duhet bërë me këtë fakt i takon ekipit të çdo faqeje të vendosë vetë. Ju mund të vëzhgoni se si formularët e regjistrimit sillen ndryshe në sajte të ndryshme kur bëhet fjalë për futjen e një fjalëkalimi. Disa forma janë absolutisht jokërkues për përdoruesin dhe nuk e rëndojnë rrënjësisht atë me nevojën për të respektuar ndonjë rregull, ndërsa të tjerët, përkundrazi, bëjnë gjithçka për ta detyruar përdoruesin të dalë me një fjalëkalim vërtet të fortë.
Zgjedhja e qasjes që duhet të përdorni varet nga natyra e projektit tuaj dhe sa përfshin ruajtjen e të dhënave personale të përdoruesit. Nëse faqja juaj ka një fokus të fortë argëtimi dhe llogaria e përdoruesit nuk ka vlerë të veçantë për palët e treta, atëherë, në përputhje me rrethanat, nuk ka nevojë që ju të vendosni rregulla strikte për futjen e një fjalëkalimi.
Nëse aktiviteti i faqes suaj lidhet me ruajtjen e të dhënave personale dhe, ndoshta, me zbatimin e veprimeve kritike nga ana e përdoruesit, përfshirë transaksionet financiare, atëherë në këtë rast do t'ju duhet, në një shkallë ose në një tjetër, kontrolloni përdoruesin në fazën e futjes së fjalëkalimit.
Ka disa mënyra të ndryshme për të kontrolluar se si një përdorues mund të dalë me një fjalëkalim. Më e thjeshta është të përdorni një nga algoritmet që analizon kompleksitetin e fjalëkalimit dhe informon përdoruesin për shkallën e kompleksitetit dhe sigurisë së kombinimit të shpikur. Në të njëjtën kohë, algoritmi mund të vendosë një prag të caktuar kritik që përdoruesi duhet të kapërcejë, përndryshe fjalëkalimi do të konsiderohet shumë i thjeshtë dhe nuk do të pranohet nga sistemi. Kjo qasje përdoret gjerësisht në një gamë të gjerë faqesh.
Mbështetje klasike e hyrjes me tregues ngjyrash duke përdorur shembullin e Yandex.Mail.
Përveç kontrollit të kompleksitetit dhe kufizimit të numrit minimal të karaktereve, përdoret edhe një metodë tjetër mjaft interesante, e cila konsiston në analizimin dhe krahasimin e fjalëkalimit të përdoruesit me një bazë të dhënash të fjalëkalimeve më të njohura në botë, që numëron 10 mijë kombinime. Nëse fjalëkalimi i futur nga përdoruesi nuk është origjinal dhe është një nga më të zakonshmet, përdoruesi merr një paralajmërim përkatës dhe i kërkohet të zgjedhë një kombinim tjetër.
« Se fjalëkalimin është gjithashtu i zakonshëm» – njoftimi është aktivizuarDiskursi, që tregon se fjalëkalimi i zgjedhur nga përdoruesi është shumë i thjeshtë dhe i zakonshëm.
Sidoqoftë, pika negative e të gjitha veprimeve të tilla që synojnë "edukimin" e përdoruesit është acarimi pothuajse i garantuar nga përdoruesit me përvojë, të cilët vlerësojnë me maturi situatën dhe marrin vendimin e tyre nëse në këtë rast ia vlen të kalosh me një fjalëkalim të thjeshtë, simbolik, ose nëse është e nevojshme të përdoret një më e vështirë. Për këtë arsye, ju duhet të ndërtoni një politikë të ekuilibruar dhe të qëndrueshme për vlerësimin e fjalëkalimeve të përdoruesve - ekstremet në këtë çështje mund të rezultojnë në hakim masiv të llogarive tuaja të përdoruesve (dhe, si rezultat, një ngarkesë të jashtëzakonshme në ekipin tuaj mbështetës), dhe acarim dhe largimi i vizitorëve që janë të lodhur sugjerojnë fjalëkalime të përshtatshme për algoritmin tuaj.
8. Lejoni aftësinë për të kaluar ndërmjet fushave të hyrjes duke përdorur tastin Tab dhe theksoni elementët kur ndërroni.
Po, pavarësisht gjithçkaje, përdoruesit që ende kalojnë midis fushave të formularit duke përdorur tastin Tab janë ende të gjallë dhe shumë aktivë. Nga rruga, vetë autori i këtij artikulli shpesh përdor Tab kur plotëson forma të ndryshme. Dhe, nga rruga, si një çelës kryesor, Tab shpejton shumë punën tuaj.
Zhvilluesit e uebit nuk duhet të harrojnë ekzistencën tonë - sigurohuni që të testoni format tuaja për përgjigjen e saktë në tastin Tab. Dhe mbani mend se përveç faktit që duhet të bëhet një ndërrim i tillë midis formave, duhet të kujdeseni edhe për theksimin e mjaftueshëm vizual të elementeve aktive.
Përqendrohuni kur ndërroniTab"Om brendaFirefoxDhekrom.
9. Si të kufizoni siç duhet numrin e përpjekjeve për të autorizuar ose rivendosur aksesin në llogarinë tuaj.
Herët a vonë, përpjekjet e shumta për autorizimin ose rikuperimin e fjalëkalimit duhet të ndërpriten. Mund të tregoheni të butë me 5 apo edhe 10 përpjekje, por vazhdimi i tyre i vazhdueshëm duhet t'ju alarmojë. Ju duhet të punoni me operacione të mëtejshme për vërtetimin, regjistrimin ose rikuperimin e llogarisë. Mënyra më e dukshme është pas numrit N të përpjekjeve për t'i kërkuar përdoruesit (ose kujtdo që fshihet nën maskën e përdoruesit) të futë një captcha në mënyrë që të eliminojë robotët. Për më tepër, një mënyrë e mirë është të bllokoni një llogari për një kohë të caktuar nëse përpjekjet e shumta të autorizimit dhe të gjitha veprimet e tjera të ngjashme dështojnë. Vini re se saktësia në këtë qasje nuk i referohet vetëm nevojës për t'i dhënë përdoruesit mundësinë për të bërë një gabim në të vërtetë një numër të mjaftueshëm herë, por edhe për kohën e moderuar të bllokimit. Bllokimi i parë që do të detyroheni të kryeni nuk duhet të jetë shumë i gjatë - thjesht paralajmëroni në momentin e duhur personin që po përpiqet të kryejë një veprim me llogarinë se përpjekja tjetër do të rezultojë në një bllokim për një kohë të caktuar. Nëse pas kësaj kohe përdoruesi, sulmuesi ose roboti vazhdon të bëjë gabime, atëherë mund të rrisni në mënyrë sekuenciale intervalin kohor në vlera mbresëlënëse.
Vlen të përmendet se teknika të tilla me rritje të njëpasnjëshme të bllokimit të përkohshëm duhet të lidhen me një IP - mos harroni se pas veprimeve të pasuksesshme të sulmuesit që çojnë në bllokim, faqja juaj mund të përdoret fare mirë nga një përdorues i vërtetë, IP-ja e të cilit, natyrisht, te jesh i ndryshem.
10. Mbani mend se të tregosh gabime vetëm me ngjyrën mund të mos jetë e mjaftueshme.
Në shumë mënyra, çështja e nënvizimit të gabimeve të bëra nga përdoruesi duke përdorur mjete shtesë që nuk lidhen me përcaktimin e zakonshëm të ngjyrave varet nga shkalla e projektit tuaj dhe nga numri i audiencave ekzistuese dhe të mundshme. Fakti është se çrregullimet e perceptimit të ngjyrave janë të zakonshme në mesin e përdoruesve më gjerë se sa jemi mësuar të mendojmë për to. Tashmë çdo përdorues i 12-të mashkull është i verbër nga ngjyra, dhe çdo i 30-ti, pavarësisht nga gjinia, ka shikim të dobët. Mund t'ju duket se këta tregues nuk janë kritikë dhe duhet të keni pak përdorues të tillë të veçantë, por kur të arrini një numër të caktuar kritik të vizitorëve të regjistruar, në mënyrë të pashmangshme do të merreni me njerëz të tillë. Do të jetë mirë nëse u kushtoni pak vëmendje dhe ua lehtësoni detyrat.
Kur flasim për mjete shtesë për të treguar gabimet e përdoruesit, ne po flasim për simbole të thjeshta si një trekëndësh me një pikëçuditëse, një kryq i dukshëm pranë fushës që përmban gabimin dhe tregues të tjerë të ngjashëm vizuale. Për të marrë një ide të përafërt për rëndësinë e përcaktimeve të tilla për njerëzit me perceptim të dëmtuar të ngjyrave, merrni parasysh një shembull tipik:
Formular regjistrimiPayPalnë bardh e zi.
Kur analizojmë këtë pamje të ekranit të formularit të regjistrimit PayPal, të konvertuar në modalitetin bardh e zi, vëmendja jonë tërhiqet, para së gjithash, te trekëndëshi me një pikëçuditëse të vendosur në fushën captcha. Duke gjykuar nga fotografia e përgjithshme, mund të konkludojmë se përdoruesi ka harruar të fusë vetëm captcha, dhe se gjithçka është në rregull me fushat e mbetura (pavarësisht nëse ato janë të mbushura apo jo).
Formular regjistrimiPayPalme ngjyra të plota.
Siç mund ta shohim, në realitetin me ngjyra të plota, të gjitha fushat janë shënuar në përputhje me rrethanat, dhe jo vetëm fusha captcha. Megjithatë, vetë trekëndëshi që në çdo rast do të informonte një vizitor me çrregullim të perceptimit të ngjyrave për një gabim ndodhet vetëm në një fushë. Vlen të përmendet se ky gabim i nënkuptuar dhe në dukje plotësisht i padukshëm u eliminua më vonë nga optimizuesit:
Formulari i ri i regjistrimitPayPalinformon pa mëdyshje përdoruesin për një gabim, pavarësisht nëse ai është në gjendje të dallojë ngjyrat.
Ashtu si qasja e dizajnit në përgjithësi, mënyra se si ne krijojmë formularë regjistrimi modern dhe përkatës po evoluon vazhdimisht. Përkundër faktit se një zonë e tillë e zhvillimit të uebit si formularët e autorizimit dhe regjistrimit ka rregulla dhe tradita të vendosura mirë, vetë qasjet për krijimin e këtyre formave po ndryshojnë vazhdimisht, ashtu siç po ndryshojnë vetë përvoja e përdoruesit dhe perceptimi i përdoruesit. Duke monitoruar vazhdimisht ndryshimet në sjelljen e përdoruesve dhe tendencat që krijojnë vetë zhvilluesit dhe optimizuesit e uebit, ju gjithmonë mund t'i mbani të gjithë komponentët e projektit tuaj, përfshirë formularët e regjistrimit dhe autorizimit, të përshtatshëm dhe lehtësisht të aksesueshëm për përdoruesin. Dhe ne, nga ana tjetër, do të vazhdojmë t'ju mbajmë të përditësuar me tendencat më të fundit në dizajnimin dhe optimizimin e faqeve të internetit. Ne ju dëshirojmë konvertime të larta dhe audiencë të madhe përdoruesish!
Pra, ekziston një detyrë - të bëhet regjistrimi në sistem dhe mundësia e autorizimit. Si ta bëjmë atë? Le të fillojmë me radhë.
Regjistrimi në php
Gjithçka është e thjeshtë këtu. Një depo e të dhënave po krijohet për përdoruesit. Zakonisht kjo është një tabelë e bazës së të dhënave. Ai përfshin fusha të tilla si id, emri i përdoruesit dhe fjalëkalimi. Fushat e mbetura janë opsionale. Ju mund të mbledhni emailet e përdoruesve, adresat e tyre, IP-të e mundshme, kohën e hyrjes në rrjet, fjalët koduese nga kartat bankare, pyetjet e sigurisë...
Në përgjithësi, gjëja kryesore është çifti hyrje-fjalëkalim.
Pika e parë e rëndësishme— Fjalëkalimet e përdoruesit nuk mund të ruhen në tekst të qartë. Kjo është, si tekst. Është e pamundur sepse nëse dikush tjetër fiton akses në bazën e të dhënave, ai do të marrë një bazë të dhënash me fjalëkalime të hyrjes së përdoruesit, të cilat nuk ka gjasa t'i pëlqejnë. Dhe nëse mendoni se shumë përdorues kanë të njëjtin login dhe fjalëkalim në shërbime të ndryshme, kjo vë në rrezik të dhënat dhe financat personale, korrespondencën personale dhe gjithçka tjetër.
Fjalëkalimet duhet të ruhen si hash. Hashimiështë një operacion që i kthen të dhënat origjinale në një lloj kast me një gjatësi të njohur. Kjo është mirë sepse kasti është unik. Kjo do të thotë, nëse ndryshojmë të paktën një karakter në të dhënat e burimit, rezultati i operacionit hash do të dalë krejtësisht i ndryshëm, përtej njohjes. Operacioni hash është i pakthyeshëm, domethënë, nuk do të jetë e mundur të zgjerohen të dhënat origjinale nga kjo fotografi. Kjo është se si ndryshon nga enkriptimi.
MySQL dhe PHP kanë të njëjtin funksion hashing të përbashkët dhe të sigurt - md5. Ky algoritëm merr të dhëna dhe jep një gjurmë gishti.
Pra, marrim të dhëna nga përdoruesi, kontrolloni nëse janë bosh, nëse nuk përmbajnë ndonjë karakter që nuk na duhen (mos i kufizoni shumë përdoruesit). Dhe tani ne bëjmë një kërkesë si kjo:
INSERT INTO `users` (`id`,`username`,`password`) VALUES("",$quoted_username,MD5($quoted_password));
Ju lutemi vini re se unë i kam emërtuar në mënyrë specifike variablat $quoted_ sepse përpara se t'i fusim në pyetje, ato duhet të shmangen duke përdorur funksionin mysql_real_escape_string(). Meqenëse ky funksion përdoret shumë shpesh dhe është i shkruar shumë gjatë (i dua arkitektët PHP), unë rekomandoj ta grumbulloni në guaskën tuaj. Për shembull, si kjo:
Citat e funksionit ($var) (kthejeni mysql_real_escape_string($var); )
Autorizim në php
Ne kemi shtuar një përdorues të ri dhe tani ai është i autorizuar. Ne i vizatojmë atij një formular hyrje-fjalëkalimi dhe kapim të dhënat e tij. Ç'pritet më tej? Në fund të fundit, ne e morëm fjalëkalimin në tekst të qartë, dhe në bazën e të dhënave ka një hash të fjalëkalimit. A do të më duhet ta konvertoj fjalëkalimin në një hash dhe më pas t'i krahasoj ato? Jo, mund ta bëni më thjeshtë - me një kërkesë.
SELECT * FROM `users` WHERE `login`=$qoted_login AND `password`=MD5($quoted_password);
Nëse pyetja kthen një varg, ai do të jetë një varg me të dhënat e përdoruesit. Nëse jo, nuk ka asnjë përdorues të tillë në tabelë. Të dhënat e përdoruesit do të jenë shumë të dobishme për ne - ia vlen t'i futni ato në një grup shoqërues.
Mbani mend përdoruesin
Tani duhet të kujtojmë se përdoruesi është i autorizuar dhe e dimë saktësisht se kush është. Gjëja e parë që ju vjen në mendje është përdorimi i cookies për këtë. Në të vërtetë, vendosni hyrjen dhe ID-në e përdoruesit në cookie dhe dijeni gjithmonë se kush po e kërkon faqen në këtë moment.
Por kjo është një praktikë e keqe. Pse? Sepse një cookie është një skedar që ruhet në shfletuesin e përdoruesit dhe të dhënat nga ky skedar i transmetohen serverit në çdo kërkesë. Së pari, ato transmetohen si tekst, që do të thotë se janë të lehta për t'u përgjuar. Së dyti, ky është tekst i thjeshtë i dërguar nga përdoruesi. Prandaj, fjalë për fjalë mund të rishkruhet. Për shembull, nëse vendosim të ruajmë emrin e përdoruesit "Vasya" në cookie, ai mund të hapë menaxhimin e cookie-ve në shfletuesin e tij, të gjejë cookie-n e dëshiruar dhe ta ndryshojë atë, të themi, "Admin". Kjo eshte e gjitha. Tani, me çdo kërkesë, ne do të marrim një cookie, e cila do të na tregojë emrin e përdoruesit të përdoruesit - "Admin".
Prandaj, është më e sigurt të ruash të gjitha të dhënat në server në një vend të paarritshëm nga uebi. Në disa dosje që nuk mund të aksesohen nga shfletuesi. Të gjitha të dhënat rreth përdoruesit duhet të shkruhen në këtë dosje dhe të lexohen prej andej sa herë që ai kërkon një dokument. Për të zbuluar se cili përdorues zotëron cilin skedar të dhënash, duhet ta quani skedarin një emër unik dhe ta hidhni këtë emër në kukit e përdoruesit. Kështu, përdoruesi nuk do të jetë në gjendje të gjejë emrin e skedarit për përdoruesin Admin - ky skedar gjenerohet nga sistemi në server. Dhe kjo ju lejon të tërhiqni fjalëkalimet në tekst të qartë nga dokumenti në dokument.
Ajo që përshkrova është mekanizmi i seancës. Në Perl, për shembull, për të përdorur sesionet duhet të ngarkoni module. Dhe në PHP seancat mbështeten jashtë kutisë. Në fakt, gjithçka që duhet të dini është funksioni session_start() dhe grupi $_SESSION. Kjo është e gjitha. Unë do t'ju them tani.
Në çdo skenar ku do t'i shkruani ose do të lexoni nga një sesion, keni nevojë përpara se të nxirrni ndonjë informacion thirrni funksionin session_start(). Kjo do të nisë seancën. Ky funksion do të krijojë një skedar sesioni nëse nuk ekziston ose do ta lexojë nëse një cookie speciale i është kaluar skriptit.
Për të shkruar të dhëna në një sesion, thjesht duhet t'i shkruani ato në grupin $_SESSION. Tani duhet të kujtojmë ID-në e përdoruesit.
$_SESSION["userid"] = $përdoruesi["id"];
Të gjitha. Tani, sa herë që një përdorues kërkon një skript që përdor sesione, vlera e elementit $_SESSION["userid"] do të jetë e disponueshme për ju.
Prandaj, kur përdoruesi futi hyrjen dhe fjalëkalimin e tij, ne morëm të dhënat e tij nga baza e të dhënave, gjë që konfirmon se një përdorues i tillë është në bazën tonë të të dhënave, ne e kujtojmë atë në seancë.
Zbuloni nëse përdoruesi është i autorizuar
Epo, është aq e lehtë sa të vrasësh dardha! Tani që e dini se si funksionojnë seancat, të zbuloni nëse një përdorues është i autorizuar është çështje e një rreshti. Këtu është ajo:
If(isset($_SESSION["userid"])) (shtyp "përdoruesi është i autorizuar"; )
Nëse një id përdoruesi është përcaktuar në seancë, atëherë ai ka kaluar tashmë autorizimin. Por si mund ta zbuloni se për cilin përdorues është? Cili është login e tij? Data e lindjes? Fjalë kodi për një kartë bankare? Emri i vajzërisë së nënës?
Epo, padyshim - bëni një pyetje në tabelën e përdoruesve. Kemi edhe ID-në e këtij përdoruesi.
SELECT * FROM `users` WHERE `id`=$quoted_userid
Si të dilni nga një përdorues dhe të dilni
Epo, është mjaft e thjeshtë. Nëse përcaktojmë nëse një përdorues është i autorizuar nga prania e userid-it në seancë, atëherë për ta nxjerrë atë duhet ta heqim nga atje. Është bërë kështu:
Unset($_SESSION["userid"]);
Ju gjithashtu mund ta mbyllni seancën vetëm për t'u siguruar. Kjo do të pastrojë cookie-n e përdoruesit dhe do të shkatërrojë skedarin e sesionit në server. Në këtë rast, të gjitha të dhënat do të humbasin prej tij. Është bërë kështu:
Session_shkatërrim();
Kjo eshte e gjitha. Nëse keni ndonjë pyetje, mos hezitoni të na kontaktoni. Për më tepër, mund të më kontaktoni përmes icq ose postës dhe të kërkoni ndihmë për diçka. Zakonisht nuk refuzoj. Nëse keni nevojë për ndihmë serioze, mund të kërkoj një pagesë të vogël. Përveç kësaj, unë mund t'ju mësoj se si të krijoni faqe interneti nga distanca! Ky është lloji i trajnerit dhe mësuesit që jam unë :) Dhe nëse doni të merrni mësime dhe truket ashtu si kjo, pa pagesë, regjistrohuni në RSS-në e blogut tim.
Ky postim sponsorizohet nga ibooknet.ru, i cili ofron riparime të laptopëve me çmime të arsyeshme. Personalisht, laptopi im është mirë dhe shpresoj që të mos më duhet ta rregulloj. Te njejten gje uroj edhe per ty.
