h…i… էլեմենտներ
<h1> <h2> <h3> <h4> <h5> <h6>
Սահմանում են տեքստի վերնագիրը։
Վերնագիր
Վերնագիր
Վերնագիր
Վերնագիր
Վերնագիր
Վերնագիր
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_01.png)
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_02.png)
<head>…</head>
Հանդիսանում է կոնտեյներ էլեմենտների համար, որոնք html փաստաթղթի մասին լրացուցիչ տվյալներ են տրամադրում բրաուզերին, ինչպես նաև միկրոտվյալներ որոնողական համակարգերին։
Օրինակ սահմանվում է html փաստաթղթի վերնագիրը՝ <title>-ը, <script>-ը՝ Javascript-ի համար, <style>-ը՝ Css-ի համար և այլն։
<head> -ում տեղադրված էլեմենտները չեն պատկերվում վեբ էջի վրա, բացի <title>-ից՝ էջի վերնագրից։
<head> -ում սահմանվող էլեմենտներն են՝ <title>, <style>, <base>, <link>, <meta>, <script>, <noscript> :
<header>…</header>
Սովորաբար այստեղ են տեղադրվում վեբ կայքի անունը, լոգոտիպը, ցանկը(menu), որոնման պատուհանը և այլն։
Հնարավոր է տեղադրել ցանկացած էլեմենտ, բացառությամբ <footer> -ից և <header>-ից ։
<header> էլեմենտը չխառնել <head>-ի հետ։
<hr>
Սահմանում է հորիզոնական գիծ երկու տեքստերի միջև։
Օրինակ՝
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_03.png)
<html>…</html>
էլեմենտը հաղորդում է բրաուզերին՝ որտեղ է սկսվում html կոդը և որտեղ է այն վերջանում։
Այն հանդիսանում է html փաստաթուղթի գլխավոր էլեմենտը, որում տեղադրվում են մնացած էլեմենտները, այդ թվում նաև <head> -ը և <body>-ն։
<html>-ը սահմանվում է անմիջապես <!DOCTYPE>-ից հետո։
<html>-ի անմիջական էլեմենտներն են միայն <head>-ը և <body>-ին։
Ատրիբուտներն են՝
manifest
manifest – օրինակ՝ manifest= “example.cache” – սահմանվում է ֆայլի անունը, որում նշվում են այն ռեսուրսների անունները, որոնք բրաուզերը պետք է իր հիշողության մեջ քեշավորի(պահպանի), որպեսզի վեբ էջը բացվի անցանց տարբերակով։
Ֆայլում կարող է լինել html, css և javascript ֆայլերի անուններ, նկարներ և այլն։
Այս ատրիբուտը հնացած է և այլևս չի օգտագործվում։
xmlns
xmlns – օգտագործվում է միայն xhtml-ում։ Սահմանում է «անվանումների տիրույթը»։
xml-ում էլեմենտների անունները ինքներս ենք որոշում։ Մեկ xml փաստաթղթում կարող է տեղադրվել մի քանի այլ xml փաստաթղթերի պարունակություն։ Քանի որ էլեմենտների անունները սահմանվում են մեր կողմից, ապա դրանք կարող են կրկնվել։ Ուստի յուրաքանչյուր xml փաստաթղթին սահմանվում է հատուկ անվանում, որով հնարավոր է տարբերել, թե էլեմենտը որ «անվանումների տիրույթին» է պատկանում։
<i>…</i>
Տեքստը թեք տեսքով ցուցադրելու համար է։
Օրինակ՝
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_04.png)
<iframe>…</iframe>
Հիմնական վեբ էջում սահմանում է մեկ այլ վեբ էջ։
Օրինակ հիմնական էջին վերաբերող Css-ը ազդեցություն չի ունենա ֆրեյմի վրա, քանի որ ֆրեյմը այլ վեբ էջ է։
Օրինակ՝
HTML' (անգլ.՝ HyperText Markup Language, գերտեքստի նշագրման լեզու), նշագրման
լեզու, որն օգտագործվում է վեբ-էջերի մեծամասնության նշագրման համար։ HTML
լեզուն վերամշակվում է դիտարկչի կողմից և ցուցադրվում է մարդու կողմից հեշտ
ընթեռնելի փաստաթղթի տեսքով։
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_05-1024x789.png)
Ատրիբուտներն են՝
height
height- օրինակ՝ height= ”400px” – սահմանում է էլեմենտի բարձրությունը։
width
width- օրինակ` width= “400px” – սահմանում է էլեմենտի լայնությունը։
name
name– օրինակ՝ name= “myFrame” – սահմանում է անուն javascript -ում դրա հետ աշխատելու համար։
src
src – սահմանում է վեբ էջի հասցեն, որը պիտի բացվի ֆրեյմի վրա։
seamless
seamless –սրա առկայությունը սահմանում է, որ ֆրեյմի պարունակությունը պետք է ցուցադրվի այնպես, կարծես այն հանդիսանում է հիմնական փաստաթղթի մաս՝ ֆրեյմը հիմնական էջի վրա ցուցադրվելու է առանց եզրագծերի և scroll -ի հնարավորության։
allowfullscreen
allowfullscreen – թույլ է տալիս ֆրեյմի ռեսուրսը, օրինակ վիդեոն բացել ամբողջ էկրանով։
allow
allow– օրինակ՝ allow= “accelerometer” – Եթե ֆրեյմին անհրաժեշտ է հասանելիություն ունենալ օգտվողի որոշակի տվյալների վրա, ապա բրաուզերը օգտվողից թույլտվության համաձայնություն ստանալուց հետո, կտրամադրի այդ տվյալները։
accelerometer –հասանելիություն է տալիս <iframe>-ին տվյալներ հավաքել սարքի տեղափոխվելու արագության մասին։
ambient-light-sensor –հասանելիություն է տալիս <iframe>-ին տվյալներ հավաքել սարքի էկրանի լուսավորության մասին։
autoplay –թույլ է տալիս <iframe>-ին ավտոմատ նվագարկել(воспроизводить) մուլտիմեդիան՝ վիդեոն կամ աուդիոն։
battery –հասանելիություն է տալիս <iframe>-ին տվյալներ հավաքել մարտկոցի մասին։
camera –հասանելիություն է տալիս <iframe>-ին օգտագործել սարքի տեսախցիկը։
fullscreen -հասանելիություն է տալիս <iframe>-ին օգտագործել սարքի ամբողջ էկրանը։
geolocation -հասանելիություն է տալիս <iframe>-ին օգտագործել գեոլոկացիայի տվյալները, այսինքն օգտվողի գտնվելու կորդինատները։
gyroscope –հասանելիություն է տալիս <iframe>-ին իմանալ սարքի դիրքը։
microphone –հասանելիություն է տալիս <iframe>-ին օգտագործել խոսափողը։
payment –հասանելիություն է տալիս <iframe>-ին վճարման API-ի հարցման համար։
vibrate –հասանելիություն է տալիս <iframe> -ին միացնելու սարքի վիբրացիան։
loading
loading – օրինակ՝ loading= “eager”– սահմանում է՝ բրաուզերը երբ ցուցադրի ֆրեյմը հիմնական փաստաթղթում։
Ունի երկու արժեք՝
eager –անմիջապես ցուցադրել ֆրեյմը անկախ նրանից երևում է այն էկրանի վրա, թե ոչ։
lazy –չբացել ֆրեյմը, քանի դեռ այն չի երևում էկրանի վրա։
referrerpolicy
referrerpolicy –օրինակ՝ օգտվողը գտնվում է մեր կայքում(օրինակ՝ www.example.com). այնտեղ ունենք հղում, որը տեղափոխում է այլ կայք(օրինակ՝ www.2example.com)։ Երբ մեկը սեղմում է հղմանը, այսինքն www.2example.com-ին, տվյալ կայքի տերը կարող է իմանալ, որ իր կայք են այցելել հենց մեր կայքից, այսինքն www.example.com-ից։
Ռեֆերերում փոխանցվող տվյալները հնարավոր է կառավարել referrerpolicy ատրիբուտի միջոցով։
Արժեքներն են՝
no-referrer –ռեֆերերն ուղարկվում է միայն, երբ երկու հասցեների դոմենային անունները համապատասխան են։
no-referrer-when-downgrade – Ռեֆերերը կփոխանցվի միայն, երբ երկու կայքի պրատակոլներն անփոփոխ լինեն` http/http, https/https կամ` http -ից https։ Տվյալները չի փոխանցվի, երբ տեղափոխումը կատարվում է https-ից http տեսակի վրա։
origin –ուղարկում է միայն դոմենային անունը՝ առանց նշելու ամբողջական հասցեն․ օրինակ՝ https://example.com/page1.html -հասցեում դոմենային անունը՝ https://example.com -ն է, իսկ գտնվելու վայրը՝ /page1.html -ը։
origin-when-cross-origin –ուղարկում է ամբողջական հասցեն, երբ հասցեների դոմենային անունը համապատասխան է։ Ուղարկում է միայն դոմենային անունը, երբ հասցեների դոմենային անունները տարբերվում են։
same-origin –ռեֆերերն ուղարկվում է միայն, երբ երկու դոմենային անուններն համապատասխան են։
strict-origin –ռեֆերերն ուղարկվում է միայն, երբ պրատակոլների մակարդակը չի փոխվում, օրինակ՝ https/https, կամ http/http։
strict-origin-when-cross-origin – ուղարկում է ամբողջական հասցեն, երբ երկու հասցեների դոմենային անունները համապատասխան են։ Ուղարկում է միայն դոմենային անունը, երբ https-ից տեղափոխվում է http -ի վրա:
unsafe-url –ուղարկում է ամբողջական ռեֆերային հասցեն ցանկացած դեպքում․ խորհուրդ չի տրվում օգտագործել այս տեսակը։
Օրինակներ՝
![](https://hayti.am/wp-content/uploads/2023/12/hielementner-hi_01-1024x642.png)
Internet Explorer և Safari բրաուզերների կողմից referrerpolicy ատրիբուտը չի աջակցվում։
sandbox
sandbox – օրինակ՝ sandbox= “allow-form” –օգտագործվում է, երբ ֆրեյմի վրա սահմանափակումներ դնել համար։
Երբ սահմանվում է sandbox= “” – տարբերակը՝ առանց որևէ արժեքի, ապա կակտիվացնենք բոլոր սահմանափակումները, իսկ որևէ արժեքի դեպքում կակտիվանան բոլոր սահմանափակումները բացի նշվածից։
Արժեքներն են՝
allow-forms –թույլ է տալիս ֆրեյմում գտնվող <form>-ի տվյալներն ուղարկել սերվեր։
allow-modals – ֆրեյմում թույլ է տալիս բացվել մոդալ պատուհանները։ Դրանցում սովորաբար լինում են նկար, տեքստ նախազգուշացնող պատուհան և այլն։ Մոդալ պատուհանի օրինակներ՝
![](https://hayti.am/wp-content/uploads/2023/12/hielementner-hi_02.png)
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_08-1024x567.jpg)
allow-popups –թույլ է տալիս iframe -ում բացել այլ կայքէջ նոր պատուհանի վրա( թույլ է տալիս կատարել “_blank” )։
allow-orientation-lock – անցումից հետո թույլ է տալիս օգտագործել սարքի կողմնորոշման(orientation -ուղղահայաց կամ հորիզոնական) արգելափակման հնարավորությունը։
allow-pointer-lock – անցումից հետո ֆրեյմին թույլ է տալիս օգտագործել տվյալ կայքի Pointer Lock API-ին, որը վերաբերում է մկնիկի կուրսորին(սլաքի հետ)։
allow-presentation – անցումից հետո թույլ է տալիս ֆրեյմին օգտագործել տվյալ կայքի Presentation API-ն, որի միջոցով բրաուզերը կարող է վեբ կայքը ցուցադրել մեծ էկրանների վրա, օրինակ՝ TV կամ որևէ պրոեկտր։
allow-same-origin –անցումից հետո թույլ է տալիս ներբեռնել ֆրեյմի պարունակությունն այնպես, կարծես այն նույն աղբյուրն ունի ինչ հիմնական էջի պարունակությունը։
allow-scripts – անցումից հետո թույլ է տալիս ֆրեյմին տվյալ կայքի Javascript կոդի աշխատանքը։
allow-top-navigation –անցումից հետո թույլ է տալիս ֆրեյմում գտնվող հղումները բացել հիմնական էջի վրա։
<img …>
Էջի վրա նկար տեղադրելու համար է։ src alt ատրիբուտները պարտադիր են։
Ատրիբուտներն են՝
src
src – սահմանում է նկարի հասցեն։ Եթե html փաստաթուղթը գտնվում է նույն վայրում ինչ նկարը, նշվում է միայն ն նկարի անունը՝ src= “nkar.jpg”, հակառակ դեպքում պետք է նշել ամբողջական հասցեն՝ src= “ C:Users\User\Pictures\nkar.jpg”:
alt
alt – օրինակ՝ alt= “html-i nkar” – եթե չբացվի նկարը, կպատկերվի alt -ի պարունակությունը։
crossorigin
crossorigin –ուղարկում ենք CORS տեսակի հարցում մեկ այլ սերվերում գնտվող նկարի համար։ Տես ” a… էլեմենտներ ” -ի ” <audio> ” բաժնում։
anonymous –ուղարկել CORS հարցում, առանց Cookie-ի տվյալների։
use-credentials –ուղարկել CORS հարցում Cookie-ի տվյալների հետ։
decoding
decoding –Մինչ բրաուզերի կողմից նկարը բացելը, կատարվում է երեք գործողություն՝
1.նկարը ներբեռնվում է սերվերից իր կոդավորմանը համապատասխան, որը հանդիսանում է խառը սիմվոլներ։
2.խառը սիմվոլները դեկոդավորվում է, այսինքն սիմվոլները դառնում են մեկ ընդհանուր նկար և՝
3.պատկերվում է բրաուզերի կողմից:
Բրաուզերը նախ ներբեռնում է և ցուցադրում html էջը, որից հետո սկսում դեկոդավորել նկարը․ այդ գործողությունները կատարում է հերթականությամբ(synchron), կամ html էջը ներբեռնելը, ցուցադրելը և նկարի դեկոդավորումը կատարում է միասին(asynchron):
decoding ատրիբուտն ունի երեք արժեք՝
sync –նկարը դեկոդավորել սինխրոն տարբերակով։
async –նկարը դեկոդավորել ասինխրոն տարբերակով։
auto –բրաուզերն ինքն է որոշում այն։
height
height – օրինակ՝ height= “200px” – սահմանում է նկարի բարձրությունը։
width
width – օրինակ՝ width= “200px” – սահմանում է նկարի լայնությունը։
ismap
ismap – Ատրիբուտի առկայության դեպքում բրաուզերն ուղարկում է սերվերին այն կորդինատները, թե նկարի որ մասի վրա է օգտվողը սեղմել և ըստ այդմ ուղարկում է դրան համապատասխան պատասխան։
Ի տարբերություն <map> էլեմենտի, նկարի կորդինատներն ուղարկվում է սերվեր և այնտեղ է որոշվում ինչ է պետք ցուցադրել(Տես նաև “a… էլեմենտներ” -ի ” <area> ” բաժինը)։
ismap- ն օգտագործվում է միայն, երբ <img> էլեմենտը տեղադրված է <a href=”…”> էլեմենտում։
loading
loading –բրաուզերին սահմանում է, թե երբ պիտի նկարը ներբեռնի։
Ունի երկու արժեք՝
eager –նկարը ներբեռնում է, անկախ նրանից օգտվողը գտնվում է փաստաթղթի նկարի վայրում, թե ոչ։
lazy –նկարը չի ներբեռնում մինչ էջի վրա օգտվողը չհասնի տվյալ վայրին։
referrerpolicy
referrerpolicy –Տես <iframe> էլեմենտի բացատրության մեջ։
usemap
usemap – օրինակ՝ usemap= “#myMap” –նշվում է <map> էլեմենտի իդենտիֆիկատորը, որով նկարը կցվում է <map>-ին։ Իդենտիֆիկատորից առաջ պարտադիր օգտագործել #-ը(Տես նաև “a… էլեմենտներ” -ի ” <area> ” բաժինը)։
srcset
srcset – օրինակ՝ srcset= “imageRetina.jpg 2x, image-phone.jpg 240w ” – եթե օգտվողի էկրանն ունի կրկնակի պիկսելային հարթություն, օրինակ՝ Apple Retina-ն, բրաուզերը կցուցադրի imageRetina.jpg 2x -ը(2x-ի միջոցով է այն նշվում), իսկ եթե հեռախոսի էկրան է, կցուցադրի image-phone.jpg 240w -ը(240w-ի միջոցով նշվում է էկրանի լայնությունը՝ width-ը)։
<input type=…>
Հաճախորդներին տրամադրվում են տվյալներ մուտքագրելու դաշտեր։ Սրանք տեղադրվում են <form> էլեմենտի ներսում։
Դաշտերում լրացվող տվյալներն իրարից տարբերվում են՝ տեքստ, գաղտնաբառ, որոշ պայմաններ ընտրելու ցուցակ(checkbox, radio) և այլն։
Տվյալների տեսակները որոշվում է type ատրիբուտի միջոցով։
<input>-ի ատրիբուտներն են՝
accept
accept – օրինակ՝ accept= “video, audio, image” – եթե type ատրիբուտի արժեքը “file” է, accept ատրիբուտի միջոցով նշվում է սերվերին փոխանցվող ֆայլերի թույլատրելի տեսակները։ ֆայլերի տեսակները թվարկվում են ստորակետներով։ Արժեքում նշվում է թույլատրելի ֆայլի MIME տեսակը՝
Video/mp4 –ընդունելի են վիդեո ֆայլեր։
Image/jpeg –ընդունելի են նկարներ:
Մնացած MIME տեսակների հետ կարող եք ծանոթանալ հետևյալ հղումով՝ wikipedia.org
alt
alt – օրինակ՝ alt= “nkar” – արժեքը ցուցադրվում է, երբ ֆայլը չի բացվում։ Սա օգտագործվում է միայն type= “image” -ի ժամանակ։
autocomplete
autocomplete – նշում է՝ պե՞տք է արդյոք ինքնալրացվի դաշտերը, երբ բրաուզերը ցուցադրի կայքի էջը։
Լրացվում է այն, ինչը օգտվողը անցյալում լրացրել է։ Ունի երկու արժեք՝ “on” – բրաուզերն ավտոմատ կլրացնի դաշտերը ըստ անցյալում լրցաված տվյալների և “off” – օգտվողն ինքն է լրացնում դաշտերն ամեն անգամ, երբ մուտք է գործում տվյալ կայքը։
Օգտագործվում է type-ի text, search, url, tel, email, password, datepickers, range, color տեսակների հետ։
autofocus
autofocus –սրա առկայությունը նշում է բրաուզերին, որ տվյալ դաշտը էջը ցուցադրելուն պես պետք է ակտիվ լինի լրացվելու ամար։ Սահմանվում է միայն մեկ դաշտի համար։
checked
checked –սրա առկայությունը սահմանում է, որ տվյալ վանդակը(checkbox-ը կամ radio-ն) նախապես պետք է ընտրված լինի։ Օգտագործվում է միայն type= “checkbox” և type= “radio” տեսակների հետ:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_09.png)
disabled
disabled –սրա առկայությունը նշում է, որ տվյալ <input> էլեմենտը պետք է անհասանելի լինի․
form
form – արժեքը կլինի այն <form>-ի իդենտիֆիկատորը, որին պատկանում է տվյալ <input>-ը։ Այդպիսով <input>-ը հնարավոր է տեղադրել ցանկացած վայրում և ոչ միայն <form>-ի մեջ։
Եթե form ատրիբուտը նշված չէ, ապա անհրաժեշտ է <input>-ը տեղադրել <form> էլեմենտի մեջ։
formaction
formaction – օրինակ՝ formaction= “handler.php” – նախատեսված է նույն գործողության համար ինչ <form>-ի action ատրիբուտը։ Երկուսի առկայության դեպքում formaction-ը գերադաս է action-ից։ Դրանց միջոցով նշվում է այն ֆայլի անունը(backend ծրագրավորման լեզվով գրված կոդ), որը սերվերում պիտի մշակի փոխանցվող տվյալները։ Աշխատում է միայն type= “submit” և type= “image” տեսակների հետ։
formenctype
formenctype – օրինակ՝ formenctype= “multipart/form-data” – Սահմանում է կոդավորման տեսակը տվյալները սերվերին փոխանցելու ժամանակ։ Տես նաև ” e.. f… էլեմենտներ” -ի ” <form> ” -ի ” accept-charset ” բաժինը։
Աշխատում է միայն <form>-ի method= “post” տեսակի հետ։
Օգտագործվում է type= “submit” և type= “image” տեսակների հետ։
Ունի հետևյալ արժեքները՝
Application/x-www-form-urlencoded –բոլոր սիմվոլները կոդավորվում են մինչ սերվերին ուղարկվելը, իսկ պրոբելները փոխվում են «+»-ների։
Multipart/form-data –սիմվլոները չեն կոդավորվում․ օգտագործվում է այն ժամանակ, երբ type= “file”-ի։
Text/plain –պրոբելները վերափոխվում են «+»-երի, իսկ հատուկ սիմվոլները չեն կոդավորվում(&, ?, = և այլն)։
formmethod
formmethod – նշվում է, թե որ մեթոդով պիտի տվյալները սերվեր ուղարկվի։ Աշխատում է միայն type= “submit” և type= “image” տեսակների հետ։
Արժեքներն են՝
get –տվյալները ավելացվում են URL հասցեում։ Օրինակ՝ https://example.com/account?name=Name&surname=Surname/
post –տվյալները փոխանցվում են, բայց չեն ավելացվում URL հասցեում։
Նույնն է, ինչ <form>-ի method– ը․ երկուսի առկայության դեպքում formmethod-ը գերադաս է method-ից։
formnovalidate
formnovalidate – Սրա առկայությունը սահմանում է, որ տվյալները չեն ստուգվելու նախքան սերվեր փոխանցելը։
Նույնն է ինչ <form>-ի novalidate-ը․ երկուսի առկայության դեպքում formnovalidate-ը գերադաս է novalidate-ից։
formtarget
formtarget – նշում է սերվերի կողմից ուղարկվող պատասխանը ցուցադրվելու վայրը։ Տես նաև ” b… էլեմենտներ ” -ի ” <button> ” -ի բաժինը։
Արժեքներն են՝ «_blank, _self, _parent, _top, freymiAnuny»:
Նույնն է ինչ target ատրիբուտը․ երկուսի առկայության դեպքում formtarget-ը գերադաս է target-ից։
height
height – սահմանում է էլեմենտի բարձրությունը։ Օգտագործել միայն type = ”image” տեսակի հետ։
list
list – սահմանում է կապ <datalist>-ի և <input> ի միջև։ Որպես արժեք տեղադրվում է <datalist>-ի իդենտիֆիկատորը։
Օրինակ՝
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_10.png)
min
min – օրինակ՝ min= “2” կամ min= “1995-12-31” – սահմանում է թվի համար նախատաեսված մինիմալ արժեքը. Նախատեսված է type= “number” տեսակի համար.
Օրինակ՝
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_11.png)
Առանց max ատրիբուտի, ընտրությունը կլինի երկու և ավելի։
Հնարավոր է սահմանել նաև մինիմալ ամսաթիվը։
Ամսաթվի համար այս ատրիբուտն օգտագործելիս կսահմանվի type= “date”։
max
max – օրինակ՝ max= “20” կամ max= “2005-12-31” – սահմանում է թվի համար նախատեսված մաքսիմալ արժեքը, կամ մաքսիմալ ամսաթիվը։
Ամսաթվի համար այս ատրիբուտն օգտագործելիս կսահմանվի type= “date”։
Օրինակ՝
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_12.png)
maxlength և minlength
maxlength և minlength – օրինակ՝ maxlength= “10” – նշում է սիմվոլների մաքսիմալ կամ մինիմալ քանակը, թե օգտվողը քանի սիմվոլ կարող է օգտագործել դաշտը լրացնելիս։
multiple
multiple –սրա առկայության ժամանակ օգտվողը կարող է մեկից ավելի տվյալներ նշել դաշտում կամ ֆայլեր ուղարկել։
Օգտագործվում է միայն type= “email”-ի և type= “file”-ի հետ։
Օրինակ՝
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_13.png)
Տվյալները՝ այս դեպքում էլ․ հասցեները, իրարից առանձնացվում են ստորակետով։
name
name – օրինակ՝ name= ”inchvorAnun” – էլեմենտին սահմանում ենք անուն, որը տվյալների հետ կուղարկվի սերվեր․ անվան միջոցով կգտնվի տվյալ <input> էլեմենտի արժեքը։ Կարող է օգտագործվել նաև javascript-ում։
pattern
pattern – օրինակ՝ pattern= “2-[0-9] {3}-[0-9]{3}” –սահմանվում է «կանոնավոր արտահայտություն»(регулярное выражение)-ը, այսինքն նմուշը՝ լրացվող տվյալը պիտի համապատասխանի նշված նմուշին։
Օրինակում նմուշը հետևյալն է՝
-նախ պարտադիր է «2-» նշել,
-հետո պետք է զրոից ինը միջակայքում թիվ օգտագործել երեք անգամ,
-այնուհետ նշել « – » սիմվոլը,
-նորից զրոից ինը միջակայքում թիվ օգտագործել երեք անգամ։
Արդյունքը կարող է լինել հետևյալը՝ «2-346-682».
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_14.png)
Pattern-ի նմուշը պատրաստվում է հատուկ սիմվոլների միջոցով․
դրանք են՝
Սիմվոլային կլասներ(Символьные классы)
\d –համապատասխանում է ցանկացած թվի։
\D –համապատասխանում է բոլոր սիմվոլներին, բացի թվերից։
\s –համապատասխանում է ամեն տեսակի պրոբելներին՝ սովորական պրոբելին, տաբուլյացիային, տողը փոխելուն և այլն։
\S –ամեն սիմվոլ, բացի s – ից։
\w –համապատասխանում է բոլոր լատինատառերին և «_»-ին։
\W -համապատասխանում է ամեն սիմվոլի, բացի w-ից։
․ –ցանկացած սիմվոլ, բացի տողը փոխելու սիմվոլից(\n):
Խարիսխ կոչվող սիմվոլներ(якоря)
^ –օրինակ՝ ^Hello –դաշտը, որ պիտի լրացվի, պարտադիր պիտի սկսի «Hello» բառից։
$ –օրինակ՝ world$ –դաշտը, որ պիտի լրացվի, պարտադիր պիտի վերջանա «world» բառով։
Բառի սահմաններ նշող(граница слова)
\b –օրինակ՝ bwwwwb –նշվում է բառի սահմանները։ Բառն ունի սկիզբ և վերջ․ սահմանում է, որ նմուշին համապատասխանող բառը պիտի առանձին լինի, այսինքն ունենա սկիզբ, w սիմվոլների պարունակություն և վերջ։ Օրինակ՝ «Programming languages divided into two groups…» – նախադասության մեջ նմուշին կհամապատասխանի միայն «into» բառը, քանի որ այն ունի սկզիբ, չորս w սիմվոլ և ունի վերջ։
b-ի համար սահման հանդիսանում է միայն \w սիմվոլները։ Օրինակ բառը չի կարող սկսվել ” ! ” -ով, կամ ավարտվել ” , ” -ով։
Կհամապատասխանեն՝ – ” \bHello\b world “, “ \bHello\b, world “։
Չեն համապատասխանի՝ – ” \bHell\bo world “(քանի որ բառն ավարտվում է ” o ” սիմվոլով, այլ ոչ թե ” l ” -ով), ” \bHello,\b world “(քանի որ վերջում ստորակետի սիմվոլ է)։
Էկրանավորման սիմվոլներ(экранирование)
Հատուկ սիմվոլներն օգտագործվում են Pattern սահմանելու համար(օրինակ՝ ” ?, [, {, +, * ” և այլն)։ Դրանք որպես հասարակ սիմվոլ օգտագործելու համար պետք է էկրանավորել։ Էկրանավորումը կատարվում է ” \ ” սիմվոլով։
Օրինակ՝ ” \d\.\d ” – այստեղ էկրանավորել ենք կետը։ Pattern -ը կհամապատասխանի օրինակ «3.2»-ին։ Այսինքն սահամնել ենք, որ այդ երկու թվերի արանքում «կետ» պիտի լինի։ Կետի փոխարեն կարող են լինել այլ սիմվոլներ։ Օրինակ՝ ” \d\{\d ” Pattern -ը կհամապատասխանի «3{2» արժեքին և այլն։
” \ ” սիմվոլն կէկրանավորվի հետևյալ կերպ՝ ” \\ ” ։
Կոմպլեկտներ և միջակայքեր(наборы и диапазоны)
[afu] –սա կոմպլեկտ է։ Յուրաքանչյուր տեքստ որում կգտնվի նշված սիմվելներից գոնե մեկը, կհամապատասխանի Pattern -ին։
[0-9a-z] –սա միջակայք է։ Pattern -ը կհամապատասխանի a -ից z և 0 -ից 9 ընկած միջակայում Ցանկացած սիմվոլի(կամ՝ [0-9A-Z], որտեղ պարտադիր մեծատառեր պիտի օգտագործվեն։
«[ ]»-երի մեջ հնարավոր է օգտագործել նաև սիմվոլային կլասներ: Օրինակ՝ ” [\w\s\w] ” -արժեքը կարող է լինել հետևյալը՝ «t k»)։
Հնարավոր է նաև բացառել որոշ սիմվոլների օգտագործումը «^» սիմվոլի միջոցով։ Այն իր նշանակությունը փոխում է, երբ օգտագործվում է ” [ ] “-երի ներսում։
[^aebvjg] –Նշված սիմվոլները բացառում է, ուստի տեքստը չի կարող բաղկացած լինել միայն այդ սիմվոլներից։ Օրինակ՝ ” [^a-z] ” -տեքստում արգելվում է օգտագործել a -ից z ընկած միջակայքի բոլոր լատինատառ սիմվոլները։
Կվանտիֆիկատորները( ., +, *, ? և այլն ) հատուկ սիմվոլներ են, որոնք քառակուսի փակագծերի մեջ օգտագործելիս կորցնում են իրենց հատկությունը որպես կվանտիֆիկատոր և դառնում են սովորական սիմվոլներ, բացառությամբ « ^ »-ից. եթե այն նշվում է սկզբում, անհրաժեշտ է էկրանավորել, քանի որ առանց էկրանավորման այն կնկալվի որպես բացառող հատուկ սիմվոլ, ինչին ծանոթացանք քիչ առաջ։
Օրինակ՝ [\^.+*fvgh] -ի դեպքում Pattern -ին կհամապատասխանի այն տեքստը, որում օգտագործված է նշված սիմվոլներից գոնե մեկը։
Կվանտիֆիկատորներ՝ +, *, ?, {n}:
{n} –Վերցնենք որևէ հնգանիշ թիվ՝ 46754․ սրա համար նախատեսված նմուշը կլինի՝ \d\d\d\d\d: Որպեսի d-ն հինգ անգամ չկրկնվի, կօգտագործվեն կվանտիֆիկատորներ։ Այստեղ ” \d{5} “- սա նույնն է ինչ \d\d\d\d\d -ն։
{n,n} –սահմանում է թվերի քանակի համար դիապազոն:
Օրինակ՝ ” \d{4,9} ” -ի համար ” 457635495493875683 ” -ը կհամապատասխանի, քանի որ ապահովում է 4-ից 9 -ը դիապազոնը․
” ^\d{4,9}$ ” -կհամապատասխանի միայն, եթե քանակը 4-ից 9 -ը դիապազոնում է։
Եթե երկրորդ թիվը նշված չէ, այլ միայն ստորակետը՝ ({4,}) -հնարավոր է օգտագործել 4 և ավելի թվեր։
+ –օրինակ՝ ” ^[\d]+$ ” –կսահմանի 1(պարտադիր) կամ ավելի թվեր։ Նույնն է ինչ՝ \d{1,}:
? –կսահմանի զրո կամ մեկ քանակի թիվ։ « ^[\d]?$ » – ը նույն գործողությունը կկատարի ինչ « ^\d{0,1}$ »-ը։
* –կսահմանի զրո կամ ցանկացած քանակի թիվ։ \d* – ը նույն գործողությունը կանի, ինչ d{0,} -ն։
Փակագծային խմբեր՝ (…):
Եթե փակագծերից հետո օգտագործվի կվանտիֆիկատոր, ապա այն կվերաբերվի փակագծում նշված ամբողջ պարունակությանը։
Օրինակ՝ ” ^hi+$ ” – այստեղ + կվանտիֆիկատորը կվերաբերվի միայն « i »-ին:
” hiiii ” – կհամապատասխանի։
” hhhiii ” -չի համապատասխանի, քանի որ + -ը վերաբերում է միայն « i »-ին։
Եթե այն վերցվի փակագծերի մեջ՝ « (Hi)+ », կվանտիֆիկատորը կվերաբերի երկուսին էլ։ Արդյունքում թույլատրելի կլինի դաշտը լրացնել հետևյալ կերպ՝ « Hi, Hiiii, HiiHiii » և այլն։
Այլընտրանք(Կամ)։
«Կամ» -ը նշվում է « | » սիմվոլով։ Այսինքն, սահմանում է կանոնավոր արտահայտության երկու տեսակի նմուշ։ Օրինակ՝ «[a-z0-9]+|[\D]+» – այսինքն կամ « [a-z0-9]+ » տարբերակը, կամ « [D]+ » տարբերակը։
placeholder
placeholder – օրինակ՝ placeholder= “Name” –օգտվողին հուշում է, թե տվյալ դաշտն ինչի համար է նախատեսված։ Հուշումը կորչում է, երբ օգտվողը սկսում է դաշտը լրացնել. Օգտագործվում է, երբ type-ի արժեքը հավասար է՝ text, search, url, tel, email, password.
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_15.png)
readonly
readonly –տրամաբանական ատրիբուտ է, որի առկայությունը սահմանում է՝ տվյալ դաշտն անհասանելի է լրացման համար, բայց իրենում նախապես լրացված պարունակությունը կարելի է պատճենել։ Այն նշվում է value ատրիբուտի միջոցով․
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_16.png)
required
required – տրամաբանական ատրիբուտ է, որի առկայությունն սահմանում է՝ տվյալ դաշտը պարտադիր պիտի լրացվի։
Օգտագործվում է, երբ type-ի արժեքը հավասար է՝ text, search, url, tel, email, password, date, number, checkbox, radio, file.
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_17.png)
size
size – օրինակ՝ size= “5” – սահմանում է դաշտի երկարությունը։ 5 -ի դեպքում դաշտը բավարար կլինի միայն հինգ սիմվոլ նշելու համար։
Այս ատրիբուտն օգտագործվում է, երբ type-ը հավասար է՝ text, search, tel, url, email, password:
src
src –օգտագործվում է միայն, երբ type= “image”-ի և դրանում նշվում է գրաֆիկական ֆայլի հասցեն։
step
step – օրինակ՝ step= “3” –երբ type= “number”-ի, ապա թվերի համար կսահմանվի ինտերվալ․ օրինակ եթե step= “3”-ի, ապա կարող է լինել՝ -3, 0, 3, 6 և այլն։
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_18.png)
value
value – օրինակ՝ value= “Hamadzajnvel” – type-ի տարբեր արժեքների հետ աշխատում է տարբեր կերպ։
Օրինակ՝ button, reset, submit-ի ժամանակ սահմանում է կոճակի վրա տեղադրվող տեքստը։
text, password, hidden – ի ժամանակ սահմանում է դրանց սկզբնական արժեքը,
checkbox, radio, image – ի ժամանակ պարտադիր պիտի սահմանվի, որով կնշի դրանց համապատասխան արժեքները։
width
width – սահմանում է էլեմենտի լայնությունը պիքսելներով․ օգտագործվում է միայն, երբ type= “image”:
inputmode
inputmode – օրինակ՝ inputmode= “numeric” –հուշում է բրաուզերին, թե ինչ տեսակի ստեղնաշար պիտի առաջարկի օգտվողին դաշտը լրացնելու համար։
Ունի մի շարք արժեքներ, բայց կուսումնասիրվեն ամենահիմնականները։
Արժեքներն են՝
numeric
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_19-1024x348.png)
tel
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_20-1024x348.png)
decimal
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_21-1024x311.png)
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_22-1024x355.png)
url
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_23-1024x352.png)
search
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_24-1024x348.png)
enterkeyhint
enterkeyhint – «Մուտք» կոճակի համար է –արժեքները կարող ենք տեսնել հետևյալ նկարում՝
![](https://hayti.am/wp-content/uploads/2023/12/hielementner-hi_03-1024x437.png)
spellcheck
spellcheck – օրինակ՝ spellcheck= “true” –ստուգում է մուտքագրված տեքստի քերականությունը։ true – ն թույլատրում է ստուգել, իսկ false-ն արգելում է։
Եթե քերականությունը սխալ է, ապա տվյալ բառի տակ կարմիր գիծ կհայտնվի։
tabindex
tabindex – օրինակ՝ tabindex= “2” – նույն form-ի մեջ մի քանի input-ների առկայության դեպքում tabindex-ում նշված թվերի միջոցով կսահմանվի դաշտերի ակտիվանալու հերթականությունը, երբ օգտվողը սեղմի Tab ստեղնը։
type
button
Սահմանում է ակտիվ կոճակ: Եթե անհրաժեշտ է, որ կոճակը կապ չունենա form -ի հետ և օգտագործվի որևէ javascript-ի կոդ ակտիվանցելու համար, ապա կօգտագործվի այս տարբերակը։
checkbox
Սահմանում է վանդակներ, որը կարելի է ընտրել, հանել, կամ ընտրել մի քանիսը:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_26.png)
color
Հնարավորություն է տալիս օգտվաողին ընտրել որևէ գույն, և օգտագործել դրա կոդը, կամ այն մշակման համար ուղարկել սերվեր:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_27.png)
date
Ամսաթիվ ընտրելու հնարավորություն է տալիս` օր, ամիս, տարի:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_28.png)
datetime-local
Ամսաթիվ ընտրելու հնարավորություն է տալիս` օր, ամիս, տարի, ժամ, րոպե, վարկյան:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_29.png)
Սահմանում է էլ․ հասցե լրացնելու դաշտ։ Մինչ սերվեր ուղարկվելը կստուգվի՝ համապատասխանու՞մ է էլ․ հասցեի ստանդարտին։
file
Տրամադրում է կոճակ, որով կարելի է սերվեր ուղարկել որևէ ֆայլ։
hidden
Սահմանում է դաշտ, որը չի երևում և ենթակա չէ փոփոխման, բայց դրա արժեքը, որը նշվում է value ատրիբուտի միջոցով, ուղարկվում է սերվեր։
image
Սահմանում է նկար, որը հանդիսանում է որպես կոճակ:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_30.png)
month
Հնարավորություն է տալիս ընտրել ամիսը և տարին:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_31.png)
number
Դաշտը լրացվելու է միայն թվերով։
password
Նախատեսված է գաղտնաբառը գրանցելու համար։
radio
Նախատեսված է ռադիո կոճակներ սահմանելու համար։
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_32.png)
range
Սահմանում է սահնակ՝ աջ և ձախ տեղաշարժելու կոճակ, որում որոշված արժեքը կօգտագործվի javascript-ում, կամ մշակման համար կուղարկվի սերվեր։
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_33.png)
reset
Սահմանում է կոճակ, որով ջնջվում է <form>-ի դաշտերում մուտքագրված բոլոր տվյալները։
search
Սահմանում է տեքստային դաշտ, որը նախատեսված է որևէ բառ որոնելու համար։
submit
Սահմանում է կոճակ, որով դաշտերի տվյալներն ուղարկվում է սերվեր․ նույնն է ինչ <button type= “submit”>-ը։
tel
Նախատեսված է հեռախոսահամար նշելու համար։
text
Նախատեսված է որևէ տեքստ նշելու համար։
time
Նախատեսված է միայն ժամ նշելու համար:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_34.png)
url
Նախատեսված է url հասցե նշելու համար․ Մինչ սերվեր ուղարկվելը կստուգվի՝ համապատասխանու՞մ է url հասցեների ստանդարտին(օրինակ` http://www.hayti.am ):
week
Նախատեսված է շաբաթ և տարի նշելու համար:
![](https://hayti.am/wp-content/uploads/2023/12/h-i_elementner_35.png)