Label թեգ
label թեգը սահմանում է պիտակ մուտքագրման դաշտի համար,
ինչպիսիք են input,
textarea,
select
և այլն:
Պիտակը կապվում է կոնկրետ մուտքագրման դաշտի հետ
for ատրիբուտի միջոցով: Դրանում
պետք է նշել այն մուտքագրման դաշտի id
ատրիբուտի արժեքը, որին կապված է պիտակը: Նաև
պիտակը կապվում է տարրի հետ, եթե այդ
տարրը տեղադրենք label թեգի ներսում: Այս
դեպքում for ատրիբուտը նշելու կարիք չկա: Տեսեք
օրինակներն ավելի լավ հասկանալու համար:
Պիտակի վրա սեղմելիս դրան կապված չեկբոքսները կամ ռադիո կոճակները կփոխեն իրենց վիճակը նշվածից դեպի չնշված և հակառակը: Պիտակն այս դեպքում անհրաժեշտ է հարմարավետության համար. Ձևի փոքր տարրերին դժվար է դիպչել կուրսորով, իսկ երկար պիտակին տեքստով՝ անհամեմատ ավելի հեշտ:
Պիտակին կապված տեքստային մուտքագրման դաշտը,
ինչպիսիք են input
և textarea,
կստանա մուտքագրման ֆոկուս: Ֆոկուս
- երբ կուրսորը բացվում-փակվում է մուտքագրման դաշտում,
այս դեպքում, եթե ինչ-որ բան մուտքագրեք
ստեղնաշարից - տեքստը կհայտնվի այս դաշտում
(տես. focus
պսևդոդասերը ֆոկուսի առաջադեմ հասկացման համար):
label պիտակը կարող է օգտագործվել
չեկբոքսի
կամ ռադիո
կոճակի նմանակման համար: Սա անհրաժեշտ է
checkbox-ը կամ radio-ն սեփական դիզայնով պատրաստելու համար (ինչը
CSS-ով արգելված է, բայց խորամանկ հնարքների միջոցով
հնարավոր է):
Ատրիբուտներ
| Ատրիբուտ | Նկարագրություն |
|---|---|
for |
Այս ատրիբուտում պետք է նշել այն մուտքագրման դաշտի id ատրիբուտի արժեքը,
որին կապված է label պիտակը:
|
accesskey |
Սահմանում է դյուրանցման ստեղն, որի օգնությամբ կարելի է անցնել պիտակին կապված
(for ատրիբուտի միջոցով) ձևի տարրին:
Մանրամասն տես. accesskey ատրիբուտը:
|
Օրինակ . Չեկբոքս
Եկեք checkbox
նշիչին կապենք պիտակ՝ օգտագործելով for ատրիբուտը:
Սեղմեք պիտակի վրա և կտեսնեք, որ նշիչի վիճակը կփոխվի
նշվածից դեպի չնշված և հակառակը.
<input type="checkbox" id="checkbox">
<label for="checkbox">Ես կապված եմ checkbox-ի հետ, որի id-ն checkbox է:</label>
:
Օրինակ . Label-ի ներսում
Իսկ հիմա եկեք պիտակը չկապենք
for ատրիբուտով, այլ տարրերը դնենք հենց
label թեգի ներսում, այս դեպքում label-ի տեքստի վրա սեղմելը
նույնպես կհանգեցնի տարրի ակտիվացման.
<label><input type="checkbox"> պիտակ</label>
:
Օրինակ . Տեքստային մուտքագրման դաշտ
Եկեք input
թեգին կապենք պիտակ՝ օգտագործելով for ատրիբուտը:
Պիտակի վրա սեղմելը կհանգեցնի մուտքագրման ֆոկուսի ստացմանը
դաշտի կողմից: Այդ դեպքում դաշտում պարունակվող
տեքստը (որը կավելացնենք
value ատրիբուտի օգնությամբ)
կընդգծվի: Եթե սկսեք ինչ-որ բան մուտքագրել
ստեղնաշարից - այս տեքստը կջնջվի: Ազատվել
ընդգծումից, առանց տեքստը ջնջելու, կարելի է
մկնիկի սեղմումով դաշտի վրա. ֆոկուսը
այդ դեպքում չի անհետանա, բայց ընդգծումը կվերանա.
<input type="text" id="input1" value="ինչ-որ տեքստ">
<label for="input1">Ես կապված եմ input-ի հետ, որի id-ն input1 է:</label>
:
Տես նաև
-
legendթեգը,
որը սահմանում է վերնագիր դաշտերի խմբավորման համար
