h…i… էլեմենտներ

Մոտավոր ընթերցում. 6 րոպե 0 դիտումներ

<h1> <h2> <h3> <h4> <h5> <h6>

Սահմանում են տեքստի վերնագիրը։

				
					<body>
  <h1>Վերնագիր</h1>
  <h2>Վերնագիր</h2>
  <h3>Վերնագիր</h3>
  <h4>Վերնագիր</h4>
  <h5>Վերնագիր</h5>
  <h6>Վերնագիր</h6>
</body>

<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>

Սահմանում է հորիզոնական գիծ երկու տեքստերի միջև։

Օրինակ՝

<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>

Տեքստը թեք տեսքով ցուցադրելու համար է։

Օրինակ՝

<iframe>…</iframe>

Հիմնական վեբ էջում սահմանում է մեկ այլ վեբ էջ։

Օրինակ հիմնական էջին վերաբերող Css-ը ազդեցություն չի ունենա ֆրեյմի վրա, քանի որ ֆրեյմը այլ վեբ էջ է։

Օրինակ՝

				
					<body>
  <img decoding="async" src="html.png" />
  <p>
    HTML' (անգլ.՝ HyperText Markup Language, գերտեքստի նշագրման լեզու), նշագրման
    լեզու, որն օգտագործվում է վեբ-էջերի մեծամասնության նշագրման համար։ HTML
    լեզուն վերամշակվում է դիտարկչի կողմից և ցուցադրվում է մարդու կողմից հեշտ
    ընթեռնելի փաստաթղթի տեսքով։
  </p>
  <iframe src="https://hy.wikipedia.org/wiki/HTML" height="400px" width="400px"
    >ձեր բրաուզերը չի կարողանում ցուցադրել ֆրեյմի պարունակությունը
  </iframe>
</body>

Ատրիբուտներն են՝

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 –ուղարկում է ամբողջական ռեֆերային հասցեն ցանկացած դեպքում․ խորհուրդ չի տրվում օգտագործել այս տեսակը։

Օրինակներ՝

Internet Explorer և Safari բրաուզերների կողմից referrerpolicy ատրիբուտը չի աջակցվում։

sandbox

sandbox – օրինակ՝ sandbox= “allow-form” –օգտագործվում է, երբ ֆրեյմի վրա սահմանափակումներ դնել համար։

Երբ սահմանվում է sandbox= “” – տարբերակը՝ առանց որևէ արժեքի, ապա կակտիվացնենք բոլոր սահմանափակումները, իսկ որևէ արժեքի դեպքում կակտիվանան բոլոր սահմանափակումները բացի նշվածից։

Արժեքներն են՝

allow-forms –թույլ է տալիս ֆրեյմում գտնվող <form>-ի տվյալներն ուղարկել սերվեր։

allow-modals – ֆրեյմում թույլ է տալիս բացվել մոդալ պատուհանները։ Դրանցում սովորաբար լինում են նկար, տեքստ նախազգուշացնող պատուհան և այլն։ Մոդալ պատուհանի օրինակներ՝

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 տեսակը՝

Audio/mp4 –ընդունելի է աուդիո ֆայլեր։

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” տեսակների հետ:

				
					<body>
  <form action="example.php" method="post">
    <input type="checkbox" />
    <input type="checkbox" checked />
    <input type="checkbox" />
  </form>
</body>

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>-ի իդենտիֆիկատորը։

Օրինակ՝

				
					<body>
  <input list="browsers" />
  <datalist id="browsers">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Google Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
</body>

min

min – օրինակ՝ min= “2” կամ min= “1995-12-31” – սահմանում է թվի համար նախատաեսված մինիմալ արժեքը. Նախատեսված է type= “number” տեսակի համար.

Օրինակ՝

Առանց max ատրիբուտի, ընտրությունը կլինի երկու և ավելի։

Հնարավոր է սահմանել նաև մինիմալ ամսաթիվը։

Ամսաթվի համար այս ատրիբուտն օգտագործելիս կսահմանվի type= “date”։

max

max – օրինակ՝ max= “20” կամ max= “2005-12-31” – սահմանում է թվի համար նախատեսված մաքսիմալ արժեքը, կամ մաքսիմալ ամսաթիվը։

Ամսաթվի համար այս ատրիբուտն օգտագործելիս կսահմանվի type= “date”։

Օրինակ՝

				
					<body>
  <form action="handler.php">
    <p>Նշեք ձեր ծննդյան թիվը՝</p>
    <p>
      <input type="date" min="1995-12-31" max="2005-12-31" value="1996-12-31" />
    </p>
  </form>
</body>

maxlength և minlength

maxlength և minlength – օրինակ՝ maxlength= “10” – նշում է սիմվոլների մաքսիմալ կամ մինիմալ քանակը, թե օգտվողը քանի սիմվոլ կարող է օգտագործել դաշտը լրացնելիս։

multiple

multiple –սրա առկայության ժամանակ օգտվողը կարող է մեկից ավելի տվյալներ նշել դաշտում կամ ֆայլեր ուղարկել։

Օգտագործվում է միայն type= “email”-ի և type= “file”-ի հետ։

Օրինակ՝

Տվյալները՝ այս դեպքում էլ․ հասցեները, իրարից առանձնացվում են ստորակետով։

name

name – օրինակ՝ name= ”inchvorAnun” – էլեմենտին սահմանում ենք անուն, որը տվյալների հետ կուղարկվի սերվեր․ անվան միջոցով կգտնվի տվյալ <input> էլեմենտի արժեքը։ Կարող է օգտագործվել նաև javascript-ում։

pattern

pattern – օրինակ՝ pattern= “2-[0-9] {3}-[0-9]{3}” –սահմանվում է «կանոնավոր արտահայտություն»(регулярное выражение)-ը, այսինքն նմուշը՝ լրացվող տվյալը պիտի համապատասխանի նշված նմուշին։

Օրինակում նմուշը հետևյալն է՝
-նախ պարտադիր է «2-» նշել,
-հետո պետք է զրոից ինը միջակայքում թիվ օգտագործել երեք անգամ,
-այնուհետ նշել « – » սիմվոլը,
-նորից զրոից ինը միջակայքում թիվ օգտագործել երեք անգամ։
Արդյունքը կարող է լինել հետևյալը՝ «2-346-682».

				
					<body>
  <form action="example.php" method="post">
    <input type="text" pattern="2-[0-9]{3}-[0-9]{3}" />
  </form>
</body>

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.

readonly

readonly –տրամաբանական ատրիբուտ է, որի առկայությունը սահմանում է՝ տվյալ դաշտն անհասանելի է լրացման համար, բայց իրենում նախապես լրացված պարունակությունը կարելի է պատճենել։ Այն նշվում է value ատրիբուտի միջոցով․

				
					<body>
  <form action="example.php" method="post">
    <input type="text" readonly value="example" />
  </form>
</body>

required

required – տրամաբանական ատրիբուտ է, որի առկայությունն սահմանում է՝ տվյալ դաշտը պարտադիր պիտի լրացվի։

Օգտագործվում է, երբ type-ի արժեքը հավասար է՝ text, search, url, tel, email, password, date, number, checkbox, radio, file.

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 և այլն։

value

value – օրինակ՝ value= “Hamadzajnvel” – type-ի տարբեր արժեքների հետ աշխատում է տարբեր կերպ։

Օրինակ՝ button, reset, submit-ի ժամանակ սահմանում է կոճակի վրա տեղադրվող տեքստը։

text, password, hidden – ի ժամանակ սահմանում է դրանց սկզբնական արժեքը,

checkbox, radio, image – ի ժամանակ պարտադիր պիտի սահմանվի, որով կնշի դրանց համապատասխան արժեքները։

width

width – սահմանում է էլեմենտի լայնությունը պիքսելներով․ օգտագործվում է միայն, երբ type= “image”:

inputmode

inputmode – օրինակ՝ inputmode= “numeric” –հուշում է բրաուզերին, թե ինչ տեսակի ստեղնաշար պիտի առաջարկի օգտվողին դաշտը լրացնելու համար։

Ունի մի շարք արժեքներ, բայց կուսումնասիրվեն ամենահիմնականները։

Արժեքներն են՝

numeric

tel

decimal

email

url

search

enterkeyhint

enterkeyhint – «Մուտք» կոճակի համար է –արժեքները կարող ենք տեսնել հետևյալ նկարում՝

spellcheck

spellcheck – օրինակ՝ spellcheck= “true” –ստուգում է մուտքագրված տեքստի քերականությունը։ true – ն թույլատրում է ստուգել, իսկ false-ն արգելում է։

Եթե քերականությունը սխալ է, ապա տվյալ բառի տակ կարմիր գիծ կհայտնվի։

tabindex

tabindex – օրինակ՝ tabindex= “2” – նույն form-ի մեջ մի քանի input-ների առկայության դեպքում tabindex-ում նշված թվերի միջոցով կսահմանվի դաշտերի ակտիվանալու հերթականությունը, երբ օգտվողը սեղմի Tab ստեղնը։

type

button

Սահմանում է ակտիվ կոճակ: Եթե անհրաժեշտ է, որ կոճակը կապ չունենա form -ի հետ և օգտագործվի որևէ javascript-ի կոդ ակտիվանցելու համար, ապա կօգտագործվի այս տարբերակը։