Ահա html մուտքի էջի կոդի օրինակ: Այս օրինակում մենք ցուցադրել ենք մեկ տեքստային դաշտ՝ Գաղտնաբառ, Վերականգնել կոճակը և Մուտք գործելու կոճակը: Մենք օգտագործել ենք «Վերականգնել» կոճակը, որը վերացնում է բոլոր դաշտերը դատարկ: Մենք սահմանել ենք օգտվողի անուն և գաղտնաբառըարժեքը.

Ահա html մուտքի էջի կոդի օրինակ: Այս օրինակում մենք ցուցադրել ենք մեկ տեքստային դաշտ՝ Գաղտնաբառ, Վերականգնել կոճակը և Մուտք գործելու կոճակը: Մենք օգտագործել ենք «Վերականգնել» կոճակը, որը վերացնում է բոլոր դաշտերը դատարկ: Մենք սահմանել ենք օգտվողի անվան և գաղտնաբառի արժեքը:

Ահա html մուտքի էջի կոդի օրինակ: Այս օրինակում մենք ցուցադրել ենք մեկ տեքստային դաշտ՝ Գաղտնաբառ, Վերականգնել կոճակը և Մուտք գործելու կոճակը: Մենք օգտագործել ենք «Վերականգնել» կոճակը, որը վերացնում է բոլոր դաշտերը դատարկ: Մուտքի էջում մենք օգտագործել ենք JavaScript վավերացում: Մենք սահմանել ենք օգտվողի անվան և գաղտնաբառի արժեքը: Եթե ​​անձը մուտքագրի սխալ օգտվողի անուն կամ գաղտնաբառ կամ երկուսն էլ, ապա կցուցադրվի «Սխալ. սխալ օգտվողի անուն կամ գաղտնաբառ» հաղորդագրությունը: Քանի դեռ անձը չի մուտքագրել ճիշտ օգտվողի անունը և գաղտնաբառը, այն չի մուտքագրվի:

Ճիշտ օգտանունը և գաղտնաբառը մուտքագրելուց հետո դուք կվերահղվեք այլ էջ:

Մուտքի էջն օգտագործվում է դինամիկ վեբկայքի մեծ մասում՝ օգտատերը վավերացնելու համար՝ հիմնվելով նրանց հավատարմագրերի վրա: Կայքերի մուտքի էջ ստեղծելու համար օգտագործվում են HTML ձև և HTML տարրեր: Տեքստային դաշտն օգտագործվում է օգտվողի անունն ընդունելու համար, իսկ գաղտնաբառի տեքստային դաշտը՝ օգտվողից գաղտնաբառը ընդունելու համար:

Ներկայացնել կոճակը օգտագործվում է տվյալների սերվերին վավերացման համար ուղարկելու համար: Լավ է ստուգել օգտատիրոջ մուտքագրումը զննարկիչում՝ օգտագործելով JavaScript: Այս ձեռնարկում մենք ստեղծում ենք ա HTML Մուտքէջի կոդը և օգտատիրոջ մուտքագրման վավերացումը JavaScript-ով: Ժամանակակից վեբ հավելվածում սերվերի կողմից վավերացումը նույնպես շատ կարևոր է, այն կատարվում է սերվերի կողմից՝ սերվերի վրա աշխատող ծրագրի հետ:

Ահա վիդեո ձեռնարկ.

Բայց այս ձեռնարկում դուք կսովորեք ստեղծել մուտքի էջ HTML-ով և հաստատել օգտատիրոջ մուտքագրումը JavaScript-ով: դիտել HTML մուտքի էջի ցուցադրություն.

Ահա մեր պատրաստած մուտքի էջի էկրանի պատկերը.

Մուտքի այս էջը ցուցադրում է Օգտվողի անունը, Գաղտնաբառի տեքստային դաշտերը, այնուհետև կոճակները վերակայման և մուտքի համար: Երբ օգտվողը մուտքագրում է տվյալները և կտտացնում Մուտք կոճակը, JavaScript-ն օգտագործվում է ձևը վավերացնելու համար և սխալի հաղորդագրությունը ցուցադրվում է, եթե վավերացումը ձախողվի:

HTML մուտքի էջ՝ JavaScript վավերացմամբ

HTML մուտքի էջ
օգտագործողի անունը:
Գաղտնաբառ:

Այն

HTML-ի թեգը վեբ հավելվածում օգտագործողի մուտքի ձևի ստեղծման սիրտն է, որը վերցնում է օգտագործողի մուտքագրած տվյալները և վերջապես դրանք ներկայացնում սերվերի կողմից հետագա մշակման համար: Բոլոր մուտքագրված կամ թաքնված դաշտի տվյալները վերցվում և ներկայացվում են սերվերին ձևի պիտակի միջոցով: «Ներկայացնել» կոճակը օգտագործվում է ձևի տվյալները սերվերին ներկայացնելու համար: Ձևը ներկայացնելու համար կարող եք նաև օգտագործել JavaScript կոդը: Օրինակ, եթե ձեր ձևի անունը «loginForm» է, ապա կարող եք կանչել հետևյալ JavaScript կոդը՝ ձևը ծրագրային կերպով ներկայացնելու համար:

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 ձևի նմուշ | Մեկնաբանություններ կայքում

Անուն Փոստ

Պիտակներ, ատրիբուտներ և արժեքներ

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

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

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

Առաջին դիրք Երկրորդ դիրք երրորդ դիրք չորրորդ դիրք

Պիտակներ, ատրիբուտներ և արժեքներ

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

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

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

Առաջին դիրք Երկրորդ դիրք Երրորդ դիրք Չորրորդ դիրք

Առաջին դիրք Երկրորդ դիրք երրորդ դիրք չորրորդ դիրք

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

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

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

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

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

Ինչպես արդեն գիտեք, վեբ-հաճախորդը հնարավորություն ունի տարբեր տեղեկություններ ուղարկել վեբ սերվեր՝ օգտագործելով GET և POST հարցումները: HTML ձևերնման հարցումներ ստեղծելու հիմնական գործիքն է։ Ըստ էության, HTML ձևը վեբ էջի վրա տեղեկատվություն մուտքագրելու դաշտ կամ դաշտեր է: HTML ձևի լավ օրինակ է մուտքի և գաղտնաբառի մուտքագրման ձևը կայքում թույլտվության համար:

HTML ձևը նկարագրվում է զույգ պիտակի միջոցով ձեւը. Այս թեգը ունի երկու կարևոր հատկանիշ. մեթոդև գործողություն. Մեթոդ հատկանիշը սահմանում է HTTP հարցման տեսակը (ստանալ կամ տեղադրել), գործողության հատկանիշը նշում է պահանջվող փաստաթուղթը, այսինքն՝ դեպի այն ֆայլը, որը կպահանջվի: Ճանապարհը կարող է լինել կամ բացարձակ (նշելով կայքի տիրույթը) կամ հարաբերական: Օրինակ:

<ձևի մեթոդ = "ստանալ" գործողություն = "/login.php" > ... </ձեւ>

Կան մի քանի տարբեր տեսակի մուտքային տարրեր, որոնք տեղավորվում են ձևի մեջ: Այն տարրը, որից ես կցանկանայի սկսել, կոչվում է ներկայացնել:

<մուտքագրման տեսակ = "submit" value = "(!LANG:Մուտք գործեք" / > !}

Տարրը կոճակ է, որի վրա սեղմելը հանգեցնում է HTTP հարցումի կատարմանը: Հատկանիշ արժեքըսահմանում է մակագրությունը կոճակի համար: Ձևը կարող է պարունակել բազմաթիվ ներկայացման տարրեր: Հայցվող փաստաթղթում որոշելու համար, թե կոճակներից որն է սեղմվել, անհրաժեշտ է սահմանել ուղարկել տարրերի ատրիբուտները. Անուն. Օրինակ:

<ձևի մեթոդ = "ստանալ" գործողություն = "/control.php" > <մուտքագրման տեսակը = "submit" name = "submit" value = "(!LANG:Add" / > !} <մուտքագրման տեսակը = "submit" name = "submit" value = "(!LANG:Խմբագրել" / > !} </ձեւ>

Հարցում կատարելիս վեբ բրաուզերը կներառի HTTP պարամետր, որը բնութագրում է սեղմված ուղարկել տարրը: Սեղմված կոճակի անվան հատկանիշի արժեքը կընդունվի որպես պարամետրի անուն, իսկ արժեք հատկանիշի արժեքը՝ արժեք: Այսպիսով, երբ սեղմում եք Ավելացնել կոճակը, կստեղծվի հարցում.

/control.php?submit=Ավելացնել

և երբ սեղմում եք Խմբագրել կոճակը.

/control.php?submit=Խմբագրել

Հաջորդ տարրը մեկ տողով տեքստ մուտքագրելու ամենապարզ տարրն է: Դրա HTML կոդը հետևյալն է.

<մուտքագրման տիպ = "text" name = "name" />

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

Կարող եք նաև արժեքի հատկանիշը դնել տարրի վրա՝ դրանում նշելով այն տեքստը, որը լռելյայն մուտքագրվելու է տարրի մեջ: Օրինակ:

<մուտքագրման տեսակ = "տեքստ" անուն = "մուտք" արժեք= "Օգտագործողի անունը" / >

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

<inputtype = "գաղտնաբառ" />

Սա, սկզբունքորեն, բավարար է ստեղծելու համար ամենապարզ ձևըթույլտվություն։ Փորձենք իրականացնել այն, այնուհետև վերադառնանք այլ տեսակի տարրերի քննարկմանը:

Եկեք արմատային գրացուցակում ստեղծենք auth.php ֆայլ հետևյալ բովանդակությամբ.

<html xmlns= «http://www.w3.org/1999/xhtml»> <գլուխ > <վերնագիր >Թույլտվություն</վերնագիր> <մետա http-equiv = «Բովանդակության տեսակ» բովանդակություն = «text/html;charset=utf-8» / > </գլուխ> <մարմին> <form method = "get" action = "/auth.php" > <սեղան > <tr > <td >Օգտագործողի անունը:</td> <td > <մուտքագրման տեսակը = "text" name="login" value="" /> </td> </tr> <tr > <td >Գաղտնաբառ:</td> <td > <մուտքագրման տեսակը = "գաղտնաբառ" name="pass" value="" /> </td> </tr> </աղյուսակ> <մուտքագրման տեսակ = "submit" value = "(!LANG:Մուտք գործեք" / > !} </ձեւ> </մարմին> </html>

Ինչպես տեսնում եք, ներսում ձևի պիտակԴուք կարող եք տեղադրել պիտակներ, որոնք օգնում են գեղեցիկ կերպով նշել ձևը (ես դրեցի աղյուսակը ներսում): Ձևը պարունակում է օգտվողի անուն և գաղտնաբառի դաշտեր՝ համապատասխանաբար մուտք և անցում: Սեղմելով «Մուտք»՝ առաջանում է GET հարցում փաստաթղթի համար /auth.php (այսինքն՝ էջն ինքն է պահանջում): Իմ դեպքում, էջի ամբողջական URL-ը նման էր http://test-domain3/auth.php.

Մուտքագրեք ձեր տվյալները և սեղմեք «Մուտք»: Էջը պետք է վերաբեռնվի: Պետք է փոխվի նաև էջի հասցեն։ Իմ դեպքում այն ​​ստացավ հետևյալ ձևը.

http://test-domain3/auth.php?login=Joker-jar&pass=12345

Սա նշանակում է, որ auth.php փաստաթուղթը պահանջվել է GET պարամետրերով, որոնք մուտքագրվել են HTML ձևի միջոցով: Տեղադրեք auth.php ֆայլի սկզբում PHP մշակող, որը կստանա տվյալներ թույլտվության համար.

//--Ստուգեք, արդյոք տվյալները փոխանցվել են if ( isset ($_GET [ «մուտք» ] ) && isset ($_GET [ «անցում» ] ) ) ( արձագանք "Ձեր ազգանունը: ". $_GET [ «մուտք» ] : ", քո գաղտնաբառը: " . $_GET [ «անցում» ] ; ելք; ) ?>

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

Գաղտնաբառի փոխանցումը GET հարցումով անվտանգ չէ, քանի որ այն տեսանելի է հասցեագոտում: Փոխեք հարցումի տեսակը POST-ի: Դա անելու համար եկեք փոխենք մեթոդի հատկանիշի արժեքը և $_GET զանգվածին մուտք գործելու համար PHP մշակիչում այն ​​փոխենք $_POST-ի։ Ստուգեք, արդյոք սցենարը աշխատում է:

Հաջորդ տարրն է վանդակը. Այն օգտագործվում է, երբ օգտվողից պահանջվում է այո / ոչ պատասխան.

<inputtype="checkbox" />

Եթե ​​վանդակը չնշված է, պարամետրերում ոչինչ չի փոխանցվում: Հակառակ դեպքում, անվան պարամետրը փոխանցվում է արժեքով վրա. Մի բան էլ կա. Որպես կանոն դրոշի կողքին կա բացատրական մակագրություն. Վեբ վարպետի համար լավ պրակտիկա է այս վերնագրի վրա սեղմումների համար վանդակի պատասխանը կիրառելը: Սա արվում է պարզապես. Նշման վանդակին հատկացվում է հատուկ id, իսկ մակագրությունն ինքնին զարդարված է պիտակով պիտակհատկանիշով համար, որի արժեքը հավասար է վանդակի ID-ին.

<մուտքագրման տեսակը = "checkbox" id = "հիշել" name = "հիշել" /> <label for="հիշիր">Ինձ հիշելու համար</պիտակ>

Նմանատիպ տարր օգտագործվում է մի շարք արժեքներից պատասխան ընտրելու համար: Ենթադրենք, օգտվողը պետք է ընտրի երեք գույներից մեկը.

<մուտքագրման տեսակ = "ռադիո" id = "կարմիր" անուն = "գույն" արժեքը = "(!LANG:կարմիր" / > !} <label for="red">Կարմիր</պիտակ> <բր/> <մուտքագրման տեսակ = "ռադիո" id = "կանաչ" անուն = "գույն" արժեք = "(!LANG:կանաչ" / > !} <label for = "կանաչ">Կանաչ</պիտակ> <բր/> <մուտքագրման տեսակ = "ռադիո" id = "կապույտ" անուն = "գույն" արժեք = "(!LANG:կապույտ" / > !} <label for="blue">Կապույտ</պիտակ> <բր/>

Նշենք, որ բոլոր տարրերը նույն արժեքըԱնուն. Միայն մեկ արժեք կարող է ընտրվել: Ընտրված տարրի արժեքը, օրինակ, կփոխանցվի HTTP պարամետրին գույն=կապույտ.

Որպեսզի սկզբնապես ընտրվի տարրերից մեկը, օրինակ՝ առաջինը, անհրաժեշտ է սահմանել հատկանիշը ստուգվումիմաստով ստուգվում(XHTML ստանդարտ):

<մուտքագրման տեսակ = "ռադիո" id = "կարմիր" անուն = "գույն" արժեքը = "(!LANG:կարմիր" checked = "checked" / > !}

Մեծ բազմագիծ տեքստ մուտքագրելու համար հատուկ տարր կա textarea:

<textarea rows="6" cols="20" name="text">Տեքստ տարրի ներսում</textarea>

Տեքստ տարրի ներսում

Այս տարրը, ինչպես տեսնում եք, տարբերվում է նախորդներից։ Նա է զույգ պիտակ, իսկ տեքստը տեղադրվում է ոչ թե հատկանիշի, այլ պիտակի մարմնում։ Տարրն ունի նաև անվան հատկանիշ։ Հատկանիշով շարքերկարող եք տարրի մեջ սահմանել տողերի քանակը, cols- տողի նիշերի քանակը: textarea տարրը, որպես կանոն, օգտագործվում է POST ձևերում։ ներառում է երկար տեքստի մուտքագրում (օրինակ՝ ֆորումի գրառման ձև):

Բացվող ցուցակ: Հավանաբար, ծրագրերում հանդիպել եք նման տարրի։ Թույլ է տալիս ընտրել մեկ արժեք հավաքածուից: Տարրերի կոդը նույնպես անսովոր է: Նախ, ստեղծվում է կոնտեյների տարր ընտրել, դրան տրվում է անվան հատկանիշ.

<ընտրել name = "քաղաքներ"> </ընտրել>

Ցանկի տարրերը տեղադրվում են տարայի ներսում: Ցանկի տարրը զույգ պիտակ է տարբերակ, յուրաքանչյուր տարրին տրվում է արժեքային հատկանիշ։ Տարրի մարմնում տարրի մակագրությունը գրված է.

<ընտրել name = "քաղաք"> <տարբերակի արժեքը = "(!LANG:msk" > !}Մոսկվա</տարբերակ> <տարբերակի արժեքը = "(!LANG:vlad" > !}Վլադիվոստոկ</տարբերակ> <տարբերակի արժեքը = "(!LANG:nsk" > !}Նովոսիբիրսկ</տարբերակ> </ընտրել>

HTTP հարցումը փոխանցվում է պարամետր, որն ունի, օրինակ, ընտրված տարրի անունը և արժեքի արժեքը քաղաք=վլադ. Լռելյայնորեն ընտրված է ցանկի առաջին տարրը, եթե ցանկանում եք, որ մեկ այլ տարր ընտրվի, սահմանեք դրա հատկանիշը ընտրվածիմաստով ընտրված:

<տարբերակի արժեքը = "(!LANG:vlad" selected = "selected" > !}Վլադիվոստոկ</տարբերակ>

Արժեքների ցանկ. Եթե ​​ընտրեք տարրին տրվի հատկանիշ չափըթվային արժեքով բացվող ցանկը կվերածվի արժեքների ցանկի: Այս դեպքում չափի հատկանիշի արժեքը կորոշի տարրի ուղղահայաց չափը.

<ընտրել name = "քաղաք" size="3"> <տարբերակի արժեքը = "(!LANG:msk" > !}Մոսկվա</տարբերակ> <տարբերակի արժեքը = "(!LANG:vlad" > !}Վլադիվոստոկ</տարբերակ> <տարբերակի արժեքը = "(!LANG:nsk" > !}Նովոսիբիրսկ</տարբերակ> </ընտրել>

Մոսկվա Վլադիվոստոկ Նովոսիբիրսկ

Եթե ​​ընտրեք տարրին տրվի հատկանիշ բազմակիիմաստով բազմակի(XHTML ստանդարտ), ապա հնարավոր կլինի միաժամանակ ընտրել մեկից ավելի տարր (օրինակ՝ պահել Ctrl ստեղնը): Այս դեպքում, բոլոր ընտրված տարրերը նույն անուններով կփոխանցվեն HTTP հարցումով, օրինակ. town=msk&town=vlad&town=nsk.

Երբեմն անհրաժեշտ է HTTP հարցման մեջ փոխանցել պարամետր, որը օգտատերը չպետք է խմբագրի, իսկ երբեմն նույնիսկ տեսնի: Ենթադրենք, դուք իրականացնում եք լուրերի խմբագրման ձև: HTTP հարցումում դուք պետք է փոխանցեք այս նորության ID-ն: Նման դեպքերի համար կա թաքնված HTML ձևի տարր.

<մուտքագրման տեսակ = "թաքնված" name = "param" value="" />

Այս տարրը չի երևա ձևի վրա, սակայն name=value HTTP պարամետրը կփոխանցվի, երբ հարցումը կատարվի:

Երբեմն ձևը մաքրող տարրը կարող է օգտակար լինել: Կոճակը, սեղմելիս, օգտատիրոջ կողմից ձևաթղթում մուտքագրված բոլոր տվյալները ջնջվում են.

<մուտքագրման տեսակը = "reset" value = "(!LANG:Reset" / > !}

Թվարկված տարրերն ունեն երկու հատուկ հատկանիշ.

readonly = "readonly" - արգելում է փոփոխել տեղեկատվությունը տարրի մեջ ("readonly" ռեժիմ);
disabled="disabled" - տարրը դարձնում է ոչ ակտիվ:

Կա նաև ֆայլ ընտրելու տարր, որը կվերբեռնվի վեբ սերվեր՝ ձևը ներկայացնելիս, բայց դրա մասին ավելի մանրամասն՝ գուցե առանձին հոդվածում։

Մուտքի ձևերը կարելի է գտնել ֆորումներով, խանութներով, WordPress-ով վեբկայքերում և հիմնականում ինտերնետում ամեն ինչ պահանջում է մուտքի ձև ինչ-որ տեղ ինչ-որ բան մուտք գործելու համար: Ամբողջ վեբը թերի է առանց մուտքի ձևերի և գրանցման, գրանցման ձևերի:

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

Փորձեք օգտագործել մուտքի այս բոլոր անվճար ձևանմուշները, քանի որ դրանցից շատերն ունեն նաև նախապես կառուցված HTML վավերացման առանձնահատկություններ, ինչպես նաև որոշ opt jQuery կամ HTML վավերացում (օրինակ՝ Մուտք/Գրանցման ձևը ստորև անցողիկ չափիչով):

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

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

Պարզ և արդյունավետ մուտքի ձև ձեր կայքի համար, որը պահանջում է հիմնական մուտքային դաշտեր և առանց լրացուցիչ ծրագրավորման:

Հարթ մուտքի ձևի ձևավորում, որը նախատեսված է ձեր կայքի համար, որն արդեն հարթ է: Ներբեռնեք և օգտագործեք այս ձևանմուշը ցանկացած նպատակով:

Պահանջո՞ւմ եք արագ մուտք գործել ձեր հաճախորդների համար: Մի անհանգստացեք, այս գեղեցիկ տեսք ունեցող մուտքի ձևը ձեզ կտանի առանց որևէ դժվարության: Ներբեռնեք աղբյուրի կոդը և ստուգեք ցուցադրությունը, քանի որ կարող եք դաշտերում տեղադրել օգտագործողի անուն և գաղտնաբառ և փորձեք մուտք գործել: Դուք կտեղափոխվեք նույն պրոֆիլի էջ, որը փառահեղ տեսք ունի «Դուրս գալուց» կոճակով, որը ցույց է տալիս դուրս գալու անիմացիան:

Google-ի նյութական դիզայնը դառնում է հանրաճանաչ հարթ դիզայնի համեմատ, մենք կարող ենք խորը և խնամքով ստվերված տեսնել մուտքի ձևը և գրանցման ձևը այս css3 ձևանմուշում:

Այստեղ դուք ստանում եք մուտքի ևս մեկ փայլուն ձև ձեր բիզնեսի կայքի համար՝ մուտքի դաշտերը թաքցնելու/ցուցադրելու հնարավորությամբ: Լավ կոդավորված css/html/js դիզայնը ձեզ ավելի լավ բեռնում կտա՝ առանց խախտելու ձեր ընթացիկ կայքի արագությունը:

Նվազագույն մուտքի ձև հեղուկ անիմացիայով

Մուտքի ձևի հարթ անիմացիա, որը բացում է մուտքի բաժինը՝ սեղմելով նկարը կամ կոճակը, ինչպես ձեզ անհրաժեշտ է:

Մինիմալիստական ​​մուտքի ձև css-ով

Այստեղ դուք կգտնեք ոչ շքեղ մուտքի ձևի UI, որը տեղադրված է ամբողջ էկրանի ֆոնի վրա: Այն Ներբեռնել ֆայլըՁեզ կտրամադրի css և html՝ ձեր կայք այս մուտքի հեշտ իրականացման համար:

Անիմացիոն մուտքի ձև

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

Նրբագեղ մուտք

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

Հանգիստ մուտքի էկրան

Մաքուր մուտքի ձև՝ անիմացիոն ֆոնով, որը հանգստացնող զգացողություն է հաղորդում ամբողջ էջին: Ներբեռնեք ամբողջ ձևանմուշը zip ձևաչափով codepen-ից:

Մուտքագրման և գրանցման ձև

Հեշտությամբ ինտեգրեք այս հեղուկ մուտքի և գրանցման ձևը ձեր կայքում: Այս ներբեռնմամբ zip ֆայլը ձեզ կտրամադրի css, html և js ձևանմուշներ: Սոցիալական մեդիայի գրանցումը հասանելի է նաև գաղտնաբառի ցուցադրման/թաքցնելու ընտրանքներով՝ էկրանին գաղտնաբառի հեշտ մուտքագրման համար:

Մուտքի ձևը Ստեղծել հաշիվ

Մուտքի ձևը, որը ցուցադրվում է fadein էֆեկտով, պարզապես զվարճալի է դիտելը: Այս էֆեկտը կարելի է տեսնել միայն մի քանի ժամանակակից մուտքի ձևերով: Օգտագործեք սեղմեք ինձ՝ ձևը փոխելու համար գրանցվելու կամ ձև ստեղծելու համար:

Մինիմալ ոճի մուտքի ձևը հարթ դիզայնով կարելի է ներբեռնել ստորև նշված հղումից: HTML վավերացումը հասանելի է և սահմանված է այս մուտքի ձևանմուշում:

Բեռնել

Մուտք գործելու համար նվազագույն ձևանմուշ

Էլեկտրոնային փոստի վավերացումն առկա է, և այս ձևանմուշը մաքուր css, html է՝ առանց jquery-ի շքեղ մոդուլների:

Բեռնել

Գրանցման/Մուտքի ձև

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

Բեռնել

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

Բեռնել

Այն տրամադրվում է և՛ որպես PSD, և՛ որպես ամբողջությամբ կոդավորված HTML/CSS տարբերակ, այնպես որ կարող եք անմիջապես սկսել այն ինտեգրել:

Մուտքի ձև (կոդավորված)

Մասնագիտական ​​մուտքի ձև: Ներբեռնումը ներառում է PSD ֆայլը, և ես նաև ցանկացա այն կոդավորել, ուստի ներառեցի նաև xHTML, Js և CSS ֆայլերը:

Բեռնել

Սպիտակ Պարզ մուտքի ձև

Մաքուր և պարզ մուտքի ձև՝ ներկայացնելու կլոր կոճակով և նրբագեղ ֆոկուսային վիճակներով:

Պարզապես մուտքի ձև

Պարզապես մուտք գործելու ձևը ձևավորված և նախագծված է զուտ CSS3-ի միջոցով: Ձևը ստեղծվել է բավականին պարզ նշագրման միջոցով և ոճավորվել՝ օգտագործելով շատ հիմնական CSS3 հատկությունները:

Բեռնել

վերադառնում է

Օգտագործումը

Օգտագործման օրինաչափություն

wp_login_form(array("echo" => true, "redirect" => site_url($_SERVER["REQUEST_URI"]), "form_id" => "loginform", "label_username" => __("Username"), "label_password" " => __("Գաղտնաբառ"), "label_remember" => __("Հիշիր ինձ"), "label_log_in" => __("Մուտք գործել"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => NULL, "value_remember" => false)); $արգս (տող/զանգված)Փաստարկների զանգված, որը վերահսկում է արդյունքը:
Կանխադրված. լռելյայն կարգավորումներ

$args պարամետրի փաստարկներ

արձագանք (տրամաբանական)Ցուցադրել (1) կամ վերադարձնել (0):
Կանխադրված՝ 1վերահղում (տող) URL-ը, որին այն կփոխանցվի լիազորումից հետո:
Կանխադրված: ընթացիկ էջ form_id (տող) id պիտակի հատկանիշ

.
Կանխադրված՝ «loginform» label_username (տող)«Օգտագործողի անուն» դաշտի վերնագրի տեքստը:
Կանխադրված՝ «__(«Օգտվողի անուն»)» label_password (տող)«գաղտնաբառ» դաշտի վերնագրի տեքստը:
Կանխադրված՝ «__(«Գաղտնաբառ»)» label_remember (տող)«Հիշիր ինձ» դաշտի վերնագրի տեքստը:
Կանխադրված՝ "__("Հիշիր ինձ")" label_log_in (տող)Ներկայացրեք կոճակի տեքստը:
Կանխադրված՝ "__("Մուտք գործել")" id_username (տող) id հատկանիշի արժեքը.
Կանխադրված՝ «user_login» id_password (տող) id հատկանիշի արժեքը.
Կանխադրված՝ «user_pass» id_remember (տող) id հատկանիշի արժեքը.
Կանխադրված՝ «հիշել» id_submit (տող) id հատկանիշի արժեքը.
Կանխադրված՝ «wp-submit»հիշիր (տրամաբանական)Հիշեք դաշտի արժեքները (1), թե ոչ (0):
Կանխադրված՝ 1 value_username (տող)Լռելյայն օգտանուն:
Կանխադրված՝ «»արժեք_հիշել (տող)Արժեք հատկանիշի արժեքը, «հիշիր ինձ» դաշտը։ Կանխադրվածը 1 է - վանդակը նշված է: 0 - չստուգված:
Կանխադրված՝ 1

Օրինակներ

#մեկ. Սովորական ձևի ցուցադրում.

Կցուցադրվի՝

Մուտք գործել

Գաղտնաբառ

Ինձ հիշելու համար

#2 Սխալ մուտքի/գաղտնաբառ մուտքագրելիս թողեք նույն էջում

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

Սա փոխելու և օգտվողին նույն էջում թողնելու համար, նույնիսկ եթե նա սխալ տվյալներ է մուտքագրել, կարող եք օգտագործել wp_login_failed կեռիկը.

## օգտատիրոջը թողնում է նույն էջում, երբ մուտքի ձևի մեջ սխալ մուտք/գաղտնաբառ մուտքագրում է wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); ֆունկցիա my_front_end_login_fail($username) ( $referrer = $_SERVER["HTTP_REFERER"]; // որտեղից է եկել հարցումը // Եթե կա ուղղորդող, և սա էջ չէ wp-login.php if(!empty($referrer ) && !strstr($ referrer,"wp-login") && !strstr($referrer,"wp-admin")) (wp_redirect(add_query_arg("login", "failed", $referrer)); // վերահղում և ավելացնել հարցման պարամետր?login= ձախողված ելք; ))

#3 WordPress գրանցման ձև

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

«մեթոդ=փոստ»>

Օգտագործողի անունը

Էլ

Գրանցման հաստատումը կուղարկվի ձեր էլ.

Փոփոխությունների ցանկ

3.0.0 տարբերակից

Ներկայացրեց.

Կոդը wp մուտքի ձև. wp-includes/general-template.php WP 5.2.3

true, // Կանխադրված «վերահղման» արժեքը օգտվողին հետ է տանում դեպի հարցումի URI: "վերահղում" => (is_ssl() ? "https://": "http://"): $_SERVER["HTTP_HOST"]: $_SERVER["REQUEST_URI"], "form_id" => "loginform", "label_username" => __("Օգտվողի անուն կամ էլփոստի հասցե"), "label_password" => __("Password"), "label_remember" => __ ("Հիշել ինձ"), "label_log_in" => __("Մուտք գործել"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "հիշել", "id_submit" => "wp-submit", "remember" => true, "value_username" => "", // Սահմանել "value_remember" true to default the "Remember me" վանդակը, որպեսզի նշվի: "value_remember" => false,); /** * Զտում է լռելյայն մուտքի ձևի ելքային արգումենտները: * * @since 3.0.0 * * @տես wp_login_form() * * @param զանգված $defaults Լռելյայն մուտքի ձևի արգումենտների զանգված: */ $args = wp_parse_args ($args, application_filters ("login_form_defaults", $defaults)); /** * Զտում է բովանդակությունը՝ մուտքի ձևի վերևում ցուցադրելու համար: * * Զտիչը գնահատում է պարզապես բացման ձևի պիտակի տարրին հետևելով: * * @since 3.0.0 * * @param string $content Ցուցադրվող բովանդակություն: լռելյայն դատարկ: * @param զանգված $args Մուտքի ձևի արգումենտների զանգված: */ $login_form_top = application_filters ("login_form_top", "", $args); /** * Զտում է բովանդակությունը՝ մուտքի ձևի մեջտեղում ցուցադրելու համար: * * Զտիչը գնահատում է միայն այն վայրը, որտեղ ցուցադրվում է «login-password» * դաշտը: * * @since 3.0.0 * * @param string $content Ցուցադրվող բովանդակություն: լռելյայն դատարկ: * @param զանգված $args Մուտքի ձևի արգումենտների զանգված: */ $login_form_middle = application_filters ("login_form_middle", "", $args); /** * Զտում է բովանդակությունը՝ մուտքի ձևի ներքևում ցուցադրելու համար: * * Զտիչը գնահատում է հենց փակվող ձևի պիտակի տարրից առաջ: * * @since 3.0.0 * * @param string $content Ցուցադրվող բովանդակություն: լռելյայն դատարկ: * @param զանգված $args Մուտքի ձևի արգումենտների զանգված: */ $login_form_bottom = application_filters ("login_form_bottom", "", $args); $form = "

" . $login_form_top ."

" .esc_html($args["label_username"]) ."

" .esc_html($args["label_password"]) ."

" . $login_form_middle . " " . ($args["remember"]?"

" .esc_html($args["label_remember"]) ."

" : "") . "

" . $login_form_bottom ."

"; if ($args["echo"]) (echo $form; ) else (retur $form;))