Անվերապահ մուտքի ձև html: Մուտքագրման և գրանցման ձև HTML5-ով և CSS3-ով

HTML պիտակներ, սահմանելով HTML ձևերը կայքում

Մենք ստեղծում ենք կայքեր և անհատական էջեր ինտերնետումայցելուների հետ շփվելու համար.

HTML ձևերօգտագործվում են կայքում այցելուներ գրանցելու, ինտերակտիվ հարցումների և քվեարկության համար, թույլ են տալիս հաղորդագրություններ ուղարկել, գնումներ կատարել և այլն: HTMLՁևը ստեղծվել է մեկ նպատակով՝ հավաքել և այնուհետև փոխանցել տեղեկատվությունը մշակման համար ծրագրի սցենար կամ էլ. փոստով:

HTML ձևի նմուշ | Մուտք գործել

Պիտակներ, հատկանիշներ և արժեքներ

- որոշեք ձևը.
name="" - սահմանում է ձևի անվանումը:
method="" - որոշում է, թե ինչպես են տվյալները ուղարկվում ձևից: Արժեքները՝ «ստանալ» (կանխադրված) և «փոստ» . Ավելի հաճախ օգտագործվում է «փոստ» մեթոդը, քանի որ այն թույլ է տալիս մեծ քանակությամբ տվյալներ փոխանցել։
action="" - որոշում է url-ը, որով տվյալները ուղարկվում են մշակման: Մեր դեպքում՝ enter_data.php ..
- սահմանել ձևի այնպիսի տարրեր, ինչպիսիք են կոճակները, անջատիչները, տվյալների մուտքագրման տեքստային դաշտերը:
type="text" - սահմանում է տեքստային դաշտ տվյալների մուտքագրման համար:
type="password" - սահմանում է գաղտնաբառ մուտքագրելու դաշտ, մինչդեռ տեքստը ցուցադրվում է աստղանիշներով կամ շրջանակներով:
type="checkbox" - սահմանում է ռադիո կոճակ:
type="թաքնված" - սահմանում է թաքնված տարրձեւեր - օգտագործվում է փոխանցելու համար լրացուցիչ տեղեկությունսերվերին:
size="25" - երկարություն տեքստային դաշտկերպարներով.
maxlength = "30" - մուտքագրման նիշերի առավելագույն թույլատրելի քանակը:
value="" - սահմանում է այն արժեքը, որը կուղարկվի մշակման, եթե այն վերաբերում է ռադիո կոճակներին կամ ռադիոկոճակներին: Այս հատկանիշի արժեքը՝ որպես տեքստային դաշտի կամ կոճակի մաս, կցուցադրվի որպես, օրինակ, John կամ Login վերը նշված օրինակում:

HTML ձևի նմուշ | Մեկնաբանություններ կայքում

<a href="https://obanracer.ru/hy/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">HTML օրինակ</a>ձևերը

Պիտակներ, հատկանիշներ և արժեքներ

action="http://site/comments.php" - որոշում է url-ը, որին կուղարկվեն ձևի տվյալները:
id="" - սահմանում է ձևի տարրի անվանումը, նույնացուցիչը:
name="" - սահմանում է ձևի տարրի անվանումը:
- ձևով սահմանեք տեքստային դաշտ:
cols="" - որոշում է ձևի տեքստային դաշտի սյունակների քանակը:
rows="" - Նշում է ձևի տեքստային դաշտի տողերի քանակը:

Եթե միջեւ դրեք տեքստ, այն կցուցադրվի տուփի ներսում՝ որպես օրինակ, որը հեշտ է հեռացնել:

HTML ձևի նմուշ | Բացվող ցուցակ

HTML ձևեր

Պիտակներ, հատկանիշներ և արժեքներ

- սահմանել ցանկը իրերի ընտրության համար:
size="" - որոշում է տեսանելի ցուցակի դիրքերի քանակը: Եթե արժեքը 1 է, ապա գործ ունենք բացվող ցուցակի հետ:
- սահմանել ցուցակի դիրքերը (միավորները):
value="" - պարունակում է այն արժեքը, որը ձևի միջոցով կուղարկվի նշված url-ին մշակման համար:
select="selected" - ընտրում է ցանկի տարրը որպես օրինակ:

HTML ձևի նմուշ | Ցուցակ ոլորման տողով

Մեծացնելով size="" հատկանիշի արժեքը՝ մենք ոլորման տողով ցուցակ ենք ստանում.

HTML ձևեր

Այս տարբերակի համար մենք օգտագործում ենք multiple="multiple" դրոշը, որը հնարավորություն է տալիս ընտրել մի քանի տարրեր: Դրա բացակայությունը թույլ է տալիս ընտրել միայն մեկ կետ:

type="submit" - սահմանում է կոճակ:

type="reset" - սահմանում է վերակայման կոճակ:

value="" - սահմանում է կոճակի պիտակը:

Տես լրացուցիչ՝

Մուտքի ձևի ձևավորումն իսկապես կարևոր է ցանկացած կայքի համար: Մենք հավաքեցինք մի քանի պատասխանատու մուտքի էջի ձևանմուշ անվճար ներբեռնում. Այն մուտքի ձևկայքի մի մասն է: Երբ մենք գնում ենք կայք և ցանկանում ենք լիարժեք մուտք ունենալ, անհրաժեշտ է գրանցվել և մուտք գործել: Ցանկացած կայքի մուտքի ձևը կարելի է գտնել կայքի ցանկացած կողմում: Դա կլինի աջ կամ ձախ կողմում: Ոչ մի կայք առանց մուտքի և գրանցման ձևի ամբողջական չէ: Այսպիսով, այն կարևոր է ցանկացած կայքի համար: Շատ դժվար է ստեղծել մուտքի ձև HTML CSS-ի միջոցով առանց պրոֆեսիոնալ մշակողի:

HTML-ը կառուցվածք է, իսկ CSS-ը՝ դիզայն: HTML5-ը և CSS3-ը նախագծման թարմացված տարբերակն է: Այս թարմացման կոդավորման միջոցով ստեղծված մուտքի որոշ ձևեր կարելի է ուղղակիորեն ներբեռնել: Մշակողը կիսվել է այս ձևով անվճար: Դրանք կարող են օգտագործվել ցանկացած անձնական կարիքների կամ բիզնեսի համար:

Օգտագործեք այս պատասխանող մուտքի էջի ձևանմուշը անվճար, և դուք կարող եք ինքներդ կառուցել: Դուք կարող եք հարմարեցնել և փոխել ցանկացած գույն կամ ոճ: Կարող եք նաև միացնել ձեր տվյալների բազան, jquery-ն: Այսպիսով, մուտքի այս ձևանմուշը իսկապես օգտակար և կարևոր է:

Մենք տարածել ենք այս գրառումը մի քանի անվճար մուտքի ձևանմուշներ html5 css3: Այս հավաքածուն կավելանա։ Մենք փորձում ենք հավաքել ավելի շատ մուտքի էջի ձևանմուշ bootstrap:

նյութական ձևավորման ձև

Այս մուտքի ձևը իսկապես հիանալի և պարզ տեսք ունի: Դուք կարող եք խմբագրել և փոխել ինտերֆեյսի գույնը: Պարզ դիզայն, բայց շատ պրոֆեսիոնալ:

ԴԵՄՈ ՆԵՐբեռնում

Երբ դուք պետք է նախագծեք որևէ հավելվածի մուտքի ձև, կարող եք օգտագործել այս Material Design մուտքի ձևը: Դա կատարյալ կլինի ձեր դիմումի համար:

ԴԵՄՈ ՆԵՐբեռնում

Անիմացիոն SVG Անձնանշան

Մուտքի անիմացիոն ձևանմուշը մեծ պահանջարկ ունի։ Եթե ցանկանում եք այն օգտագործել ձեր մասնագիտությամբ։ Այս անիմացիոն SVG Avatar մուտքի ձևը ավելի լավ է ձեզ համար:

ԴԵՄՈ ՆԵՐբեռնում

Մուտք գործելու ձևի ցնցման էֆեկտ

Սա մուտքի պարզ ձև է և ունի որոշակի ազդեցություն և օգտագործում է ձեր պրոֆեսիոնալ բիզնեսը:

ԴԵՄՈ ՆԵՐբեռնում

CSS3 Animation Cloud և մուտքի ձև

Եթե ունեք ամպային բիզնես կամ պլանավորում եք ցանկացած տեսակի ամպային բիզնեսի համար, կարող եք օգտագործել այս CSS3 Animation Cloud-ը և մուտքի ձևը:

ԴԵՄՈ ՆԵՐբեռնում

մաքուր մուտքի ձև

Սա շատ մաքուր ձևավորում է և անվանում է նաև նույն Մաքուր մուտքի ձևը: Օգտագործեք այս ձևից ձեր մաքուր կայքը:

ԴԵՄՈ ՆԵՐբեռնում

Մուտքի ձև HTML5-ում

Այս մուտքի ձևը մշակված է HTML5 և օգտագործվում է ձեր լավագույն կայքի համար:

ԴԵՄՈ ՆԵՐբեռնում

Մուտքագրեք միայն CSS ձևի վավերացում

ԴԵՄՈ ՆԵՐբեռնում

CSS մուտքի ձև

ԴԵՄՈ ՆԵՐբեռնում

Batman մուտքի ձև

ԴԵՄՈ ՆԵՐբեռնում

Մուտքի ձևը Materializecss-ով

ԴԵՄՈ ՆԵՐբեռնում

Անկյունային նյութի մուտքի ձև

ԴԵՄՈ ՆԵՐբեռնում

Պատասխանատու մուտքի ձև

ԴԵՄՈ ՆԵՐբեռնում

Պատասխանատու մուտքի ձև

ԴԵՄՈ ՆԵՐբեռնում

Պարզ հարթ ձև մանող բեռնիչով

ԴԵՄՈ ՆԵՐբեռնում

Մուտք գործեք Everdwell

Ձևաթղթերը նախատեսված են օգտվողից վեբ սերվեր ուղարկելու համար: HTML-ի ձևերը կարող են բաղկացած լինել տեքստային դաշտերից և տեքստային տարածքներից, վանդակներից և ռադիո կոճակներից և բացվող ցուցակներից: Այս ամենը ձևի տարրեր են: Յուրաքանչյուր տարր ծառայում է կայքին որոշակի արժեք հաղորդելու համար:
Իր հիմքում HTML ձևը վեբ էջ է, որտեղ դուք տեսնում եք ձեր տեղեկատվությունը մուտքագրելու տարածքները: Ձևը լրացնելուց և ուղարկել կոճակը սեղմելուց հետո ձևի տեղեկատվությունը փաթեթավորվում և ուղարկվում է վեբ սերվեր՝ սերվերի սկրիպտով (հանդիսավոր ֆայլ) մշակելու համար: Մշակումից հետո մեկ այլ վեբ էջ վերադարձվում է ձեզ որպես պատասխան: Հետևյալ նկարը հստակ ցույց է տալիս, թե ինչպես է աշխատում ձևը.

HTML ձևեր ստեղծելու մեջ դժվար բան չկա: Ձևերի մասին պատկերացում կազմելու ամենահեշտ ձևը մի փոքր HTML կոդը վերլուծելն է և այնուհետև տեսնել, թե ինչպես է այն աշխատում: Հետևյալ օրինակը ցույց է տալիս պարզ HTML ձև ստեղծելու շարահյուսությունը.

Օրինակ՝ պարզ HTML ձև

Ինքներդ փորձեք»

Իմ առաջին ձևը.
Անուն:
Ազգանունը:

պարզ ձև

Տարր

Տարրի միջոցով ձևաթղթերը տեղադրվում են վեբ էջերում . Դա կոնտեյներ է բոլոր ձևերի բովանդակության համար, ներառյալ այնպիսի տարրեր, ինչպիսիք են տեքստային դաշտերը և կոճակները, ինչպես նաև ցանկացած այլ պիտակներ: HTML լեզու. Այնուամենայնիվ, այն չի կարող պարունակել այլ տարր: .
Ձևը սերվեր ուղարկելու համար օգտագործվում է «Ներկայացնել» կոճակը, նույն արդյունքը կստացվի, եթե ձևաթղթի ներսում սեղմվի «Enter» ստեղնը։ Եթե ձևաթղթում Submit կոճակ չկա, Enter ստեղնը կարող է օգտագործվել ուղարկելու համար:
Տարրերի ատրիբուտների մեծ մասը ազդել ձևի մշակման վրա, ոչ թե դրա ձևավորման վրա: Դրանցից ամենատարածվածներն են գործողությունև մեթոդ. Հատկանիշ գործողությունպարունակում է URL-ը, որին ձևի տեղեկատվությունը կներկայացվի սերվերի կողմից մշակման համար: Հատկանիշ մեթոդ HTTP մեթոդն է, որը բրաուզերները պետք է օգտագործեն ձևի տվյալները ներկայացնելու համար:

Տարր

Գրեթե բոլոր ձևի դաշտերը ստեղծվում են տարրի միջոցով (անգլերեն մուտքագրումից - մուտքագրում): Արտաքին տեսքտարր փոխվում է կախված իր հատկանիշի արժեքից տիպ:

Ահա որոշ հատկանիշների արժեքներ տիպ:

Տեքստի և գաղտնաբառի մուտքագրում

Ձևի տարրերի ամենապարզ տեսակներից մեկը տեքստային դաշտն է, որը նախատեսված է մեկ տողից տեքստ մուտքագրելու համար: Այս տեսակըտեքստի մուտքագրումը սահմանված է լռելյայնորեն, և, հետևաբար, դա մեկ տողով դաշտ է, որը կցուցադրվի, եթե մոռանաք նշել հատկանիշը տիպ. Մեկ տողով տեքստի մուտքագրման դաշտ ձևաթղթում ավելացնելու համար դուք պետք է ներս մտնեք տարրի մեջ գրանցել հատկանիշը տիպտեքստային արժեքով.

Գաղտնաբառի մուտքագրման դաշտը սովորական տեքստային դաշտի փոփոխություն է: Այն աջակցում է նույն հատկանիշները, ինչ մեկ տողով տեքստային դաշտը: Հատկանիշ Անունսահմանում է գաղտնաբառի մուտքագրման դաշտի անունը, որը կուղարկվի սերվերին օգտվողի կողմից մուտքագրված գաղտնաբառի հետ միասին: Գաղտնաբառ մուտքագրելու համար դաշտ ստեղծելու համար պետք է սահմանել գաղտնաբառի հատկանիշի արժեքը տիպ(գաղտնաբառ (անգլերեն) - գաղտնաբառ):

Գաղտնաբառի դաշտով ձև ստեղծելու օրինակ.

Օրինակ՝ գաղտնաբառի դաշտ

Ինքներդ փորձեք»

Ձեր մուտքը.

Գաղտնաբառ:

Ձեր մուտքը.

Գաղտնաբառ:

Այս հատկանիշի հետ մեկտեղ կարող եք օգտագործել հատկանիշը առավելագույն երկարությունը, որի արժեքը սահմանում է նիշերի առավելագույն քանակը, որոնք կարող են մուտքագրվել տրված տողը. Դուք կարող եք նաև սահմանել մուտքագրման դաշտի երկարությունը՝ օգտագործելով հատկանիշը չափը. Լռելյայնորեն, բրաուզերների մեծ մասը սահմանափակում է տեքստային դաշտերը մինչև 20 նիշ: Նոր ձևի տարրերի լայնությունը վերահսկելու համար՝ հատկանիշի փոխարեն չափը, խորհուրդ ենք տալիս օգտագործել Cascading Style Sheets (CSS):
Հատկանիշ արժեքընշում է այն արժեքը, որը լռելյայնորեն ցուցադրվում է տեքստային վանդակում, երբ ձևը բեռնվում է: Դաշտում լռելյայն արժեք մուտքագրելով՝ կարող եք օգտատիրոջը բացատրել, թե ինչպիսի տվյալներ և ինչ ձևաչափով եք ցանկանում, որ օգտատերը մուտքագրի այստեղ: Սա նման է նմուշի, քանի որ օգտագործողի համար շատ ավելի հարմար է լրացնել ձևաթուղթը` իր առջև օրինակ տեսնելով։

Անջատիչներ (ռադիո)

Տարր տիպ ռադիոստեղծում է ռադիոկոճակներ, որոնք օգտագործում են «OR» տրամաբանական սկզբունքը, ինչը թույլ է տալիս ընտրել մի քանի արժեքներից միայն մեկը. եթե ընտրում եք մեկ դիրք, ապա մնացած բոլորը դառնում են ոչ ակտիվ: Ռադիո կոճակի տարրի հիմնական շարահյուսությունը հետևյալն է.

Հատկանիշ Անունռադիոկոճակների համար պարտադիր է և կարևոր դեր է խաղում ռադիոկոճակների մի քանի տարրեր խմբի մեջ խմբավորելու գործում: Ռադիո կոճակները խմբի մեջ միավորելու համար դուք պետք է սահմանեք նույն արժեքըհատկանիշ Անունև տարբեր հատկանիշի արժեք արժեքը. Հատկանիշ արժեքըսահմանում է ընտրված ռադիոկոճակի արժեքը, որն ուղարկվելու է սերվերին: Յուրաքանչյուր ռադիոկոճակի տարրի արժեքը պետք է եզակի լինի խմբի ներսում, որպեսզի սերվերն իմանա, թե պատասխանի որ տարբերակն է ընտրել օգտվողը:
Հատկանիշ ներկայություն ստուգվում(անգլերենից - set) անջատիչի տարրում ցույց է տալիս, թե առաջարկվող տարբերակներից որն է պետք լռելյայն ընտրել էջը բեռնելիս, անհրաժեշտության դեպքում: Այս հատկանիշը կարող է սահմանվել խմբի միայն մեկ անջատիչ տարրի համար՝

Ինքներդ փորձեք»

Քանի տարեկան ես?

18 - ից ցածր
18-ից 24
25-ից 35
ավելի քան 35

Քանի տարեկան ես?

18 - ից ցածր
18-ից 24
25-ից 35
ավելի քան 35

Նշման տուփեր

Տարր տիպ վանդակըստեղծում է վանդակներ, որոնք նման են ռադիո կոճակներին, քանի որ դրանք թույլ են տալիս օգտվողին ընտրել ձեր տրամադրած տարբերակներից: Ռադիո կոճակներից հիմնական տարբերությունն այն է, որ այցելուն կարող է ընտրել միանգամից մի քանի տարբերակ, իսկ դրոշներն իրենք նշված են քառակուսիներով, ոչ թե շրջանակներով: Ինչպես ռադիո կոճակների դեպքում, վանդակների խումբ է ստեղծվում՝ յուրաքանչյուր տարրին հատկացնելով նույն հատկանիշի արժեքը: Անուն, սակայն յուրաքանչյուր վանդակ ունի իր նշանակությունը: Հիմնական վանդակի շարահյուսություն.

Հատկանիշ ստուգվում, ինչպես ռադիո կոճակների դեպքում, նշում է, որ տվյալ վանդակը պետք է ընտրվի լռելյայն, երբ էջը բեռնվի: Այս հատկանիշը կարող է սահմանվել միաժամանակ մի քանի դրոշների համար խմբի մեջ:
Հետևյալ օրինակն օգտագործում է վանդակներ՝ պատասխանի մի քանի լռելյայն տարբերակներ նշելու համար.

Օրինակ՝ ռադիո կոճակների օգտագործում

Ինքներդ փորձեք»

Ջազ
Բլյուզ
Ռոք
Շանսոն
Երկիր

Ո՞ր երաժշտական ժանրերն եք սիրում:

Ջազ
Բլյուզ
Ռոք
Շանսոն
Երկիր

Հաստատման (ներկայացնելու) և մաքրման (վերակայման) կոճակներ

Տարր տիպ ներկայացնելստեղծում է կոճակ, որը սեղմելիս զննարկիչը ուղարկում է սերվերի սկրիպտ՝ օգտագործողի կողմից ձևաթղթում մուտքագրված տվյալները մշակելու համար: Եթե ստեղծենք կոճակ, որը մաքրում է ձևը, ապա վերագրում ենք հատկանիշին տիպ«վերակայել» արժեքը: տարր տիպ ներկայացնելկամընտիր հատկանիշ կարող է նշանակվել Անուն. Հատկանիշ արժեքըօգտագործվում է այս տարրում՝ նշելու տեքստը, որը ցույց է տալիս կոճակի պիտակը: Լռելյայնորեն, բրաուզերներում կոճակը գրված է «Ուղարկել» (Ներկայացնել), եթե այս մակագրությունը ձեզ չի համապատասխանում, մուտքագրեք այն ինքներդ: Քանի որ հաստատման կոճակների ոճերը կարող են տարբեր լինել տարբեր բրաուզերներում, ավելի լավ է ինքներդ հարմարեցնել կոճակի ոճը՝ օգտագործելով CSS գործիքները կամ օգտագործել գրաֆիկական կոճակներ:
Ստեղծեք հաստատման և մաքրման կոճակներ.

Օրինակ. Օգտագործելով ուղարկել և վերականգնել

Ինքներդ փորձեք»

Սեղմելով «Վերականգնել» կոճակը, կզրոյացվի օգտատիրոջ կողմից մուտքագրված ցանկացած տվյալ:

գործողության հատկանիշ.

Հիմնական տարրի համար

Մշակման ֆայլը գտնվում է սերվերի վրա mytestserver.comթղթապանակում անվանապանակև սերվերի սկրիպտի անունը, որը կմշակի տվյալները. obrabotchik.php. Հենց նրան կփոխանցվեն ձեր կողմից վեբ էջի ձևով մուտքագրված բոլոր տվյալները: .php ընդլայնումը ցույց է տալիս, որ նշված ձևը մշակվում է PHP սցենարով: Ինքը կարգավորիչը կարող է գրվել մեկ այլ լեզվով, օրինակ, դա կարող է լինել Python-ի, Ruby-ի և այլնի սցենարների լեզուն:
Ցանկալի է միշտ սահմանել հատկանիշի արժեքը գործողություն. Եթե ձևը պետք է արժեքներ ներկայացնի այն նույն էջին, որտեղ գտնվում է, ապա որպես գործողության հատկանիշի արժեք նշեք դատարկ տողը. action="":

մեթոդի հատկանիշ

Հատկանիշ մեթոդնշում է, թե ինչպես պետք է տեղեկատվությունը ուղարկվի սերվերին: Ձևաթղթի ներկայացման եղանակի ընտրությունը կախված է այն տվյալներից, որոնք պետք է ուղարկվեն դրա հետ միասին: Այստեղ այս տվյալների ծավալը մեծ դեր է խաղում: Ձեր ձևի չմշակված տվյալները զննարկիչից սերվեր փոխանցելու երկու ամենատարածված մեթոդներն են. ՍՏԱՆԱԼև ՓՈՍՏ. Մեթոդը դրված է ձեր ընտրությամբ որևէ մեկի վրա, և եթե այն չեք նշել, այն կօգտագործվի լռելյայն ՍՏԱՆԱԼ. Դիտարկենք դրանցից յուրաքանչյուրի կիրառությունը։

POST մեթոդ

Մեթոդ ՓՈՍՏփաթեթավորում է ձևի տվյալները և ուղարկում այն սերվերին՝ առանց օգտագործողի կողմից դա նկատելու, քանի որ տվյալները պարունակվում են հաղորդագրության մարմնում: Վեբ զննարկիչը մեթոդն օգտագործելիս ՓՈՍՏհարցում է ուղարկում սերվերին, որը բաղկացած է հատուկ վերնագրերից, որին հաջորդում են ձևի տվյալները: Քանի որ այս հարցման բովանդակությունը հասանելի է միայն սերվերին, ապա ՓՈՍՏօգտագործվում է գաղտնի տվյալներ փոխանցելու համար, ինչպիսիք են գաղտնաբառերը, բանկային քարտի տվյալները և օգտատերերի այլ անձնական տվյալները: Մեթոդ ՓՈՍՏհարմար է նաև մեծ քանակությամբ տեղեկատվություն ուղարկելու համար, քանի որ, ի տարբերություն մեթոդի ՍՏԱՆԱԼ, այն չունի փոխանցվող նիշերի քանակի սահմանափակում։

GET մեթոդ

Ինչպես արդեն գիտեք, բրաուզերի հիմնական աշխատանքը սերվերից վեբ էջեր ստանալն է: Այսպիսով, երբ դուք օգտագործում եք մեթոդը ՍՏԱՆԱԼ, ձեր զննարկիչը պարզապես ստանում է վեբ էջը, ինչպես միշտ: Մեթոդ ՍՏԱՆԱԼնաև փաթաթում է ձևի տվյալները, բայց այն ավելացնում է URL-ի վերջում՝ նախքան հարցումը սերվեր ուղարկելը: Հասկանալու համար, թե ինչպես է աշխատում մեթոդը ՍՏԱՆԱԼեկեք տեսնենք այն գործողության մեջ: Բացեք այս ձեռնարկի առաջին օրինակը (Օրինակ՝ պարզ HTML ձև) նոթատետրում (օրինակ՝ Notepad++) և մի փոքր փոփոխություն կատարեք HTML կոդի մեջ.

դրանք. փոխարինել ՓՈՍՏվրա ՍՏԱՆԱԼ.
Պահպանեք ֆայլը անունով ֆայլի անուն.htmlև թարմացրեք բրաուզերի էջը (F5), այնուհետև լրացրեք նման ձևը Վասյա Պուպկինև սեղմեք Submit կոճակը: Բրաուզերի հասցեի տողում դուք կտեսնեք նման բան.

File_name.html?firstname=Vasya&lastname=Pupkin

Այժմ դուք տեսնում եք ձևի յուրաքանչյուր տարրի անունը, ինչպես նաև դրա արժեքը հենց այստեղ՝ URL-ում:
URL-ը ձևի մնացած տվյալներից առանձնացված է հարցական նշանով, իսկ փոփոխականների անուններն ու արժեքներն առանձնացված են նշանով: (&) .
Այս մեթոդը պետք է օգտագործվի, եթե դուք չեք փոխանցում մեծ քանակությամբ տեղեկատվություն:
Այս մեթոդը չի աշխատի, եթե ձեր ձևի տվյալները զգայուն են, օրինակ՝ բանկային քարտի համարը կամ գաղտնաբառը պահելը:
Բացի այդ, մեթոդը ՍՏԱՆԱԼհարմար չէ, եթե ցանկանում եք ձևի հետ միասին ֆայլեր ուղարկել սերվեր:

Ձևի տարրերի խմբավորում

Ձևի տարրերը, որոնք իմաստով կապված են, կարող են խմբավորվել պիտակների միջև

. Բրաուզերը կցուցադրվի

որպես ձևի տարրերի խմբի շուրջ տուփ: Շրջանակի տեսքը կարելի է փոխել՝ օգտագործելով Cascading Style Sheets (CSS):
Յուրաքանչյուր խմբի համար վերնագիր ավելացնելու համար անհրաժեշտ է տարր A, որը սահմանում է խմբի վերնագրի տեքստը, որը պետք է ներդրվի շրջանակում:

Գաղտնաբառի մուտքագրման դաշտը սովորական տեքստային դաշտ է, մուտքագրված տեքստը, որում, կախված զննարկիչից, ցուցադրվում է որպես աստղանիշ կամ կետ: Այս հատկությունը նախատեսված է ապահովելու համար, որ ոչ ոք չնայի մուտքագրված գաղտնաբառը: Թեև մուտքագրված տեքստը չի ցուցադրվում էկրանին, մուտքագրված տեղեկատվությունը սերվերին փոխանցվում է հստակ տեքստով առանց կոդավորման: Հետևաբար, այս դաշտի օգտագործումը չի ապահովում տվյալների անվտանգությունը, և այն կարող է գաղտնալսվել:

Ստեղծման շարահյուսությունը հետևյալն է.

Հատկանիշները նույնն են, ինչ տեքստային դաշտի ատրիբուտները և թվարկված են Աղյուսակ 1-ում: մեկ.

Գաղտնաբառի դաշտը լայնորեն օգտագործվում է կայքերում՝ օգտատերերին թույլատրելու և կայքի այն բաժիններին մուտքը սահմանափակելու համար, որտեղ դուք պետք է հաստատեք ձեր լիազորությունները: Օրինակ 1-ը ցույց է տալիս, թե ինչպես ստեղծել նման դաշտեր:

Օրինակ 1. Գաղտնաբառի դաշտ

Գաղտնաբառի դաշտ

Մուտք.

Գաղտնաբառ:

Արդյունքում ստանում ենք հետևյալը (նկ. 1).

Բրինձ. 1. Գաղտնաբառով դաշտի տեսակը

Ոճի հատկությունները կիրառելի են գաղտնաբառի դաշտում, որը սահմանում է գույնի, ֆոնի, շրջանակի և այլնի պարամետրերը: Օրինակ 2-ը ցույց է տալիս դաշտերի ձևավորման համար ֆոնային պատկերների ավելացում: Եկեք հիմք ընդունենք տեքստային դաշտերի ոճը:

Օրինակ 2. Պատկեր ավելացնելը տեքստային վանդակում

Գաղտնաբառի դաշտ

Այս օրինակի արդյունքը ներկայացված է Նկ. 2. Նկարներն ավելացվում են որպես ֆոն, ուստի տեքստը պետք է տեղափոխվի աջ՝ օգտագործելով padding-left , հակառակ դեպքում այն կցուցադրվի պատկերի վերևում:

Այս հոդվածում դուք կսովորեք ինչպես ստեղծել գրանցման և թույլտվության ձևօգտագործելով HTML, JavaScript, PHP և MySql: Նման ձևերը օգտագործվում են գրեթե բոլոր կայքերում, անկախ դրա տեսակից: Դրանք ստեղծվել են ֆորումի, առցանց խանութի և սոցիալական ցանցերի (օրինակ՝ Facebook, Twiter, Odnoklassniki) և շատ այլ տեսակի կայքերի համար։

Եթե դուք ունեք կայք ձեր տեղական համակարգչում, ապա հուսով եմ, որ դուք արդեն ունեք: Առանց դրա ոչինչ չի ստացվի։

Տվյալների բազայում աղյուսակի ստեղծում

Օգտատիրոջ գրանցումն իրականացնելու համար մեզ նախ անհրաժեշտ է տվյալների բազա: Եթե դուք արդեն ունեք, ապա հիանալի է, հակառակ դեպքում, դուք պետք է ստեղծեք այն: Հոդվածում ես մանրամասն բացատրում եմ, թե ինչպես դա անել:

Եվ այսպես, մենք ունենք տվյալների շտեմարան (կրճատ՝ DB), այժմ պետք է աղյուսակ ստեղծել օգտվողներորում մենք կավելացնենք մեր գրանցված օգտվողներին:

Ինչպես ստեղծել աղյուսակ տվյալների բազայում, ես նաև բացատրեցի հոդվածում։ Աղյուսակ ստեղծելուց առաջ պետք է սահմանել, թե ինչ դաշտեր է այն պարունակելու։ Այս դաշտերը կհամապատասխանեն գրանցման ձևի դաշտերին:

Այսպիսով, մտածեցինք, պատկերացրինք, թե ինչ դաշտեր կունենա մեր ձևը և ստեղծեցինք աղյուսակ օգտվողներայս դաշտերով.

id- Նույնացուցիչ: Դաշտ idպետք է լինի տվյալների բազայի յուրաքանչյուր աղյուսակում:
անուն- Անունը պահպանելու համար:
Ազգանուն- Ազգանունը պահպանելու համար։
էլ- Փոստային հասցեն պահպանելու համար: Որպես լոգին մենք կօգտագործենք էլ.
էլփոստի_կարգավիճակ- Դաշտ, որը ցույց է տալիս փոստը հաստատված է, թե ոչ: Եթե նամակը հաստատված է, ապա այն կունենա 1 արժեք, հակառակ դեպքում՝ 0:
գաղտնաբառը- Գաղտնաբառը պահպանելու համար:

Եթե ցանկանում եք, որ ձեր գրանցման ձևն ունենա ևս մի քանի դաշտ, կարող եք դրանք ավելացնել նաև այստեղ:

Վերջ, մեր սեղանը օգտվողներպատրաստ է։ Անցնենք հաջորդ քայլին։

Տվյալների բազայի միացում

Մենք ստեղծել ենք տվյալների բազան, այժմ պետք է միանալ դրան։ Մենք կապվելու ենք MySQLi PHP ընդլայնման միջոցով:

Մեր կայքի թղթապանակում ստեղծեք ֆայլ անունով dbconnect.php, և դրանում մենք գրում ենք հետևյալ սցենարը.

Տվյալների բազայի միացման սխալ. Սխալի նկարագրություն. «.mysqli_connect_error()»:

"; exit(); ) // Սահմանեք կապի կոդավորումը $mysqli->set_charset("utf8"); //Հարմարության համար այստեղ ավելացրեք փոփոխական, որը կպարունակի մեր կայքի անունը $address_site = "http://testsite .տեղական"; ?>

Այս ֆայլը dbconnect.phpկպահանջվի միացնել ձևերի մշակիչներ:

Ուշադրություն դարձրեք փոփոխականին $address_site, այստեղ ես նշել եմ իմ թեստային կայքի անունը, որի վրա կաշխատեմ։ Դուք համապատասխանաբար նշում եք ձեր կայքի անվանումը:

Կայքի կառուցվածքը

Հիմա եկեք նայենք մեր կայքի HTML կառուցվածքին:

Տեղափոխեք կայքի վերնագիրն ու էջատակը անհատական ֆայլեր, header.phpև footer.php. Մենք դրանք կապելու ենք բոլոր էջերում։ Մասնավորապես, հիմնական (ֆայլ index.php), գրանցման ձևով էջ (ֆայլ form_register.php) և թույլտվության ձևով էջում (ֆայլ form_auth.php).

Արգելափակել մեր հղումներով, Գրանցումև թույլտվություն, ավելացնել կայքի վերնագրում, որպեսզի դրանք ցուցադրվեն բոլոր էջերում։ Մեկ հղում կմտնի գրանցման ձևի էջ(ֆայլ form_register.php) իսկ մյուսը՝ էջին հետ թույլտվության ձև(ֆայլ form_auth.php).

header.php ֆայլի բովանդակությունը.

Մեր կայքի անվանումը

Արդյունքում մեր գլխավոր էջն ունի հետևյալ տեսքը.

Իհարկե, ձեր կայքը կարող է ունենալ բոլորովին այլ կառուցվածք, բայց դա մեզ համար այժմ կարևոր չէ։ Հիմնական բանը այն է, որ կան հղումներ (կոճակներ) գրանցման և թույլտվության համար:

Այժմ անցնենք գրանցման ձևին: Ինչպես արդեն հասկացաք, մենք այն ունենք ֆայլում form_register.php.

Մենք գնում ենք Տվյալների բազա (phpMyAdmin-ում), բացում ենք աղյուսակի կառուցվածքը օգտվողներև տեսեք, թե ինչ դաշտեր են մեզ պետք: Այսպիսով, մեզ անհրաժեշտ են անուն և ազգանուն մուտքագրելու դաշտեր, փոստային հասցե (Email) մուտքագրելու դաշտ և գաղտնաբառ մուտքագրելու դաշտ: Եվ անվտանգության նկատառումներից ելնելով, մենք կավելացնենք captcha մուտքագրման դաշտ:

Սերվերում գրանցման ձևի մշակման արդյունքում կարող են առաջանալ տարբեր սխալներ, որոնց պատճառով օգտատերը չի կարողանա գրանցվել։ Հետևաբար, որպեսզի օգտագործողը հասկանա, թե ինչու գրանցումը ձախողվում է, անհրաժեշտ է այդ սխալների մասին հաղորդագրություններ ցուցադրել նրան:

Նախքան ձևը ցուցադրելը, մենք բլոկ ենք ավելացնում նիստից սխալ հաղորդագրություններ ցուցադրելու համար:

Եվ ևս մեկ պահ, եթե օգտատերը արդեն լիազորված է, և հանուն հետաքրքրության, նա անմիջապես մտնում է գրանցման էջ՝ գրելով բրաուզերի հասցեի տողում. website_url/form_register.php, ապա այս դեպքում գրանցման ձևի փոխարեն դրա համար կցուցադրենք վերնագիր, որ այն արդեն գրանցված է։

Ընդհանուր առմամբ, ֆայլի կոդը form_register.phpմենք ստացել ենք այսպես.

Դուք արդեն գրանցված եք

Բրաուզերում գրանցման էջն ունի հետևյալ տեսքը.

Միջոցով պահանջվող հատկանիշ, բոլոր դաշտերը դարձրել ենք պարտադիր։

Ուշադրություն դարձրեք գրանցման ձևի կոդը, որտեղ captcha-ն ցուցադրվում է:

Մենք պատկերի համար src հատկանիշի արժեքում նշել ենք ֆայլի ուղին captcha.php, որը առաջացնում է այս captcha-ն:

Եկեք նայենք ֆայլի կոդը captcha.php:

Կոդը լավ մեկնաբանված է, ուստի ես կկենտրոնանամ միայն մեկ կետի վրա:

Ֆունկցիայի ներսում imageTtfText (), նշված է տառատեսակի ուղին verdana.ttf. Այսպիսով, ահա դրա համար ճիշտ շահագործում captcha, մենք պետք է թղթապանակ ստեղծենք տառատեսակներ, և այնտեղ դրեք տառատեսակի ֆայլը verdana.ttf. Այն կարող եք գտնել և ներբեռնել ինտերնետից կամ վերցնել արխիվից՝ սույն հոդվածի նյութերով։

Մենք ավարտեցինք HTML կառուցվածքը, ժամանակն է անցնելու:

Էլփոստի վավերացում jQuery-ով

Ցանկացած ձևի կարիք ունի մուտքագրված տվյալների վավերացում՝ ինչպես հաճախորդի կողմից (օգտագործելով JavaScript, jQuery), այնպես էլ սերվերի կողմից:

Մենք պետք է հատուկ ուշադրություն դարձնենք Email դաշտին։ Շատ կարևոր է, որ մուտքագրված էլ․ հասցեն վավեր է։

Համար տրված դաշտմուտքագրում , մենք սահմանում ենք էլփոստի տեսակը (type="email"), սա մեզ մի փոքր զգուշացնում է սխալ ձևաչափերի դեմ: Բայց դա բավարար չէ, քանի որ զննարկիչի կողմից մեզ տրամադրած ծածկագրի տեսուչի միջոցով կարող եք հեշտությամբ փոխել հատկանիշի արժեքը տիպՀետ էլվրա տեքստը, և վերջ, մեր չեկն այլևս վավեր չի լինի։

Եվ այդ դեպքում մենք պետք է ավելի վստահելի ստուգում կատարենք։ Դա անելու համար մենք կօգտագործենք jQuery գրադարանը JavaScript-ից:

jQuery գրադարանը միացնելու համար ֆայլում header.phpպիտակների միջև , փակման պիտակից առաջ , ավելացրեք այս տողը.

Այս տողից անմիջապես հետո ավելացրեք էլփոստի վավերացման ստուգման կոդը: Այստեղ ավելացնում ենք մուտքագրված գաղտնաբառի երկարությունը ստուգելու կոդը։ Այն պետք է լինի առնվազն 6 նիշ:

Այս սկրիպտի օգնությամբ մենք ստուգում ենք մուտքագրված էլ․ հասցեն վավերականության համար։ Եթե օգտվողը սխալ էլ. Եթե ամեն ինչ կարգին է, ապա մենք հեռացնում ենք սխալը և ակտիվացնում ձևի ուղարկել կոճակը։

Եվ այսպես, հաճախորդի կողմից ձևի վավերացումով մենք ավարտեցինք: Այժմ մենք կարող ենք այն ուղարկել սերվեր, որտեղ նույնպես մի քանի ստուգումներ կանենք և տվյալների բազա կավելացնենք։

Օգտագործողի գրանցում

Մենք ձևը ուղարկում ենք ֆայլին մշակման համար register.php, POST մեթոդի միջոցով։ Անուն տրված ֆայլըատրիբուտի արժեքում նշված handler-ը գործողություն. Իսկ ուղարկելու մեթոդը նշված է հատկանիշի արժեքում մեթոդ.

Բացեք այս ֆայլը register.phpև առաջին բանը, որ մենք պետք է անենք, սեսիայի գործարկման գործառույթ գրելն է և նախկինում ստեղծած ֆայլը ներառելը dbconnect.php(Այս ֆայլում մենք կապ ենք հաստատել տվյալների բազայի հետ): Եվ այնուամենայնիվ, անմիջապես հայտարարեք բջիջները error_messagesև հաջողության_հաղորդագրություններնիստի գլոբալ զանգվածում: Վ error_mesagesմենք կգրանցենք բոլոր սխալի հաղորդագրությունները, որոնք տեղի են ունենում ձևաթղթերի մշակման ընթացքում, և հաջողության_հաղորդագրություններԵկեք գրենք ուրախ հաղորդագրություններ:

Շարունակելուց առաջ մենք պետք է ստուգենք արդյոք ձևն ընդհանրապես ներկայացվել է. Հարձակվողը կարող է դիտել հատկանիշի արժեքը գործողությունձևից և պարզեք, թե որ ֆայլն է մշակում այս ձևը: Եվ նա կարող է գաղափար ունենալ անմիջապես այս ֆայլին անցնելու մտքով՝ մուտքագրելով հետևյալ հասցեն բրաուզերի հասցեագոտում. http://site_site/register.php

Այսպիսով, մենք պետք է ստուգենք, թե արդյոք կա մի բջիջ գլոբալ POST զանգվածում, որի անունը համընկնում է մեր «Գրանցվել» կոճակի անվան հետ: Այսպիսով, մենք ստուգում ենք՝ սեղմվե՞լ է «Գրանցվել» կոճակը, թե՞ ոչ։

Եթե հարձակվողը փորձի ուղղակիորեն գնալ այս ֆայլ, նա սխալի հաղորդագրություն կստանա: Հիշեցնում եմ, որ $address_site փոփոխականը պարունակում է կայքի անվանումը և այն հայտարարագրվել է ֆայլում dbconnect.php.

Սխալ.հիմնական էջ .

"); } ?>

Captcha-ի արժեքը նիստում ավելացվել է դրա ստեղծման ընթացքում՝ ֆայլում captcha.php. Որպես հիշեցում, ես ևս մեկ անգամ ցույց կտամ այս կոդի հատվածը ֆայլից captcha.php, որտեղ captcha արժեքը ավելացվում է նիստին.

Հիմա եկեք անցնենք հենց թեստին: Ֆայլի մեջ register.php, if բլոկի ներսում, որտեղ ստուգում ենք՝ սեղմված է արդյոք «Գրանցվել» կոճակը, ավելի ճիշտ՝ որտեղ է մեկնաբանությունը « // (1) Տեղադրել կոդը հաջորդ կտորի համար"մենք գրում ենք:

//Ստուգեք ստացված captcha-ն //Կտրել բացատները տողի սկզբից և վերջից $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Համեմատե՛ք ստացված արժեքը նիստի արժեքի հետ. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Եթե captcha-ն ճիշտ չէ, ապա վերադարձրեք օգտվողին գրանցման էջ, և այնտեղ մենք կցուցադրենք սխալ հաղորդագրություն, որ նա սխալ captcha է մուտքագրել: $error_message = "

Սխալ.Դուք սխալ captcha եք մուտքագրել

"; // Պահպանեք սխալի հաղորդագրությունը նստաշրջանում: $_SESSION["error_messages"] = $error_message; // Օգտատիրոջը վերադարձրեք գրանցման էջի վերնագիր ("HTTP/1.1 301 Moved Permanently"); header ("Տեղադրում. " .$address_site ."/form_register.php"); //Դադարեցնել սկրիպտի ելքը(); ) // (2) Տեղադրել կոդը հաջորդ հատվածի համար )else( //Եթե captcha-ն չի փոխանցվել կամ դատարկ է, ելք ("

Սխալ.Չկա հաստատման կոդը, այսինքն՝ captcha կոդը։ Դուք կարող եք գնալ գլխավոր էջ:

"); }

Հաջորդը, մենք պետք է մշակենք ստացված տվյալները POST զանգվածից: Նախ և առաջ մենք պետք է ստուգենք գլոբալ POST զանգվածի պարունակությունը, այսինքն՝ այնտեղ կա՞ն բջիջներ, որոնց անունները համընկնում են մեր ձևի մուտքագրման դաշտերի անունների հետ։

Եթե բջիջը գոյություն ունի, ապա այս բջիջից կտրում ենք տողի սկզբից և վերջից բացատները, հակառակ դեպքում՝ գրանցման ձևով օգտատիրոջը վերաուղղորդում ենք էջ։

Այնուհետև, բացատները կրճատվելուց հետո մենք ավելացնում ենք տող փոփոխականին և ստուգում ենք այս փոփոխականի դատարկությունը, եթե այն դատարկ չէ, ապա շարժվում ենք, այլապես օգտատիրոջը վերահասցեավորում ենք գրանցման ձևով էջ:

Տեղադրեք այս կոդը նշված վայրում // (2) Տեղադրել կոդը հաջորդ կտորի համար".

/* Ստուգեք, արդյոք $_POST գլոբալ զանգվածը պարունակում է տվյալներ, որոնք ներկայացված են ձևից և կցեք ներկայացված տվյալները սովորական փոփոխականների մեջ:*/ if(isset($_POST["first_name"]))( // Կտրեք բացատները սկզբից և վերջից: տողը $first_name = trim($_POST["first_name"]); //Ստուգեք, արդյոք փոփոխականը դատարկ է, if(!empty($first_name))( // Անվտանգության համար փոխակերպեք հատուկ նիշերը HTML կազմերի $first_name = htmlspecialchars( $first_name, ENT_QUOTES) ;)else( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Մուտքագրեք ձեր անունը

Անվան դաշտը բացակայում է

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Տեղափոխվել է Մշտապես"); header("Գտնվելու վայրը՝ ".$address_site."/form_register.php"); //Դադարեցնել սցենարի ելքը(); ) if( isset($_POST["last_name"]))( // Կտրել բացատները տողի սկզբից և վերջից $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Անվտանգության համար փոխարկեք հատուկ նիշերը HTML-ի $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Մուտքագրեք ձեր ազգանունը

Անվան դաշտը բացակայում է

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Տեղափոխվել է Մշտապես"); header("Գտնվելու վայրը՝ ".$address_site."/form_register.php"); //Դադարեցնել սցենարի ելքը(); ) if( isset($_POST["email"]))( // Կտրեք բացատները տողի սկզբից և վերջից $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Էլ. հասցեի ձևաչափը և դրա եզակիությունը ստուգելու կոդի տեղը )else( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages" ] .="

Մուտքագրեք ձեր էլ

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Տեղափոխվել է Մշտապես"); header("Գտնվելու վայրը՝ ".$address_site."/form_register.php"); //Դադարեցնել սցենարի ելքը(); ) if( isset($_POST["գաղտնաբառ"]))( // Կտրել բացատները տողի սկզբից և վերջից $password = trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Գաղտնագրեք գաղտնաբառը $password = md5($password."top_secret"); )else( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .="

Մուտքագրեք ձեր գաղտնաբառը

Ոլորտը առանձնահատուկ նշանակություն ունի։ էլ. Մենք պետք է ստուգենք ստացված փոստային հասցեի ձևաչափը և դրա եզակիությունը տվյալների բազայում։ Այսինքն՝ արդյոք նույն էլ.փոստի հասցեով օգտվողն արդեն գրանցված է։

Նշված վայրում» // (3) Կոդի տեղը փոստային հասցեի ձևաչափը և դրա եզակիությունը ստուգելու համար«ավելացրեք հետևյալ կոդը.

//Ստուգեք ստացված էլ. հասցեի ձևաչափը՝ օգտագործելով $reg_email = "/^**@(+(*+)*\.)++/i" սովորական արտահայտությունը; //Եթե ստացված էլ. հասցեի ձևաչափը չի համընկնում կանոնավոր արտահայտության հետ if(!preg_match($reg_email, $email))( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Դուք անվավեր էլփոստ եք մուտքագրել

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Տեղափոխվել է Մշտապես"); header("Գտնվելու վայրը՝ ".$address_site."/form_register.php"); //Դադարեցնել սցենարի ելքը(); ) // Ստուգեք, արդյոք արդեն կա այդպիսի հասցե տվյալների բազայում $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Եթե կա ուղիղ մեկ տող են, ապա այս էլ. հասցեով օգտվողն արդեն գրանցված է, եթե($result_query->num_rows == 1)( //Եթե արդյունքը կեղծ չէ if(($row = $result_query->fetch_assoc()) ! = false) ( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Այս էլփոստի հասցեով օգտվողն արդեն գրանցված է

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 տեղափոխվել է մշտապես"); header ("Տեղադրանքը. ".$address_site."/form_register.php"); )else( //Պահպանել սխալի հաղորդագրությունը նիստին .$_SESSION["error_messages"] .= "

Սխալ տվյալների բազայի հարցում

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Մշտապես տեղափոխվել է"); header ("Տեղադրանքը. ".$address_site."/form_register.php"); ) /* փակել ընտրությունը */ $ result_query-> close();//Stop the script exit();) /* փակել ընտրությունը */ $result_query->close();

Եվ այսպես, մենք ավարտեցինք բոլոր ստուգումները, ժամանակն է օգտվողին ավելացնել տվյալների բազա: Նշված վայրում» // (4) Տվյալների բազայում օգտատեր ավելացնելու կոդի համար«ավելացրեք հետևյալ կոդը.

//Հարցում տվյալների բազայում օգտատեր ավելացնելու համար $result_query_insert = $mysqli->query("INSERT INTO `users" (first_name, ազգանուն, էլ.փոստ, գաղտնաբառ) VALUES ("".$first_name."", "".$last_name ." ", "".$email."", "".$password."")"); if(!$result_query_insert)( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Տվյալների բազայում օգտատեր ավելացնելու սխալ հարցում

Գրանցումը հաջողությամբ ավարտվեց!!!
Այժմ դուք կարող եք մուտք գործել՝ օգտագործելով ձեր օգտանունը և գաղտնաբառը:

"; //Օգտատիրոջն ուղարկեք մուտքի էջի վերնագիր ("HTTP/1.1 301 Մշտապես տեղափոխված"); header ("Գտնվելու վայրը՝ ".$address_site."/form_auth.php"); ) /* Լրացրեք հարցումը */ $ result_query_insert-> close();//Փակել տվյալների բազայի կապը $mysqli->close();

Եթե տվյալների բազայում օգտվող ավելացնելու հարցումում սխալ է տեղի ունենում, մենք այս սխալի մասին հաղորդագրություն ենք ավելացնում նիստին և օգտատիրոջը վերադարձնում ենք գրանցման էջ:

Հակառակ դեպքում, եթե ամեն ինչ լավ է անցել, մենք նաև հաղորդագրություն ենք ավելացնում նիստին, բայց դա արդեն ավելի հաճելի է, այն է՝ օգտատիրոջը ասում ենք, որ գրանցումը հաջող է անցել։ Եվ մենք այն վերահղում ենք թույլտվության ձևով էջ:

Փոստի հասցեի ձևաչափը և գաղտնաբառի երկարությունը ստուգելու սկրիպտը գտնվում է ֆայլում header.php, ուստի այն կազդի նաև այդ ձևի դաշտերի վրա։

Նիստը սկսվում է նաև ֆայլում header.php, այնպես որ ֆայլում form_auth.phpնիստը սկսելու կարիք չկա, քանի որ մենք սխալ ենք ստանում:

Ինչպես ասացի, այստեղ աշխատում է նաև փոստի հասցեի ձևաչափը և գաղտնաբառի երկարությունը ստուգելու սկրիպտը։ Հետևաբար, եթե օգտվողը մուտքագրի սխալ էլփոստի հասցեն կամ կարճ գաղտնաբառ, նա անմիջապես սխալի մասին հաղորդագրություն կստանա: Կոճակ ներս մտնելկդառնա անգործուն.

Սխալները շտկելուց հետո կոճակը ներս մտնելակտիվանում է, և օգտատերը կարող է ձևը ներկայացնել սերվերին, որտեղ այն կմշակվի:

Օգտագործողի թույլտվություն

Արժեքը վերագրելու համար գործողությունթույլտվության ձևը ունի ֆայլ auth.php, ինչը նշանակում է, որ ձևը կմշակվի այս ֆայլում։

Այսպիսով, եկեք բացենք ֆայլը auth.phpև գրեք կոդը՝ թույլտվության ձևը մշակելու համար: Առաջին բանը, որ պետք է անել՝ սկսել նիստը և ներառել ֆայլը dbconnect.phpտվյալների շտեմարանին միանալու համար:

//Հայտարարել բջիջ՝ ձևաթղթերի մշակման ընթացքում առաջացող սխալներ ավելացնելու համար: $_SESSION["error_messages"] = ""; //Հայտարարել բջիջ՝ հաջող հաղորդագրություններ ավելացնելու համար $_SESSION["success_messages"] = "";

/* Ստուգեք՝ արդյոք ձևը ներկայացվել է, այսինքն՝ սեղմված է արդյոք Մուտք կոճակը։ Եթե այո, ապա մենք ավելի հեռուն ենք գնում, եթե ոչ, ապա մենք սխալի հաղորդագրություն կցուցադրենք օգտվողին, նշելով, որ նա ուղղակիորեն գնացել է այս էջ: */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Տեղադրել կոդը հաջորդ հատվածի համար )else( exit("

Սխալ.Դուք ուղղակիորեն մուտք եք գործել այս էջ, ուստի մշակման ենթակա տվյալներ չկան: Դուք կարող եք գնալ գլխավոր էջ:

"); }

//Ստուգեք ստացված captcha-ն if(isset($_POST["captcha"]))( //Կտրեք բացատները տողի սկզբից և վերջից $captcha = trim($_POST["captcha"]); if(!դատարկ ($captcha ))( //Համեմատե՛ք ստացված արժեքը նիստի արժեքի հետ։ if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Եթե captcha-ն անվավեր է, ապա մենք օգտատիրոջը վերադարձնում ենք թույլտվության էջ, և այնտեղ մենք կցուցադրենք սխալի հաղորդագրություն, որ նա սխալ captcha է մուտքագրել: $error_message = "

Սխալ.Դուք սխալ captcha եք մուտքագրել

Սխալ. Captcha մուտքագրման դաշտը չպետք է դատարկ լինի:

"; // Պահպանեք սխալի հաղորդագրությունը նստաշրջանում: $_SESSION["error_messages"] = $error_message; // Օգտատիրոջը վերադարձրեք թույլտվության էջի վերնագիր ("HTTP/1.1 301 Moved Permanently"); header ("Տեղադրում. " .$address_site ."/form_auth.php"); //Դադարեցնել սցենարի ելքը(); ) //(2) Փոստի հասցեն մշակելու տեղ //(3) Գաղտնաբառի մշակման վայր //(4) Տեղ հարցում կատարելով տվյալների շտեմարան )else ( //Եթե captcha-ն չի անցել, exit("

Սխալ.Չկա հաստատման կոդը, այսինքն՝ captcha կոդը։ Դուք կարող եք գնալ գլխավոր էջ:

"); }

Եթե օգտատերը ճիշտ է մուտքագրել հաստատման կոդը, ապա անցնում ենք առաջ, հակառակ դեպքում նրան վերադարձնում ենք թույլտվության էջ։

Էլփոստի հասցեի ստուգում

// Կտրել բացատները տողի սկզբից և վերջից $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))($email = htmlspecialchars($email, ENT_QUOTES); //Ստուգեք ստացված էլ. հասցեի ձևաչափը՝ օգտագործելով $ սովորական արտահայտությունը reg_email = " /^**@(+(*+)*\.)++/i"; //Եթե ստացված էլ. հասցեի ձևաչափը չի համապատասխանում կանոնավոր արտահայտությանը if(!preg_match($reg_email, $email ))( // Պահպանել նիստի սխալի հաղորդագրությունում։$_SESSION["error_messages"] .= "

Դուք անվավեր էլփոստ եք մուտքագրել

"; //Վերադարձրեք օգտատիրոջը թույլտվության էջի վերնագիր("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Stop the script exit(); ) )else ( // Պահպանեք սխալի հաղորդագրությունը նիստում։ $_SESSION["error_messages"] .= "

Փոստային հասցեն (էլ. փոստ) մուտքագրելու դաշտը չպետք է դատարկ լինի:

Էլփոստ մուտքագրելու դաշտ չկա

Եթե օգտատերը սխալ ձևաչափով էլփոստի հասցե է մուտքագրել կամ էլփոստի հասցեի դաշտի արժեքը դատարկ է, ապա մենք նրան վերադարձնում ենք թույլտվության էջ, որտեղ ցուցադրում ենք հաղորդագրություն այս մասին:

Գաղտնաբառի ստուգում

Հաջորդ դաշտը, որը պետք է մշակվի, գաղտնաբառի դաշտն է: Դեպի նշանակված վայր» //(3) գաղտնաբառի մշակման տեղ", մենք գրում ենք:

If(isset($_POST["գաղտնաբառ"]))( // Կտրեք բացատները տողի սկզբից և վերջից $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars ($password, ENT_QUOTES); //Գաղտնագրել գաղտնաբառը $password = md5($password."top_secret"); )else( // Պահպանել սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Մուտքագրեք ձեր գաղտնաբառը

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Մշտապես տեղափոխված"); header("Գտնվելու վայրը՝ ".$address_site."/form_auth.php"); //Դադարեցրեք սցենարի ելքը(); ) )else ( // Պահպանեք սխալի հաղորդագրությունը նիստում։ $_SESSION["error_messages"] .= "

Գաղտնաբառ մուտքագրելու դաշտ չկա

Այստեղ, օգտագործելով md5 () ֆունկցիան, մենք գաղտնագրում ենք ստացված գաղտնաբառը, քանի որ տվյալների բազայում մենք ունենք գաղտնաբառեր կոդավորված տեսքով: Լրացուցիչ գաղտնի բառ կոդավորման մեջ, մեր դեպքում « հույժ գաղտնի« պետք է լինի այն, որն օգտագործվել է օգտատիրոջ գրանցման ժամանակ:

Այժմ դուք պետք է հարցում կատարեք տվյալների բազայում օգտվողի ընտրության վերաբերյալ, որի փոստի հասցեն հավասար է ստացված փոստի հասցեին, իսկ գաղտնաբառը հավասար է ստացված գաղտնաբառին:

//Հարցում դեպի տվյալների բազա՝ օգտագործողի ընտրությամբ: $result_query_select = $mysqli-> հարցում ("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select)( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Հարցման սխալ տվյալների բազայից օգտվողի ընտրության ժամանակ

"; //Վերադարձրեք օգտատիրոջը գրանցման էջի վերնագիր ("HTTP/1.1 301 Moved Permanently"); header ("Տեղադրանքը՝ ".$address_site."/form_auth.php"); //Դադարեցրեք սցենարի ելքը(); )else( //Ստուգեք, արդյոք տվյալների բազայում նման տվյալով օգտվող չկա, ապա ցուցադրեք սխալի հաղորդագրություն if($result_query_select->num_rows == 1)( // Եթե մուտքագրված տվյալները համապատասխանում են տվյալների բազայի տվյալներին, ապա պահպանեք նիստի զանգվածի մուտքն ու գաղտնաբառը: $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Վերադարձրեք օգտվողին գլխավոր էջվերնագիր («HTTP/1.1 301 տեղափոխվել է մշտապես»); header ("Գտնվելու վայրը. ".$address_site."/index.php"); )else( // Պահպանեք սխալի հաղորդագրությունը նիստում: $_SESSION["error_messages"] .= "

Սխալ օգտանուն և/կամ գաղտնաբառը

Կայքի ելք

Եվ վերջին բանը, որ մենք իրականացնում ենք, դա է ելքի կարգը. Այս պահին վերնագրում մենք ցուցադրում ենք հղումներ դեպի թույլտվության էջի և գրանցման էջի:

Կայքի վերնագրում (ֆայլ header.php), օգտագործելով նիստը, մենք ստուգում ենք, արդյոք օգտվողն արդեն մուտք է գործել: Եթե ոչ, ապա մենք ցուցադրում ենք գրանցման և թույլտվության հղումները, հակառակ դեպքում (եթե դա լիազորված է), ապա գրանցման և թույլտվության հղումների փոխարեն ցուցադրում ենք հղումը։ Ելք.

Փոփոխված կոդի կտոր ֆայլից header.php:

Գրանցում

Ելք

Երբ սեղմում եք կայքից դուրս գալու հղումը, մենք մտնում ենք ֆայլ logout.php, որտեղ մենք պարզապես ոչնչացնում ենք նիստի էլեկտրոնային հասցեով և գաղտնաբառով բջիջները: Դրանից հետո մենք օգտվողին վերադարձնում ենք այն էջը, որի վրա սեղմվել է հղումը ելք.

Ֆայլի կոդը logout.php:

Այսքանը: Այժմ դուք գիտեք, թե ինչպես իրականացնել և մշակել գրանցման և թույլտվության ձևերըօգտվող ձեր կայքում: Այս ձևերը կարելի է գտնել գրեթե բոլոր կայքում, ուստի յուրաքանչյուր ծրագրավորող պետք է իմանա, թե ինչպես ստեղծել դրանք:

Մենք նաև սովորեցինք, թե ինչպես վավերացնել մուտքային տվյալները, ինչպես հաճախորդի կողմից (բրաուզերում, օգտագործելով JavaScript, jQuery), այնպես էլ սերվերի կողմից (օգտագործելով PHP լեզու): Մենք էլ սովորեցինք իրականացնել դուրս գալու կարգը.

Բոլոր սցենարները փորձարկված են և աշխատում են: Դուք կարող եք ներբեռնել արխիվը այս փոքրիկ կայքի ֆայլերով այս հղումից։

Հետագայում հոդված կգրեմ, որտեղ կնկարագրեմ. Եվ ես նախատեսում եմ նաև հոդված գրել, որտեղ կբացատրեմ (առանց էջը վերաբեռնելու): Այսպիսով, նոր հոդվածների թողարկման մասին տեղյակ լինելու համար կարող եք բաժանորդագրվել իմ կայքին։

Հարցերի դեպքում դիմեք, նաև, եթե հոդվածում որևէ սխալ եք նկատում, խնդրում եմ տեղեկացնել ինձ։

Դասի պլան (մաս 5):