Գեղեցիկ html ձևի ստեղծում: Ձևի ստեղծում. Ձևի օգտագործման օրինակ

Մենք կազմել ենք 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 մուտքի ձև

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

Ձևն ինքնին ստեղծվում է պիտակի միջոցով

, որը կարող է պարունակել ցանկացած անհրաժեշտ պիտակ և բնութագրվում է հետևյալ ընտրովի պարամետրերով.

1. ծրագրի հասցեն վեբ սերվերի վրա, որը կմշակի ձևի տվյալների բովանդակությունը.
2. ձևի տարրեր, որոնք ստանդարտ դաշտեր են օգտագործողի մուտքագրման համար.
3. կոճակ՝ տվյալներ սերվերին ուղարկելու համար:

Էջում թույլատրվում է օգտագործել մի քանի ձև, բայց դրանք չպետք է բույն դրվեն միմյանց մեջ (օրինակ 1):

Օրինակ 1. Ձևերի սխալ օգտագործումը

HTML5 IE Cr Op Sa Fx

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

. Ծրագիրը կարող է գրվել ցանկացած սերվերի լեզվով, ինչպիսիք են PHP, Python, C# և այլն:

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

Օրինակ 2. Պարզ ձև

HTML5 IE Cr Op Sa Fx

Կարող եք նաև նշել էլփոստի հասցեն որպես գործողության հատկանիշի արժեք՝ սկսած հիմնաբառփոստին: Երբ ձևը ներկայացվի, այն կգործարկվի փոստի ծրագիր, սահմանված է լռելյայն: Անվտանգության նկատառումներից ելնելով, զննարկիչը կարգավորված է այնպես, որ թույլ չտա ձևաթղթում մուտքագրված տեղեկատվությունը փոստով զուսպ ուղարկել: Տվյալները ճիշտ մեկնաբանելու համար օգտագործեք enctype հատկանիշը՝ պիտակի մեջ տեքստ/պարզ արժեքով

(օրինակ 3):

Օրինակ 3. Փոստով ձևի ուղարկում

HTML5 IE Cr Op Sa Fx

Բրաուզերներն այս կոդի հետ աշխատելիս խնդիրներ ունեն: Firefox-ը կառաջարկի նամակ ուղարկելու համար հարմար հավելվածների ցանկ (նկ. 1), Internet Explorerկցուցադրի նախազգուշացում (նկ. 2) և կփորձի գործարկել փոստի հետ կապված ծրագիրը, Opera-ն, ինչպես Firefox-ը, կառաջարկի փոստ ուղարկելու համար հարմար տարբերակների ցանկ (նկ. 3):

Բրինձ. 1. Գործարկեք հավելվածը Firefox-ում

Բրինձ. 2. Internet Explorer Զգուշացում

Բրինձ. 3. Օպերայում ծրագրի ընտրություն

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

Նկարը ցույց է տալիս ուսումնական հաստատության կայքում ուսանողի գրանցման ձևը:

Ձևաթղթի ստեղծման համար օգտագործվում է կոնտեյներ

գործողության հատկանիշով, որը նշում է սերվերի այն էջը, որը կմշակի ձևով ուղարկված տվյալները։

Կառուցվածքն իր ամենապարզ ձևով.

ձևի տարրեր...

Յուրաքանչյուր ձև պետք է ունենա նաև ուղարկելու կոճակ՝ ձևը լրացնելուց հետո տվյալները ներկայացնելու համար:

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

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

Տեքստային դաշտ ստեղծելու համար կա տեքստային պարամետր: Օգտագործվում են հետևյալ պարամետրերը՝ անուն – դաշտի անվանում; չափը - դաշտի համար խորհրդանիշներով; maxlength - դաշտում նիշերի առավելագույն հնարավոր քանակը. արժեք – լռելյայն ձևով ցուցադրվող տեղեկատվություն

Երկու տեքստային դաշտերով ձևի մուտքի օրինակ.

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



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

Ձևի արդյունքը ներկայացված է նկարում:

Եթե ​​Ձեզ անհրաժեշտ է մեծ քանակությամբ տեղեկատվություն մուտքագրել տեքստային դաշտում, օրինակ՝ մեկնաբանություն, օգտագործեք տեքստային տարածքի ձևը, որը ստեղծվում է պիտակի միջոցով: հետևյալ հատկանիշներով՝ անվանում – տարածքի անվանում. cols - տարածքի սյունակների քանակը; տողեր - տողերի քանակը; փաթաթել – գծերի փաթաթման եղանակ (վրա – փաթաթել գծեր, անջատել – գծեր մի փաթաթել):</p><p>Վերոնշյալ կոդի մեջ եկեք ավելացնենք տեքստային տարածքի դաշտ.</p><p>Մեկ մեկնաբանություն. <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Տեքստի տարածքի հետ աշխատելու կոդի արդյունքը ներկայացված է նկարում։

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

Ցանկի մուտքի կառուցվածքը.

<
տեքստը
տեքստը

Որպեսզի էջը բեռնելիս էլեմենտը ընդգծվի, անհրաժեշտ է պիտակի մեջ ավելացնել ընտրված հատկանիշը: Ցուցակի տարրի և դրա ծածկագրի կառուցման տարբեր հնարավորություններ ներկայացված են նկարում:

Ընտրության նմանատիպ մեթոդը վանդակի և ռադիոկոճակի ձևի տարրերն են: Այս տարրերի միջև տարբերությունն այն է, որ վանդակը թույլ է տալիս կատարել մի քանի ընտրություն, մինչդեռ ռադիոկոճակը թույլ է տալիս միայն մեկ ընտրություն:

Նշման տուփի և ռադիո կոճակի մուտքի կառուցվածքը.

տեքստը

Ռադիո կոճակ.

տեքստը

Կառուցվածքում նշված տարրերում ստուգված հատկանիշը օգտագործվում է լռելյայնորեն՝ նշելու վանդակը և ռադիո կոճակը: Նկարում ներկայացված է վանդակի, ռադիոկոճակի և HTML կոդի օգտագործման օրինակ:

Ձևի մեկ այլ տարր կոճակն է, որը նշված է type tag հատկանիշի միջոցով արժեքի կոճակով.

Կոճակ ստեղծելու համար նշված կոդում կա onclick պարամետր, որը սովորաբար նշում է ծրագրավորման լեզվի կոդը՝ այս կոճակը սեղմելիս որոշակի գործողություն կատարելու համար.

Հաղորդագրությունը հատուկ պատուհանում ցուցադրելու համար օգտագործեք JavaScript հրամանը՝ aler: Օրինակի արդյունքը ներկայացված է նկարում:

Պատկերը կոճակի մեջ տեղադրելու համար օգտագործեք հետևյալ օրինակում ցուցադրված կոդը.

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

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

Թաքնված ձևի տարրը անտեսանելի կլինի դիտարկիչի պատուհանում:

Ֆայլերը սերվեր վերբեռնելու համար ձևերը ունեն ֆայլի տարր: Ստորև ներկայացված է ֆայլերի սերվեր վերբեռնելու օրինակելի կոդը.

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

HTML ձևերը բարդ ինտերֆեյսի տարրեր են: Դրանք ներառում են տարբեր ֆունկցիոնալ տարրեր՝ մուտքային դաշտեր Եվ , ցուցակներ <select>, խորհուրդներ և այլն։ Ամբողջ ձևի կոդը պարունակվում է տարրում <form> .</p> <p>Վեբ ձևի տեղեկատվության մեծ մասը փոխանցվում է տարրի միջոցով <input>. Տեքստի մեկ տող մուտքագրելու համար օգտագործեք տարրը <input type="text">, բազմակի տողերի համար՝ տարր <textarea>. Տարր <select>ստեղծում է բացվող ցուցակ:</p> <p>Տարր <label>ստեղծում է պիտակներ ձևերի դաշտերի համար: Պիտակներն ու դաշտերը խմբավորելու երկու եղանակ կա: Եթե ​​դաշտը գտնվում է տարրի ներսում <label>, ապա for հատկանիշը պետք չէ նշել։</p><p> <label for="lastname">Ազգանուն</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Ազգանուն</label> <label>Ազգանուն <input type="text" name="lastname"></label> </p><p>Ձևի դաշտերը կարելի է բաժանել տրամաբանական բլոկների՝ օգտագործելով տարրը <fieldset>. Յուրաքանչյուր բաժին կարելի է անվանել՝ օգտագործելով տարրը <legend> .</p><p> <fieldset> <legend>Կոնտակտային տվյալներ</legend> <label>Անուն <input type="text" required></label> <label>Էլ <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Բրինձ. 1. Խմբավորման ձևերի դաշտերը</p><p>Ձևն օգտատերերի համար ավելի հասկանալի դարձնելու համար ձևի դաշտերին ավելացվում է տեքստ՝ մուտքագրված տվյալների օրինակը տրամադրելու համար: Տեքստի այս տեսակը կոչվում է wildcard text և ստեղծվում է տեղապահ հատկանիշի միջոցով:</p> <p>Պահանջվող դաշտերը նույնպես պետք է ընդգծվեն: Նախքան HTML5-ը դաշտի անվան կողքին օգտագործվել է աստղանիշ * նշանը: Նոր ճշգրտումը ներկայացնում է հատուկ պահանջվող հատկանիշ, որը թույլ է տալիս նշել պահանջվող դաշտը նշագրման մակարդակում: Այս հատկանիշը հրահանգում է զննարկիչին (ենթադրելով, որ այն աջակցում է HTML5-ին) չուղարկել տվյալները օգտվողի կողմից ուղարկելուց հետո, մինչև նշված դաշտերը լրացվեն:</p><p> <input type="text" required placeholder="քո անունը"> </p><p>Ֆոկուս ստանալու ժամանակ տեքստային դաշտի տեսքը փոխելու համար օգտագործեք ֆոկուսի կեղծ դասը: Օրինակ, դուք կարող եք ընթացիկ դաշտի ֆոնն ավելի մուգ դարձնել կամ ավելացնել գունավոր եզրագիծ, որպեսզի այն առանձնանա մնացածից.</p><p>Մուտք՝ ֆոկուս (ֆոն՝ #eaeaea; )</p><p>Մեկ այլ օգտակար HTML5 հատկանիշ է autofocus հատկանիշը: Այն թույլ է տալիս ավտոմատ կերպով կենտրոնացնել տարրերի ցանկալի սկզբնական դաշտը <input>Եվ <textarea>(յուրաքանչյուր ձևի միայն մեկ տարր):</p> <h2>Գրանցման ձևի ստեղծման օրինակ</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Գրանցում</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Անուն</label> <input type="text" name="name" required> </div> <div class="radio">Հատակ <label> <input type="radio" name="sex" value="արական">արական <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="իգական">իգական <div class="radio-control female"></div> </label> </div> <div> <label for="email">Էլ</label> <input type="email" name="email" required> </div> <div> <label for="country">Մի երկիր</label> <select name="country"> <option>Ընտրեք ձեր բնակության երկիրը</option> <option value="Ռուսաստան">Ռուսաստան</option> <option value="Ուկրաինա">Ուկրաինա</option> <option value="Բելառուս">Բելառուս</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Ուղարկել</button> </form> </div> <p><b>Նշում</b><br>action="form.php" - հղում դեպի ձևաթղթերի մշակման ֆայլ: Ստեղծեք ֆայլ UTF-8 կոդավորմամբ, վերբեռնեք այն սերվերում և փոխարինեք action="form.php"-ը ձեր սերվերի ֆայլի ուղով:</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Բրինձ. 2. Լռելյայն ձևի տեսք <p>Ինչպես տեսնում եք նկարից, ձևի յուրաքանչյուր տարր ունի բրաուզերի լռելյայն ոճեր: Եկեք մաքրենք ոճերը և ձևավորենք ձևի տարրերը:</p><p> Form-wrap (լայնությունը՝ 550px; ֆոն՝ #ffd500; եզրագծի շառավիղը՝ 20px; ) .form-wrap *(անցումը՝ .1s գծային) .profile (լայնությունը՝ 240px; float՝ ձախ, տեքստի հավասարեցումը՝ կենտրոն, լիցք 30px;) ձև (ֆոն՝ սպիտակ; լողացող՝ ձախ; լայնություն՝ calc (100% - 240px); լիցք՝ 30px; եզրագծի շառավիղ՝ 0 20px 20px 0; գույնը՝ #7b7b7b; ) .form-wrap:after, form div:after (բովանդակությունը՝ ""; ցուցադրում՝ աղյուսակ; պարզ՝ երկուսն էլ; ) ձև div (լուսանցք-ներքև՝ 15px; դիրքը՝ հարաբերական;) h1 (տառաչափը՝ 24px; տառատեսակի քաշը՝ 400; դիրքը՝ հարաբերական ; լուսանցք՝ վերև՝ 50px; ) h1:after (բովանդակություն՝ «\f138», տառաչափ՝ 40px; տառատեսակ՝ ընտանիք՝ FontAwesome; դիրք՝ բացարձակ; վերև՝ 50px; ձախ՝ 50%, փոխակերպում՝ translateX(-50 %);) /************************ ձևի տարրերի ոճավորում ****************** * **/ պիտակ, բացվածք (ցուցադրում՝ բլոկ, տառաչափ՝ 14 պիքսել; լուսանցք՝ ներքև՝ 8 պիքսել; ) մուտքագրում, ներածում ( եզրագծի լայնությունը՝ 0; ուրվագիծ՝ ոչ մեկը; լուսանցք՝ 0; լայնություն՝ 100%, լցոնում. 10px 15px; ֆոն՝ #e6e6e6; ) մուտքագրում:focus, input:focus (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio label (դիրքը՝ հարաբերական; լիցք-ձախ՝ 50px; կուրսորը՝ ցուցիչ; լայնությունը՝ 50%, լողացող՝ ձախ; տողի բարձրությունը՝ 40px; ) .radio մուտքագրում ( դիրքը՝ բացարձակ; անթափանցիկություն՝ 0; ) -control ( դիրքը՝ բացարձակ; վերև՝ 0; ձախ՝ 0; բարձրություն՝ 40px; լայնություն՝ 40px; ֆոն՝ #e6e6e6; եզրագծի շառավիղ՝ 50%, տեքստի հավասարեցում՝ կենտրոն; ) .male: առաջ (բովանդակությունը՝ " \f222"; տառատեսակ-ընտանիքը՝ FontAwesome; տառատեսակի քաշը՝ թավ; ) .female:before (բովանդակությունը՝ "\f221"; տառատեսակ-ընտանիք՝ FontAwesome; տառատեսակի քաշը՝ թավ; ) .radio label:hover input ~: radio-control, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: կարմիր;) ընտրել (լայնությունը՝ 100%, կուրսորը՝ ցուցիչ, լիցք՝ 10px 15px; ուրվագիծ՝ 0; եզրագիծ՝ 0; ֆոն՝ #e6e6e6; գույն՝ #7b7b7b; -վեբկիտ-արտաքին տեսք՝ ոչ մեկը; /* հանել վեբկիտը՝ բրաուզերներ */ -moz-appearance՝ ոչ մեկը, /*ապանշեք Mozilla Firefox-ում*/) ընտրել::-ms-expand (ցուցադրել՝ ոչ մեկը; /*ապանշել IE-ում*/) .select-arrow (դիրքը՝ բացարձակ; վերև՝ 38px; աջ: 15px; լայնությունը՝ 0; բարձրությունը՝ 0; ցուցիչ-իրադարձություններ. ոչ մեկը; /*ակտիվացրեք ցանկի ցուցադրումը, երբ սեղմում եք սլաքի վրա*/ border-style՝ solid; եզրագծի լայնությունը՝ 8px 5px 0 5px; սահման-գույն՝ #7b7b7b թափանցիկ թափանցիկ թափանցիկ; ) կոճակ ( լիցք՝ 10px 0, եզրագծերի լայնություն՝ 0, ցուցադրում՝ բլոկ, լայնություն՝ 120 px, լուսանցք՝ 25 px ավտոմատ 0, ֆոն՝ #60e6c5, գույնը՝ սպիտակ, տառաչափը՝ 14 px, ուրվագիծ՝ ոչ մեկը, տեքստի փոխակերպում : մեծատառ; ) /************************ ձևին ավելացնել հարմարվողականություն ****************** ** **/ @media (առավելագույն լայնությունը՝ 600 px) ( .form-wrap (լուսանցք՝ 20px ավտոմատ; առավելագույն լայնությունը՝ 550px; լայնությունը՝ 100%;) ;) h1 (լուսանցք-վերևում` ավտոմատ; ներքևի մաս` 50px;) ձև (սահմանային շառավիղ` 0 0 20px 20px;) )</p><p><b>Form.php ֆայլ</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc. your_email." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! դատարկ ($country) && filter_var ($email, FILTER_VALIDATE_EMAIL))( փոստ ($email, $subject, $msg, $headers); echo «Շնորհակալություն: Դուք հաջողությամբ գրանցվել եք»: ) ?></p><p><b>Նշում</b><br>$subject փոփոխականում նշեք տեքստը, որը կցուցադրվի որպես նամակի վերնագիր; <br>Your_name - այստեղ կարող եք նշել այն անունը, որը կցուցադրվի «ումից է տառը» դաշտում; <br>փոխարինել your_site_url կայքի հասցեով գրանցման ձևով; <br>փոխարինել your_email-ը ձեր էլ.փոստի հասցեով; <br>$headers .= «Bcc. your_email»: «\r\n»; ուղարկում է <a href="https://ow5.ru/hy/photo-editors/chto-takoe-skrytaya-kopiya-v-pochte-mail-postfix-otpravte-kopiyu.html">BCC</a>ձեր էլփոստի հասցեին:</p> <h3>Նկարագրություն</h3> <p>Նշել <form>տեղադրում է ձևը վեբ էջում: Ձևը նախատեսված է օգտագործողի և սերվերի միջև տվյալների փոխանակման համար: Ձևաթղթերի կիրառման շրջանակը չի սահմանափակվում միայն սերվեր ուղարկելով, հաճախորդի սկրիպտների միջոցով կարող եք մուտք գործել ձևի ցանկացած տարր, փոխել այն և կիրառել այն ձեր հայեցողությամբ:</p> <p>Փաստաթուղթը կարող է պարունակել ցանկացած թվով ձևեր, բայց միաժամանակ միայն մեկ ձև կարող է ներկայացվել սերվերին: Այդ պատճառով ձևի տվյալները պետք է անկախ լինեն միմյանցից:</p> <p>Ձևը սերվեր ուղարկելու համար օգտագործեք «Ներկայացնել» կոճակը, նույնը կարելի է հասնել՝ սեղմելով «Enter» ստեղնը ձևաթղթում: Եթե ​​ձևաթղթում «Ներկայացնել» կոճակը չկա, Enter ստեղնը նմանակում է դրա օգտագործումը:</p> <p>Երբ ձևը ներկայացվում է սերվերին, տվյալների կառավարումը փոխանցվում է ծրագրին, որը նշված է պիտակի գործողության հատկանիշով: <form>. Բրաուզերը նախ պատրաստում է տեղեկատվություն «անուն=արժեք» զույգի տեսքով, որտեղ անունը որոշվում է թեգի անվան հատկանիշով։ <input>, և արժեքը մուտքագրվում է օգտագործողի կողմից կամ սահմանվում է լռելյայն ձևի դաշտում: Եթե ​​GET մեթոդն օգտագործվում է տվյալներ ուղարկելու համար, ապա <a href="https://ow5.ru/hy/office/chto-oznachaet-znachok-zamka-chto-oznachaet-zamok-v-adresnoi-stroke-brauzera.html">հասցեի բար</a>կարող է ունենալ հետևյալ ձևը.</p> <p>http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p> <p>Պարամետրերը թվարկված են CGI ծրագրի հասցեից հետո նշված հարցական նշանից հետո և առանձնացված են նիշով (&): Ոչ լատինական նիշերը վերածվում են տասնվեցականի (%HH ձևով, որտեղ HH-ն է <a href="https://ow5.ru/hy/game/hex-redaktory-fleshki-hxd-dlya-redaktirovaniya-failov-v-shestnadcaterichnom.html">տասնվեցական կոդ</a> ASCII նիշերի արժեքի համար, բացատը փոխարինվում է գումարած (+):</p> <p>Թույլատրվում է կոնտեյների ներսում <form>տեղադրել այլ պիտակներ, բայց ձևն ինքնին որևէ կերպ չի ցուցադրվում վեբ էջում, տեսանելի են միայն դրա տարրերը և ներդիր պիտակների արդյունքները:</p> <h3>Շարահյուսություն</h3> <form action="URL"> ... </form> <h3>Հատկանիշներ</h3>Սահմանում է կոդավորումը, որով սերվերը կարող է ստանալ և մշակել տվյալները: Ծրագրի կամ փաստաթղթի հասցեն, որը մշակում է ձևի տվյալները: Միացնում է ձևի դաշտերի ավտոմատ լրացումը: Ձևի տվյալների կոդավորման մեթոդ. HTTP արձանագրության մեթոդ. Ձևի անվանումը. Չեղարկում է ձևի տվյալների ներկառուցված ստուգումը մուտքագրման ճշգրտության համար: Պատուհանի կամ շրջանակի անվանումը, որտեղ մշակողը կբեռնի վերադարձված արդյունքը: <h3>Փակման պիտակ</h3> <p>Պահանջվում է.</p> <p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>FORM պիտակ</title> </head> <body> <form action="handler.php"> <p><b>Ի՞նչ եք կարծում, ինչպե՞ս է նշանակում «OS» հապավումը:</b></p> <p><input type="radio" name="answer" value="ա1">սպաներ <Br> <input type="radio" name="answer" value="ա2"><a href="https://ow5.ru/hy/strategy/zapustitsya-li-kompyuter-bez-operacionnoi-sistemy-procedura-i-ih-vidy.html">օպերացիոն համակարգ</a><Br> <input type="radio" name="answer" value="ա3">Մեծ գծավոր ճանճ</p> <p><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Արդյունք <a href="https://ow5.ru/hy/office/politika-konfidencialnosti-i-obrabotki-personalnyh.html">այս օրինակը</a>ցույց է տրված Նկ. 1.</p> <p>Բրինձ. 1. Ձևի տարրերի դիտում դիտարկիչի պատուհանում</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://ow5.ru/hy/category/android-total/">Android - Ընդհանուր</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/security/">Անվտանգություն</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/more/">Այլ</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/game/">Խաղեր</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/internet/">Համացանց</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/keyboard/">Ստեղնաշարեր</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/multimedia/">Մուլտիմեդիա</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/navigation/">Նավիգացիա</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/office/">Գրասենյակ</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/program/">Ծրագրեր</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/different/">Տարբեր</a> </li> <li class="submenu"><a href="https://ow5.ru/hy/category/system/">Համակարգ</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">Վերջին գրառումները</div> <div class="popular_posts"> <div class="news_box"> <a href="https://ow5.ru/hy/system-utilities/kak-vosstanovit-moyu-stranicu-v-odnoklassnikah-vozvrat.html" class="thumb"><img width="95" height="95" src="/uploads/aeaa41ce84ea748fe76cf90e7edb532e.jpg" class="attachment-mini size-mini wp-post-image" alt="Վերադարձնել ջնջված կամ արգելափակված էջը Odnoklassniki-ում" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/system-utilities/kak-vosstanovit-moyu-stranicu-v-odnoklassnikah-vozvrat.html">Վերադարձնել ջնջված կամ արգելափակված էջը Odnoklassniki-ում</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/hy/game/chto-delat-esli-audiozapisi-vk-ne-vosproizvodyatsya-pochemu-vkontakte-ne.html" class="thumb"><img width="95" height="95" src="/uploads/65770e61a298aa3e28ddf470cb2579e0.jpg" class="attachment-mini size-mini wp-post-image" alt="Ինչու՞ երաժշտությունը չի հնչում Vkontakte-ում և ինչ անել դրա հետ:" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/game/chto-delat-esli-audiozapisi-vk-ne-vosproizvodyatsya-pochemu-vkontakte-ne.html">Ինչու՞ երաժշտությունը չի հնչում Vkontakte-ում և ինչ անել դրա հետ:</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/hy/photo-editors/upominaniya-vkontakte-kak-v-vkontakte-upomyanut-cheloveka-kak-v-kontakte.html" class="thumb"><img width="95" height="95" src="/uploads/f181ff1ade1a6984ed85c2954ab71048.jpg" class="attachment-mini size-mini wp-post-image" alt="Ինչպե՞ս նշել մարդուն VKontakte-ում:" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/photo-editors/upominaniya-vkontakte-kak-v-vkontakte-upomyanut-cheloveka-kak-v-kontakte.html">Ինչպե՞ս նշել մարդուն VKontakte-ում:</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/hy/program/gde-zhivet-maks-tarasenko-adres-biograficheskie-dannye-braina-mapsa.html" class="thumb"><img width="95" height="95" src="/uploads/1f58bb94499f926e7b02137d77d764cd.jpg" class="attachment-mini size-mini wp-post-image" alt="Բրայան Քարտեզների կենսագրական տվյալներ" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/program/gde-zhivet-maks-tarasenko-adres-biograficheskie-dannye-braina-mapsa.html">Բրայան Քարտեզների կենսագրական տվյալներ</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/hy/internet/kak-soedinit-2-diagrammy-v-eksele-grafiki-i-diagrammy-v-microsoft-excel.html" class="thumb"><img width="95" height="95" src="/uploads/63e48e2f3fcceab1c239ec2b3b42d900.jpg" class="attachment-mini size-mini wp-post-image" alt="Գրաֆիկներ և գծապատկերներ Microsoft Excel-ում" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/internet/kak-soedinit-2-diagrammy-v-eksele-grafiki-i-diagrammy-v-microsoft-excel.html">Գրաֆիկներ և գծապատկերներ Microsoft Excel-ում</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">Հանրաճանաչ</div> <div class="popular_posts"> <div class="news_box"> <a href="https://ow5.ru/hy/tv-and-video/vkontakte-vk-mp3-vkontakte-mp3-mod-izmeneniya-v-poslednei-versii.html" class="thumb"><img width="95" height="95" src="/uploads/9f280d6ec603eb33f62eccc15ac78d44.jpg" class="attachment-mini size-mini wp-post-image" alt="VKontakte MP3 ռեժիմ Փոփոխություններ վերջին տարբերակում" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/tv-and-video/vkontakte-vk-mp3-vkontakte-mp3-mod-izmeneniya-v-poslednei-versii.html">VKontakte MP3 ռեժիմ Փոփոխություններ վերջին տարբերակում</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/hy/multimedia/ne-zagruzhaetsya-fifa-18-vyletaet-fifa-pri-zapuske-chto-delat.html" class="thumb"><img width="95" height="95" src="/uploads/dc70fb5a8f8e301c6a58d0cd510e9703.jpg" class="attachment-mini size-mini wp-post-image" alt="ՖԻՖԱ-ն խափանում է ստարտափում" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/multimedia/ne-zagruzhaetsya-fifa-18-vyletaet-fifa-pri-zapuske-chto-delat.html">ՖԻՖԱ-ն խափանում է ստարտափում</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/hy/system/350-minut-v-chasah-perevod-chasov-v-minuty-v-microsoft-excel-zachem-takie-slozhnosti.html" class="thumb"><img width="95" height="95" src="/uploads/4b18c2f9a0964faaea01b8c95275c258.jpg" class="attachment-mini size-mini wp-post-image" alt="Ժամերը րոպեների փոխակերպում Microsoft Excel-ում" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/hy/system/350-minut-v-chasah-perevod-chasov-v-minuty-v-microsoft-excel-zachem-takie-slozhnosti.html">Ժամերը րոպեների փոխակերպում Microsoft Excel-ում</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">Նորություններ</div> <div class="business_news"> <div class="news"> <div class="date">2021-11-30 17:27:20</div> <a href="https://ow5.ru/hy/office/failovaya-sistema-refs-preimushchestva-i-perspektivy-refs.html" class="title">Առավելությունները և հեռանկարները</a> </div> <div class="news"> <div class="date">2021-11-30 17:27:20</div> <a href="https://ow5.ru/hy/system-utilities/odnoklassniki-polnaya-versiya-vhod-na-moyu-stranicu-zaiti-v-odnoklassniki-na.html" class="title">Գնացեք ձեր Odnoklassniki էջը. Մանրամասն տեղեկություններ</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/hy/strategy/professiya-veb-dizainer-skolko-zarabatyvayut-i-gde-uchitsya-etoi-specialnosti-professiya-web-dizain.html" class="title">Մասնագիտություն վեբ դիզայներ. Որքա՞ն են նրանք վաստակում և որտեղ սովորել այս մասնագիտությունը:</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/hy/system-utilities/pochemu-bet-tokom-ot-vsego-v-chem-prichina-udar-tokom.html" class="title">Էլեկտրական ցնցում. հետևանքներ, անհրաժեշտ գործողություններ և ճիշտ միջոցներ Ինչպես էլեկտրականացնել ձեր ձեռքերը էլեկտրական ցնցում տալու համար</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/hy/photo-editors/pochemu-bet-tokom-ot-vsego-v-chem-prichina-udar-tokom-posledstviya.html" class="title">Էլեկտրական ցնցում. հետևանքներ, անհրաժեշտ գործողություններ և ճիշտ միջոցառումներ Ինչպես մատից հոսանքահարել</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://ow5.ru/hy/" class="logo" style="background:none;">ow5.ru</a> <div class="copyright"> <p>ow5.ru - Կրթություն. Անվտանգություն. Նավիգացիա. Համացանց. Խաղեր. Գրասենյակային ծրագրեր</p> <p><span>2023 - Բոլոր իրավունքները պաշտպանված են</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://ow5.ru/hy/feedback.html">Կոնտակտներ</a></li> <li><a href="">Կայքի մասին</a></li> <li><a href="">Գովազդ կայքում</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://ow5.ru/hy/category/android-total/">Android - Ընդհանուր</a></li> <li id="menu-item-"><a href="https://ow5.ru/hy/category/security/">Անվտանգություն</a></li> <li id="menu-item-"><a href="https://ow5.ru/hy/category/more/">Այլ</a></li> <li id="menu-item-"><a href="https://ow5.ru/hy/category/game/">Խաղեր</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://ow5.ru/hy/category/android-total/">Android - Ընդհանուր</a></li> <li id="menu-item-"><a href="https://ow5.ru/hy/category/security/">Անվտանգություն</a></li> <li id="menu-item-"><a href="https://ow5.ru/hy/category/more/">Այլ</a></li> <li id="menu-item-"><a href="https://ow5.ru/hy/category/game/">Խաղեր</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://ow5.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://ow5.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>