disabled ատրիբուտ

disabled ատրիբուտը արգելափակում է HTML ձևի տարրը, այսինքն՝ դարձնում է այն ոչ ակտիվ: Արժեք չունեցող ատրիբուտ է:

Տարրերի արգելափակումը սովորաբար անհրաժեշտ է այն համար, որ արգելվի օգտատիրոջը փոխել որոշ արժեքներ (որոնք, այնուամենայնիվ, պետք է ցուցադրվեն օգտատիրոջը ձևի տարրերի տեսքով): Երբեմն տարրերը արգելափակվում են (և արգելափակումը հանվում է) JavaScript-ի միջոցով:

Վարքագիծ

Կոճակի դեպքում (button կամ input type ատրիբուտով button, reset կամ submit արժեքներով) արգելափակումը նշանակում է, որ կոճակի վրա հնարավոր չի լինի սեղմել: Տեքստային ներածման դաշտի դեպքում (input կամ textarea) դրանում հնարավոր չի լինի փոխել կամ պատճենել տեքստը: Չեկբոքսների և ռադիո կոճակների դեպքում դրանց վիճակը (նշված է, թե ոչ) հնարավոր չի լինի փոխել: Բացվող ցուցակների select դեպքում հնարավոր չի լինի փոխել ցուցակի ընտրված կետը:

Արգելափակված տարրը լռելյայն ունի մոխրագույն ֆոն: Այն նաև չի մասնակցի Tab ստեղնով անցումներին:

Օրինակ . Արգելափակված կոճակ

Եկեք արգելափակենք կոճակը disabled ատրիբուտի միջոցով: Համեմատության համար կողքին ոչ արգելափակված կոճակի օրինակ (եկեք փորձենք սեղմել դրա վրա):

html<button disabled>տեքստ</button>
<button>տեքստ</button>

Результат:

Օրինակ . Արգելափակված չեկբոքս

Իսկ այժմ եկեք նայենք արգելափակված չեկբոքսի նշիչին: Համեմատության համար կողքին նայում ենք ոչ արգելափակված նշիչի օրինակին:

html<input type="checkbox" disabled>
<input type="checkbox">

Результат:

Օրինակ . Արգելափակված և նշված չեկբոքս

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

html<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Результат:

Օրինակ . Արգելափակված տեքստային դաշտ

Իսկ այժմ եկեք արգելափակենք ինպուտը: Համեմատության համար կողքին նայում ենք ոչ արգելափակված ինպուտի օրինակին:

html<input type="text" value="տեքստ" disabled>
<input type="text" value="տեքստ">

Результат:

Օրինակ . Արգելափակված տեքստի տարածք

Իսկ այստեղ մենք կտեսնենք արգելափակված տեքստի տարածքը (ուշադրություն դարձրեք, որ արգելափակված textarea-ի չափը կարելի է փոխել): Համեմատության համար կողքին դիմում ենք ոչ արգելափակված տեքստի տարածքի օրինակին:

html<textarea disabled>տեքստ</textarea>
<textarea>տեքստ</textarea>

Результат:

Օրինակ . Արգելափակված բացվող ցուցակ

Եկեք տեսնենք, թե ինչպես է աշխատում արգելափակված select-ը: Համեմատության համար կողքին նայում ենք ոչ արգելափակված բացվող ցուցակի օրինակին:

html<select disabled>
  <option>քաղաք1</option>
  <option selected>քաղաք2</option>
  <option>քաղաք3</option>
  <option>քաղաք4</option>
</select>
<select>
  <option>քաղաք1</option>
  <option selected>քաղաք2</option>
  <option>քաղաք3</option>
  <option>քաղաք4</option>
</select>

Результат:

Տես նաև