အင်္ဂါရပ် label

အင်္ဂါရပ် label သည် အမျိုးအစား input, textarea, select စသည်တို့အတွက် ထည့်သွင်းရန် ကွက်လပ်တစ်ခုအတွက် စာညွှန်းကို သတ်မှတ်ပေးသည်။

စာညွှန်းကို for အတ်ထရီဗျု့အားဖြင့် ထည့်သွင်းရန် ကွက်လပ်တစ်ခုသို့ ချိတ်ဆက်ပေးနိုင်သည်။ ၎င်းတွင် စာညွှန်းနှင့် ချိတ်ဆက်ထားသော ထည့်သွင်းရန် ကွက်လပ်၏ id အတ်ထရီဗျု့တန်ဖိုးကို ဖော်ပြသင့်သည်။ ထို့အပြင် အကယ်၍ အဲလီမင့်ကို label အင်္ဂါရပ်၏အတွင်းသို့ ထားလျှင် စာညွှန်းသည် ထိုအဲလီမင့်နှင့် ချိတ်ဆက်သွားမည်။ ထိုသို့ဖြစ်ပါက အတ်ထရီဗျု့ for ကို ဖော်ပြရန် မလိုအပ်ပါ။ ပိုမိုကောင်းမွန်စွာ နားလည်နိုင်ရန် နမူနာများကို ကြည့်ပါ။

စာညွှန်းကို နှိပ်လိုက်သောအခါ ၎င်းနှင့် ချိတ်ဆက်ထားသော checkbox များ သို့မဟုတ် radio ခလုတ်ငယ်များသည် ၎င်းတို့၏အခြေအနေကို အမှတ်အသားပြုထားသည့်အခြေအနေမှ အမှတ်အသားမပြုထားသည့်အခြေအနေသို့ ပြောင်းလဲသွားမည်။ ဤကိစ္စတွင် စာညွှန်းကို အဆင်ပြေစေရန် အသုံးပြုသည်- ဖောင်ရှိ အသေးစားအဲလီမင့်များထဲသို့ cursor ဖြင့် ဝင်ရောက်ရန် ခက်ခဲသော်လည်း စာသားရှည်ရှိသော စာညွှန်းထဲသို့မူ ဝင်ရောက်ရန် ပိုမိုလွယ်ကူသည်။

စာညွှန်းနှင့် ချိတ်ဆက်ထားသော စာသားထည့်သွင်းရန် ကွက်လပ် အမျိုးအစား input နှင့် textarea တို့သည် ထည့်သွင်းမှု focus ကို ရရှိမည်။ Focus ဆိုသည်မှာ cursor သည် ထည့်သွင်းရန် ကွက်လပ်ထဲတွင် မှိတ်တုတ်မှိတ်တုတ်ဖြစ်နေခြင်းကို ဆိုလိုသည်။ ထိုအခြေအနေတွင်၊ အကယ်၍ သင်သည် ကီးဘုတ်ပေါ်တွင် တစ်စုံတစ်ခုရိုက်ထည့်ပါက စာသားသည် ထိုကွက်လပ်ထဲသို့ ဝင်ရောက်သွားမည် (focus ၏ အဆင့်မြင့်နားလည်မှုအတွက် ပီဆူဒိုကလပ် focus ကို ကြည့်ပါ)။

စာညွှန်း label ကို checkbox သို့မဟုတ် radio ခလုတ်ငယ်၏ အစားထိုးပုံစံအဖြစ် အသုံးပြုနိုင်သည်။ ၎င်းသည် checkbox သို့မဟုတ် radio အား ၎င်း၏ကိုယ်ပိုင် ဒီဇိုင်းဖြင့် ပြုလုပ်လိုသောအခါ (အရာ ကို CSS တွင် တားမြစ်ထားသော်လည်း လှည့်ကွက်များဖြင့် ဖြစ်နိုင်သည်) လိုအပ်ပါသည်။

အတ်ထရီဗျု့များ

နမူနာ . Checkbox

အမှတ်အသားပြုခလုတ် checkbox နှင့် အတ်ထရီဗျု့ for ကို အသုံးပြု၍ စာညွှန်းတစ်ခုကို ချိတ်ဆက်ကြပါစို့။ စာညွှန်းကို နှိပ်ကြည့်ပါ၊ ထို့နောက် အမှတ်အသားပြုခလုတ်၏ အခြေအနေ ပြောင်းလဲမှုကို အမှတ်အသားပြုထားသည့်အခြေအနေမှ အမှတ်အသားမပြုထားသည့်အခြေအနေသို့ ပြောင်းလဲသည်ကို သင်မြင်ရမည်-

html<input type="checkbox" id="checkbox">
<label for="checkbox">ကျွန်ုပ်သည် id checkbox ရှိသော checkbox နှင့် ချိတ်ဆက်ထားပါသည်။</label>

Результат:

နမူနာ . label အတွင်းတွင်

ယခုတစ်ကြိမ်တွင်မူ စာညွှန်းကို အတ်ထရီဗျု့ for မှတစ်ဆင့် ချိတ်ဆက်ခြင်းမပြုဘဲ အဲလီမင့်များကို တိုက်ရိုက် အင်္ဂါရပ် label အတွင်းသို့ ထည့်သွင်းကြည့်ကြပါစို့၊ ထိုသို့ပြုလုပ်ခြင်းဖြင့် စာသား label ကို နှိပ်လိုက်သောအခါ အဲလီမင့်ကို အသက်ဝင်စေမည်-

html<label><input type="checkbox"> စာညွှန်း</label>

Результат:

နမူနာ . စာသားထည့်သွင်းရန် ကွက်လပ်

အင်္ဂါရပ် input နှင့် အတ်ထရီဗျု့ for ကို အသုံးပြု၍ စာညွှန်းတစ်ခုကို ချိတ်ဆက်ကြပါစို့။ စာညွှန်းကို နှိပ်လိုက်ခြင်းသည် ထည့်သွင်းရန် ကွက်လပ်အား focus ရရှိစေမည်။ ထိုသို့ဖြစ်သောအခါ ကွက်လပ်အတွင်းရှိ စာသား (အတ်ထရီဗျု့ value ဖြင့် ထည့်သွင်းထားသည်) သည် ရွေးချယ်ခံရမည်။ အကယ်၍ ကီးဘုတ်ပေါ်တွင် တစ်စုံတစ်ခုရိုက်ထည့်ပါက ထိုစာသားသည် ပျောက်ကွယ်သွားမည်။ စာသားကို ဖျက်ဆီးခြင်းမပြုဘဲ ရွေးချယ်မှုကို ဖယ်ရှားလိုပါက ထည့်သွင်းရန် ကွက်လပ်ပေါ်သို့ mouse ဖြင့် နှိပ်လိုက်နိုင်သည်- focus သည် ထိုအခါ ပျောက်ကွယ်မသွားဘဲ ရွေးချယ်မှုသာ ပျောက်ကွယ်သွားမည်-

html<input type="text" id="input1" value="အချို့သော စာသား">
<label for="input1">ကျွန်ုပ်သည် id input1 ရှိသော input နှင့် ချိတ်ဆက်ထားပါသည်။</label>

Результат:

ဤသည်ကိုလည်း ကြည့်ပါ