Ինչպես ստեղծել html գրանցման ձև մկաններով: CSS ձևեր. Օրինակ՝ ռադիո կոճակների օգտագործում

Մենք կազմել ենք 60 անվճար մուտքի ձևերի ցանկ, որոնք կարող եք օգտագործել ձեր WordPress կայքում, բլոգում, ֆորումում և այլն: Յուրաքանչյուր ձև լայնորեն փորձարկված է, որպեսզի համոզվի, որ այն աշխատում է և որ աղբյուրի կոդը հասանելի է:

WordPress մուտքի հարմարեցում

Այս ցանկի ձևերը ստեղծվել են օգտագործելով HTML/css. Բայց այս դեպքում մենք խոսում ենքմասին լավագույն pluginպարամետրերի համար օգտագործողի ինտերֆեյս WordPress. Այն գալիս է մի քանի ձևանմուշներով, որոնք կարող են հետագայում հարմարեցվել կայքի դիզայնին համապատասխանելու համար: Այս փլագինով դուք կարող եք ազատվել WordPress-ի ձանձրալի մուտքի էջից։

Ստեղծագործական մուտքի ձև

Պարզ, բայց ստեղծագործ մուտքի ձև, որը կառուցված է HTML և CSS3-ով: Այն կարող է օգտագործվել նաև որպես գրանցման ձև: Սա մեր սիրելի ձևանմուշն է այս ցանկում:

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

Թույլտվության ձև №1

Պարզ, ստեղծագործ և աշխույժ մուտքի ձև՝ գրադիենտ ֆոնով: Դուք կարող եք այն օգտագործել ցանկացած նպատակով, օրինակ՝ թույլտվություն վեբ ծառայության, բջջային կամ աշխատասեղանի հավելվածում:

Բեռնել

Նախադիտում

Թույլտվության ձև №2

Մինիմալիստական ​​և բարդ մուտքի ձև՝ կոճակով, գրադիենտ լրացմամբ, անիմացիայով և պատկերանշանով: Օգտագործեք այն՝ փոխելով անհրաժեշտ տարրերը։

Բեռնել

Նախադիտում

Թույլտվության ձև №3

Մուտք գործելու էջ՝ ֆոնային պատկերով, ստվերային և սավառնող էֆեկտով՝ մուտքի կոճակի համար:

Բեռնել

Նախադիտում

Թույլտվության ձև №4

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

Բեռնել

Նախադիտում

Թույլտվության ձև №5

Գեղեցիկ և ժամանակակից ձև՝ Facebook-ի կամ Google-ի մուտքի տարբերակներով: Դրա կոճակներն ունեն գեղեցիկ սավառնող էֆեկտներ՝ օգտվողներին օգտատերերի հիանալի փորձ ապահովելու համար:

Բեռնել

Նախադիտում

Թույլտվության ձև №6

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

Բեռնել

Նախադիտում

Թույլտվության ձև №7

Ձևը հաշվի մուտքի երեք տարբերակով՝ Facebook, Twitter կամ Հասցե Էլ. Իսկ եթե օգտագործողը չունի հաշիվ, ձևը կարող եք կապել գրանցման էջին։

Բեռնել

Նախադիտում

Թույլտվության ձև թիվ 8

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

Բեռնել

Նախադիտում

Թույլտվության ձև №9

Եթե ​​ցանկանում եք հեռու մնալ մաքուր սպիտակ կամ պինդ գույնի դիզայնից, դուք պետք է նայեք այս ձևին: Այն աջակցում է հավելումներին ֆոնային պատկերկամ գրադիենտ ծածկույթ: Կա նաև Facebook-ի կամ Google-ի միջոցով մուտք գործելու տարբերակ:

Բեռնել

Նախադիտում

Թույլտվության ձև №10

Սա նախորդ տարբերակի ճիշտ հակառակն է: Այն մինիմալիստական ​​տեսք ունի, բայց միևնույն ժամանակ շատ կոկիկ։

Բեռնել

Նախադիտում

Թույլտվության ձև №11

Ձևը զրոյից կառուցելու փոխարեն կարող եք օգտագործել այս ձևանմուշի նման պատրաստի հիանալի ձևանմուշ:

Բեռնել

Նախադիտում

Թույլտվության ձև №12

Կապույտ ստվերով ծածկված ֆոնային պատկեր, ավատարով անուն և մուտքագրման դաշտեր մուտքի ձև #12 է: Մուտքի կոճակին ավելացրել է սավառնող էֆեկտ:

Բեռնել

Նախադիտում

Թույլտվության ձև №13

Պառակտված էկրանի ձևանմուշ, որտեղ մի կեսը պատկերի համար է, իսկ մյուս կեսը՝ ձևի համար:

Բեռնել

Նախադիտում

Թույլտվության ձև №14

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

Բեռնել

Նախադիտում

Թույլտվության ձև №15

Բավականին մինիմալիստական ​​ձև, բայց դրա վերևում կարող եք պաստառ ավելացնել: Այս փոքրիկ տարբերակով դուք կարող եք ավելի գրավիչ դարձնել ձևը:

Բեռնել

Նախադիտում

Թույլտվության ձև №16

Սա մուտքի ձևն է ամբողջ էկրանով պատկեր, որի վերևում տեղադրված են լոգին և գաղտնաբառ մուտքագրելու դաշտեր, ինչպես նաև սավառնող էֆեկտով կոճակ։

Բեռնել

Նախադիտում

Թույլտվության ձև №17

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

Բեռնել

Նախադիտում

Թույլտվության ձև №18

Բեռնել

Նախադիտում

Թույլտվության ձև №19

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

Բեռնել

Նախադիտում

Թույլտվության ձև №20

Գրադիենտ ֆոն, սև կոճակ՝ սավառնող էֆեկտով, օգտվողի անուն և գաղտնաբառ դաշտեր և «Մոռացե՞լ եք գաղտնաբառը»: Այս ամենը գտնվում է թիվ 20 թույլտվության ձևում։

Բեռնել

Նախադիտում

Բացվող մուտքի ձև

Բեռնել

Լողացող գրանցման ձև

Նախատեսված է բաժանորդագրության ձևերի համար՝ օգտագործելով ներդիրներ և պիտակներ:

Բեռնել

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

Այն, ինչ նախկինում կանգնեցնում էր մարդկանց, երբ նրանք ցանկանում էին մուտք գործել WordPress կայք, այն էր, որ այն չափազանց պարզ տեսք ուներ: Այս ձևը պահպանում է հանրաճանաչ դիզայնը, բայց դրան ավելացնում է գունային սխեման:

Բեռնել

Բնակարան մուտք – Գրանցվելու ձև

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

Բեռնել

Մուտք գործեք ինքնուրույն SCSS ձևով

Սա SCSS-ի միջոցով ստեղծված ձև է: CSS ընդլայնում, որն ավելացնում է նոր առանձնահատկություններ և նրբագեղություն հիմնական լեզվին: Այն թույլ է տալիս օգտագործել փոփոխականներ, ներդիր կանոններ, ներկառուցված ներմուծումներ և այլն:

Բեռնել

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

Սա անիմացիոն մուտքի ձև է, և «Hey you, Login արդեն» վերևը վերածվում է ձևի, երբ կոճակը սեղմվում է:

Բեռնել

Մուտքի ձև՝ օգտագործելով CSS3 և HTML5

Օրինակ, թե ինչպես ստեղծել մուտքի պարզ ձև՝ օգտագործելով HTML5 և CSS3: Այն օգտագործում է կեղծ տարրեր (:after և :bere)՝ մի քանի էջերի էֆեկտ ստեղծելու համար։ Այս ձևը օգտագործում է HTML5՝ տվյալների վավերացումը և ուղարկումը հեշտացնելու համար:

Բեռնել

Մուտք գործեք Shake Effect-ով

Եթե ​​մտել ես սխալ գաղտնաբառ, ձեզ կտեղեկացնեն գեղեցիկ էֆեկտցնցում. Պարզ և արդյունավետ լուծում.

Բեռնել

Boxy մուտքի ձև

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

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

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

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

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

• - որոշեք ձևը.
• name="" - սահմանում է ձևի անվանումը:
• method="" - որոշում է, թե ինչպես են տվյալները ուղարկվում ձևից: Արժեքները՝ «ստանալ» (կանխադրված) և «փոստ» . Ավելի հաճախ օգտագործվում է «փոստ» մեթոդը, քանի որ այն թույլ է տալիս փոխանցել մեծ քանակությամբ տվյալներ։
• action="" - որոշում է url-ը, որով տվյալները ուղարկվում են մշակման: Մեր դեպքում՝ enter_data.php ..
• - սահմանել ձևի այնպիսի տարրեր, ինչպիսիք են կոճակները, անջատիչները, տվյալների մուտքագրման տեքստային դաշտերը:
• type="text" - սահմանում է տեքստային դաշտ տվյալների մուտքագրման համար:
• type="password" - սահմանում է գաղտնաբառ մուտքագրելու դաշտ, մինչդեռ տեքստը ցուցադրվում է աստղանիշներով կամ շրջանակներով:
• type="checkbox" - սահմանում է ռադիո կոճակ:
• type="hidden" - սահմանում է թաքնված ձևի տարր, որն օգտագործվում է անցնելու համար լրացուցիչ տեղեկությունսերվերին:
• 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" դրոշը, որը հնարավորություն է տալիս ընտրել մի քանի տարրեր: Դրա բացակայությունը թույլ է տալիս ընտրել միայն մեկ կետ:

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

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

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

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

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

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

Տարր

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

Տարր

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

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

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

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

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

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

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

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

Ձեր մուտքը.

Գաղտնաբառ:

Ձեր մուտքը.

Գաղտնաբառ:

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

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

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

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

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

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

1. 18 - ից ցածր
2. 18-ից 24-ը
3. 25-ից 35
4. ավելի քան 35

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

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

Մշակման ֆայլը գտնվում է սերվերի վրա 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, որը սահմանում է խմբի վերնագրի տեքստը, որը պետք է ներդրվի շրջանակում:

...ձևի բովանդակություն...

Պարզապես ձևի տարրի ներսում պետք է լինեն վերահսկիչներ, որոնք կարող են լինել այնքան, որքան ցանկանում եք:

Ձևի հատկանիշներ.

• Գործողությունների հատկանիշը սահմանում է սերվերի ֆայլ՝ սկրիպտով, որը պատասխանատու է ձևից ուղարկված տվյալների հիմնական մշակման համար: Սովորաբար, այս ֆայլի կոդը գրված է սերվերի կողմից ծրագրավորման լեզվով, ինչպիսին է phpկամ perl.
• Enctype հատկանիշը ցույց է տալիս սերվերին փոխանցվող տեղեկատվության տեսակը, եթե դա ընդամենը տեքստային տվյալ է - text/plain , եթե ֆայլերը ուղարկվում են ձևի հետ, ապա պետք է նշել բազմամաս/ձև-տվյալները:
• Մեթոդի հատկանիշը սահմանում և սահմանում է տվյալների փոխանցման ձևը: Սրա վրա մանրամասն չենք անդրադառնա, բայց պետք է ասել, որ ավելի հուսալի փոխանցման համար պետք է նշել փոստի մեթոդը։

html ձևի տարրեր

<մուտքագրման տեսակ = "տեքստ" անուն = "մուտք" չափ = "20" արժեք = "(!LANG:Մուտք" maxlength = "25" > !}

Արդյունք:

• Type հատկանիշի արժեքը՝ text - ցույց է տալիս, որ սա տեքստային դաշտ է
• չափը - տեքստային դաշտի չափը նիշերով
• maxlength - դաշտում տեղավորվող նիշերի առավելագույն քանակը
• արժեքը - սկզբնական տեքստը տեքստային դաշտում
• անուն - տարրի անվանումը, որն անհրաժեշտ է մշակման ֆայլում տվյալների մշակման համար

Արդյունք:


Տեքստի փոխարեն դաշտում ցուցադրվում է դիմակ՝ աստղանիշներ կամ շրջանակներ

<մուտքագրման տեսակ = "ներկայացնել" արժեք= «Ուղարկել տվյալներ»>

Արդյունք:

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

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

Արդյունք:

Կոճակը վերադարձնում է բոլոր հսկիչների վիճակը բնօրինակին (մաքրում է ձևը)

<մուտքագրման տեսակը = "checkbox" name = "asp" արժեքը = "(!LANG:այո" > !}Ա.Ս.Պ.<br > <մուտքագրման տեսակը = "checkbox" name = "js" արժեքը = "(!LANG:այո" checked = "checked" > !} javascript<br > <մուտքագրման տեսակը = "checkbox" name = "php" արժեքը = "(!LANG:այո" > !} PHP<br > <մուտքագրման տեսակը = "checkbox" name = "html" արժեքը = "(!LANG:այո" checked = "checked" > !} HTML<br >

Ա.Ս.Պ.
javascript
PHP
HTML



Արդյունք:

Ա.Ս.Պ.
javascript
PHP
HTML

html-ում վանդակն օգտագործվում է բազմակի ընտրություն կազմակերպելու համար, այսինքն. երբ անհրաժեշտ է և հնարավոր է ընտրել մի քանի պատասխան

<մուտքագրման տեսակը = «ռադիո» անուն = «գրքի» արժեքը = «(!LANG:asp" > !}Ա.Ս.Պ.<br > <մուտքագրման տեսակ = «ռադիո» անուն = «գրքի» արժեքը = «(!LANG:js" > !} javascript<br > <մուտքագրման տեսակը = «ռադիո» անուն = «գրքի» արժեքը = «(!LANG:php" > !} PHP<br > <մուտքագրման տեսակը = «ռադիո» անուն = «գրքի» արժեքը = «(!LANG:html" checked = "checked" > !} HTML<br >

Ա.Ս.Պ.
javascript
PHP
HTML




Արդյունք:

Ա.Ս.Պ.
javascript
PHP
HTML

ռադիո կոճակը html ծառայում է մի քանի տարբերակներից մեկ ընտրության համար

Ստուգված հատկանիշն անմիջապես սահմանում է տարրը ստուգված

Կարևոր է.Տարրերի համար ռադիոանհրաժեշտ է, որ հատկանիշի արժեքը ԱնունԽմբի բոլոր տարրերն ունեին նույնը. այս դեպքում տարրերը կաշխատեն փոխկապակցված, երբ մի տարրը միացված է, մյուսները կանջատվեն։

Բացվող ցուցակ HTML

Դիտարկենք բացվող ցուցակ ավելացնելու օրինակ.

1 2 3 4 5 6

<ընտրեք name = "գիրք" size="1"> <տարբերակի արժեքը = "(!LANG:asp" > !}Ա.Ս.Պ.</տարբերակ> <տարբերակի արժեքը = "(!LANG:js" > !} JavaScript</տարբերակ> <տարբերակի արժեքը = "(!LANG:php" > !} PHP</տարբերակ> <տարբերակի արժեքը = "(!LANG:html" selected = "selected" > !} HTML</տարբերակ> </ընտրել>

Ա.Ս.Պ. JavaScript PHP HTML

Արդյունք:

• Բացվող ցուցակը բաղկացած է հիմնական պիտակից՝ ընտրել, որն ունի փակվող զույգ, և ցանկի յուրաքանչյուր տարր ընտրանքային պիտակ է, որի ներսում ցուցադրվում է նյութի տեքստը:
• չափի հատկանիշը արժեքով «մեկ»ցույց է տալիս, որ ծալված տեսքով ցանկը ցուցադրում է մեկ տարր, մնացածը բացվում է, երբ սեղմում եք ցանկի սլաքը
• Տարրի ընտրված հատկանիշը (տարբերակը) ցույց է տալիս, որ այս կոնկրետ տարրը սկզբում տեսանելի կլինի, իսկ մնացած տարրերը «փլուզված» են:

Մեծ և բարդ ցուցակների համար կա տարբերակ ավելացնել ենթագրեր- optgroup tag պիտակի հատկանիշով (մակագրություն).

1 2 3 4 5 6 7 8 9 10 11 12

<ընտրեք name = "գիրք" size="1"> <optgroup label = «Անգլերեն» > <տարբերակի արժեքը = "(!LANG:asp" > !}Ա.Ս.Պ.</տարբերակ> <տարբերակի արժեքը = "(!LANG:js" > !} JavaScript</տարբերակ> <տարբերակի արժեքը = "(!LANG:php" > !} PHP</տարբերակ> <տարբերակի արժեքը = "(!LANG:html" selected = "selected" > !} HTML</տարբերակ> </optgroup> <optgroup label = «Ռուսներ» > <տարբերակի արժեքը = "(!LANG:asp_eng" > !} ASP ռուսերեն</տարբերակ> <տարբերակի արժեքը = "(!LANG:js_eng" > !} JavaScript ռուսերեն</տարբերակ> </optgroup> </ընտրել>

Ա.Ս.Պ. JavaScript PHP HTML ASP ռուսերեն JavaScript ռուսերեն

Հնարավորություն ընձեռելու համար ընտրեք մի քանի տարրեր միաժամանակդուք պետք է ավելացնեք բազմակի հատկանիշը: Բայց այս դեպքում, չափի հատկանիշը նույնպես պետք է սահմանվի 1-ից մեծ արժեքի վրա:

Տեքստ

Արդյունք:

• Տարրի լայնությունը կախված է cols հատկանիշից, որը նշում է, թե քանի նիշ տեղավորվում է հորիզոնական:
• Տողերի հատկանիշը նշում է տարրի տողերի քանակը:

Այլ տարրեր

Լրացուցիչ տարրեր և հատկանիշներ

• Վերահսկողության համար ռադիոև վանդակըհարմար է օգտագործել լրացուցիչ տարրեր, որոնք, առաջին հերթին, տեքստը խարսխում են ռադիոյի կամ վանդակի տարրին, և երկրորդը, սեղմումով ավելացնում են հարված.

<մուտքագրման տեսակը = "checkbox" id = "book1"> <label for="book1">Ա.Ս.Պ.</պիտակ>

Ա.Ս.Պ.

Օրինակում վանդակի տարրի համար ստեղծվում է պիտակ (պիտակի պիտակ): Կապակցումը կատարվում է id հատկանիշի միջոցով, որի արժեքը նշված է պիտակի համար հատկանիշում:

Արդյունք:



• Անջատված հատկանիշը թույլ է տալիս անջատել տարրը՝ այն դարձնելով անփոփոխելի օգտագործողի կողմից.

<մուտքագրման տեսակ = "տեքստ" անուն = "մուտք" չափ = "20" արժեք = "(!LANG:Մուտք" maxlength = "25" disabled = "disabled" >!} <մուտքագրման տեսակը = "checkbox" name = "asp" արժեքը = "(!LANG:այո" > !}Ա.Ս.Պ.<br > <մուտքագրման տեսակը = "checkbox" name = "js" արժեքը = "(!LANG:այո" checked = "checked" disabled = "disabled" > !} javascript<br >


Ա.Ս.Պ.
javascript

Բոլոր ինտերակտիվները՝ մուտքագրման դաշտերը, վանդակները, ռադիոկոճակները, բացվող ցուցակները, կոճակները՝ սրանք վեբ ձևերն են և դրանց տարրերը: Մեկնաբանություն թողնելու ձևի մեջ օգտագործեք ձևը գրանցվելու համար, օգտագործեք ձևը լիազորելու համար, օգտագործեք որոնման ձևը, քվեարկեք հարցումներում, վերբեռնեք ֆայլեր, բաժանորդագրվեք. այս ամենը դուք անում եք վեբ ձևերի միջոցով:

Ներքին կազմակերպում

Փաստորեն, ձևը բաղկացած է երկու մասից՝ վիզուալ ձևավորում և մուտքագրված տվյալները մշակող սցենար։ Սցենար գրելու համար անհրաժեշտ է իմանալ ծրագրավորման լեզուներից մեկը։ Մենք դրանք այստեղ չենք ուսումնասիրում, ուստի մենք կվերլուծենք HTML բաղադրիչը. սովորեք, թե ինչպես ստեղծել ձևի միջերես, ենթադրելով, որ ինչ-որ տեղ մենք արդեն ունենք սկրիպտ, որը մշակում է այն:

HTML ձևը ստեղծվում է զույգ պիտակի միջոցով

, որի ներսում գտնվում են նրա տարրերի պիտակները։

պիտակներ

Նախքան օրինակներ ցույց տալը, եկեք անցնենք պիտակները:

. Ստեղծում է ձև: Եթե ​​ձևը համեմատենք աղյուսակի հետ, ապա պիտակը կատարում է նույն դերը, ինչ պիտակը

. Այն գալիս է հետևյալ հատկանիշներով.

• գործողություն. Ձևի տվյալները մշակող սցենարի կամ փաստաթղթի հասցեն: URL-ը նշված է որպես արժեք:
• մեթոդ. Տվյալների փոխանցման մեթոդը մշակողին: Դուք կարող եք նշել GET (կանխադրված) կամ POST: GET նշանակում է տվյալներ փոխանցել որպես URL-ի մաս: Հնարավոր է, որ դուք տեսել եք ?id=225-ի նման մի բան հասցեներում: Սա այն է, ինչ կա: POST մեթոդը տարբեր կերպ է աշխատում, և, հետևաբար, փոխանցված տվյալները թաքցվում են օգտագործողից: Այն ավելի ապահով է, թույլ է տալիս փոխանցել ավելի շատ տեղեկատվություն, ներառյալ ֆայլերը: Բայց այս ամենն ավելի շատ ծրագրավորման մասին է, քան HTML նշագրման:
• ընդունել-նիշերի հավաքածու. Սահմանում է կոդավորումը:
• ավտոմատ լրացում. Միացնում է (միացված) կամ անջատում (անջատում) ավտոմատ լրացման ձևերը, որտեղ զննարկիչն ինքն է հուշում ձեզ, թե ինչ պետք է մուտքագրել՝ ելնելով նախորդ անգամ մուտքագրածից: Գործառույթն անջատելը իմաստ ունի գաղտնի ձևերի համար, որպեսզի զննարկիչը ակամա չցուցադրի կարևոր տվյալներ:
• Անուն. Ձևի անվանումը.

Կան այլ ատրիբուտներ, բայց դրանք հազվադեպ են օգտագործվում:

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

• տիպ. Հիմնական պիտակի հատկանիշ , որը սահմանում է, ինչպես արդեն նշվեց, մուտքային տարրի տեսակը։ Այն այնքան շատ արժեքներ ունի, և դրանք այնքան կարևոր են, որ բավական էր մի ամբողջ աղյուսակի համար (տես ստորև):

Իմաստը	Նկարագրություն
	Նշավանդակներ. Նրանց օգնությամբ դուք կարող եք միանգամից մի քանի տարբերակ ընտրել:
	Ֆայլի ընտրության կոճակ
	Թաքնված դաշտ, որը տեսանելի չէ դիտարկիչում
	Կոճակ նկարով
	Գաղտնաբառի դաշտ: Պարզ տեքստային դաշտ, բայց մուտքագրված նիշերը թաքնված են աստղանիշների հետևում (*)
	Անջատիչներ. Գրեթե նման վանդակների, բայց նրանց օգնությամբ դուք կարող եք ընտրել միայն առաջարկվող տարբերակներից մեկը
	Կոճակ՝ ձևի տվյալները սկզբնական արժեքներին վերականգնելու համար
	Կոճակ՝ տվյալներ սերվեր ուղարկելու համար: Սովորաբար դուք սեղմում եք դրանք՝ մուտքագրումը հաստատելու համար. Պահպանել, կիրառել, OK
	Տեքստային դաշտ

Շատ նոր արժեքներ են հայտնվել HTML5-ում, բայց, ցավոք, դրանք առայժմ միայն մասամբ են աջակցվում (2016թ. հունիս):

• ավտոմատ ֆոկուս. Ներածման ֆոկուսը լռելյայն կլինի այն տարրի համար, որի համար նշված է այս հատկանիշը:
• ստուգվում. Սահմանեք կանխադրված վանդակը կամ ռադիո կոճակը:
• օրինակը. Այս հատկանիշով դուք կարող եք ստիպել օգտվողին մուտքագրել տվյալներ որոշակի ձևաչափով: Օրինակ, մուտքագրեք միայն մեկ թիվ 0-ից 9-ը կամ միայն լատինական այբուբենի տառերը (պետք է ծանոթ լինի): Քանի դեռ դաշտը ճիշտ չի լրացվել, ձևի տվյալները չեն ներկայացվի մշակման:
• տեղապահ. Սահմանում է հուշման տեքստը:
• . Կոնտեյներ, որով ստեղծվում է ցուցակը: Սա կարող է լինել բացվող ցուցակ կամ մեկ կամ բազմակի ընտրության ցուցակ: Թեգերը պատասխանատու են ցանկի տարրերի համար .
  չափը. Հիմնական հատկությունը, որը սահմանում է ցուցադրվող ցուցակի տողերի քանակը: Օրինակ, եթե արժեքը 1 է, ապա ցուցակը բացվող ցուցակ է, հակառակ դեպքում այն ​​կա՛մ բոլոր տարրերով անմիջապես տեսանելի ցուցակ է, կա՛մ ցուցակ, որի տարրերը կարելի է նավարկել՝ օգտագործելով ոլորման տողը:
  բազմակի. Առանց արժեքների հատկանիշ: Նշեք այն՝ բազմակի ընտրության ցուցակ ստանալու համար:
  պահանջվում է. Ցանկը պարտադիր է դարձնում ընտրության համար, այսինքն՝ քանի դեռ օգտատերը դրանում արժեք չի նշել, ձևը չի ներկայացվի։ Հաճախ դա արվում է գրանցման ձևաթղթերի Գենդերային ցանկի միջոցով:
  . Ցանկի տարրերի պիտակ, որն օգտագործվում է ներսում
  .
• արժեքը. Ցանկի տարրի արժեքը, որը պետք է մշակվի սցենարով:
• ընտրված. Այս հատկանիշով տարրը լռելյայն կնշվի, կարծես օգտվողն ընտրել է այն:
• . Container-ը թույլ է տալիս խմբավորել ցանկի տարրերը .
• անաշխատունակ. Ցուցակի խումբը դարձնում է անընտրելի (միաժամանակ այն ցուցադրում է այլ գույնով):
• պիտակ. Խմբի վերնագրի տեքստը:

Ձևի օրինակ

Այժմ, երբ բոլոր թեգերը հայտնի են, եկեք ստեղծենք մի փոքր թույլտվության ձև, որի տվյալները մշակվում են ֆայլի կողմից: script.php, որը գտնվում է HTML էջով թղթապանակում:

Կոդը կլինի այսպիսին.

Մուտք.

Գաղտնաբառ:

Ով ես դու? Հյուր Ադմինիստրատոր

Հիշիր

Եկեք նայենք դրա որոշ մասերին:

- ստեղծել script.php ֆայլով մշակված ձև: Տվյալները փոխանցվում են GET մեթոդով:

< բր> - պիտակ՝ հաջորդ տող տեղափոխվելու համար:

< մուտքագրում Անուն=" մուտք" տիպ=" տեքստը" չափը="25" առավելագույն երկարությունը="30" արժեքը«Մայքլ»>- ստեղծել տեքստային դաշտ, որը կոչվում է մուտք՝ 25 նիշ լայնությամբ: Որպես լռելյայն արժեք մենք նշում ենք Միխայիլը, որպեսզի օգտագործողը հասկանա, թե ինչ և ինչպես մուտքագրել:

< մուտքագրում Անուն=" անցնել" տիպ=" գաղտնաբառը" չափը="25" առավելագույն երկարությունը="30" արժեքը=""> - ստեղծել գաղտնաբառի մուտքագրման դաշտ (նիշերը փոխարինվում են աստղանիշներով): Դաշտի լայնությունը - 25, առավելագույն երկարությունըգաղտնաբառ - 30 նիշ:

< ընտրել>< տարբերակ արժեքը=" գ1">Հյուրտարբերակ>< տարբերակ արժեքը=" գ2">Ադմինիստրատորտարբերակ>ընտրել> - ստեղծել երկու տարրերից բաղկացած պարզ բացվող ցուցակ:

< մուտքագրում Անուն=" փրկել" տիպ=" վանդակը" արժեքը=" այո«> Հիշիր- ավելացրեք դրոշակ և գրեք բացատրական տեքստ:

< բր>< մուտքագրում տիպ=" ներկայացնել" Անուն=" մտնել" արժեքը"Մուտք">- ստեղծել կոճակ, որը սեղմելով սկսում է տվյալների մշակման գործընթացը:

- փակիր ձևը:

Բրաուզերում վեբ ձևը նման կլինի ստորև ներկայացված պատկերին:

Այն կարելի է լրացնել, բայց որպեսզի այն սկսի աշխատել, պետք է գրել կոդը և պահպանել այն ֆայլում script.php HTML էջի կողքին: