in English
ထည့်သွင်းအုပ်စု
စာသားထည့်သွင်းမှုများ၊ စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စိတ်ကြိုက်ဖိုင်ထည့်သွင်းမှုများ၏တစ်ဖက်တစ်ချက်ရှိ စာသား၊ ခလုတ်များ သို့မဟုတ် ခလုတ်အုပ်စုများကို ပေါင်းထည့်ခြင်းဖြင့် ပုံစံထိန်းချုပ်မှုများကို လွယ်ကူစွာ တိုးချဲ့ပါ။
အခြေခံဥပမာ
ထည့်သွင်းမှု၏တစ်ဖက်တစ်ချက်တွင် အပိုပရိုဂရမ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခုကို ထားရှိပါ။ ထည့်သွင်းမှုတစ်ခု၏ နှစ်ဖက်စလုံးတွင် တစ်ခုကိုလည်း သင်ထားနိုင်သည်။ <label>
input group အပြင်ဘက်တွင် s ကို ထားရန် မမေ့ပါနှင့် ။
ထုပ်ပိုးခြင်း။
flex-wrap: wrap
ထည့်သွင်း မှုအုပ်စုအတွင်း စိတ်ကြိုက်ပုံစံအကွက်အတည်ပြုချက်ကို လိုက်လျောညီထွေဖြစ်စေရန်အတွက် ထည့်သွင်းသည့်အဖွဲ့များ ကို ပုံသေအားဖြင့် ခြုံထားသည် ။ ၎င်းကိုသင်ပိတ်ထားနိုင်သည် .flex-nowrap
။
အရွယ်အစား
ဆက်စပ်ပုံစံ အရွယ်အစားအတန်းအစား အတန်းများကို သူ့ဘာသာသူ ပေါင်းထည့်လိုက်ပြီး .input-group
အတွင်းမှ အကြောင်းအရာများကို အလိုအလျောက် အရွယ်အစား ပြောင်းလဲမည်—ဒြပ်စင်တစ်ခုစီရှိ ဖောင်ထိန်းချုပ်မှုအရွယ်အစား အတန်းများကို ထပ်တလဲလဲ ပြုလုပ်ရန် မလိုအပ်ပါ။
တစ်ဦးချင်းစီထည့်သွင်းမှုအုပ်စုဒြပ်စင်များပေါ်တွင်အရွယ်အစားအရွယ်အစားကိုပံ့ပိုးမပေးပါ။
အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများ
စာသားအစား ထည့်သွင်းသည့်အဖွဲ့၏ addon အတွင်း မည်သည့် checkbox သို့မဟုတ် ရေဒီယိုရွေးချယ်ခွင့်ကိုမဆို ထည့်ပါ။
များစွာသော <input>
s ကို အမြင်အာရုံဖြင့် ပံ့ပိုးထားသော်လည်း၊ အတည်ပြုခြင်းပုံစံများကို တစ်ခုတည်းဖြင့် ထည့်သွင်းအုပ်စုများအတွက်သာ ရနိုင်ပါသည် <input>
။
addons အများအပြား
အပိုပရိုဂရမ်များစွာကို ပံ့ပိုးထားပြီး အမှန်ခြစ်ဘောက်စ်နှင့် ရေဒီယိုထည့်သွင်းမှုဗားရှင်းများဖြင့် ရောနှောနိုင်သည်။
ထည့်သွင်းသည့်အဖွဲ့များတွင် စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စိတ်ကြိုက်ဖိုင်ထည့်သွင်းမှုများအတွက် ပံ့ပိုးမှုပါဝင်သည်။ ဘရောက်ဆာ၏ မူရင်းဗားရှင်းများကို ပံ့ပိုးမထားပါ။
စိတ်ကြိုက်ရွေးချယ်ပါ။
သုံးစွဲနိုင်မှု
ဖောင်ထိန်းချုပ်မှုအားလုံးတွင် ၎င်းတို့၏ရည်ရွယ်ချက်ကို အထောက်အကူပြုနည်းပညာအသုံးပြုသူများထံ ပေးပို့နိုင်စေရန် သင့်လျော်သောဝင်ရောက်နိုင်သောအမည်တစ်ခုရှိကြောင်း သေချာပါစေ။ ၎င်းကိုရရှိရန် အရိုးရှင်းဆုံးနည်းလမ်းမှာ အကြောင်းအရာ <label>
၏တစ်စိတ်တစ်ပိုင်းအဖြစ် လုံလောက်သောဖော်ပြချက်စာသားကို ထည့်သွင်းရန်အတွက် ဒြပ်စင်တစ်ခု သို့မဟုတ်—ခလုတ်များကိစ္စတွင်— အသုံးပြုရန် <button>...</button>
ဖြစ်သည်။
မြင်နိုင်သော သို့မဟုတ် သင့်လျော်သော စာသားအကြောင်းအရာကို ထည့်သွင်းရန် မဖြစ်နိုင်သည့် အခြေအနေများအတွက် <label>
၊ အသုံးပြုနိုင်သော အမည်ကို ပေးဆောင်ရန် အခြားနည်းလမ်းများ ရှိပါသေးသည်။
<label>
.visually-hidden
အတန်း ကို အသုံးပြု၍ ဝှက်ထားသော အစိတ်အပိုင်းများ
- အညွှန်းကို အသုံးပြု၍ အညွှန်းအဖြစ် လုပ်ဆောင်နိုင်သော ရှိပြီးသားအရာတစ်ခုကို ညွှန်ပြပါ။
aria-labelledby
title
ရည်ညွှန်း ချက်ကို ပေးဆောင်ခြင်း။
- အသုံးပြု၍ရနိုင်သော အမည်ကို ဒြပ်စင်တစ်ခုပေါ်တွင် အတိအလင်း သတ်မှတ်ခြင်း။
aria-label
ယင်းတို့အနက်မှ တစ်ခုမျှမရှိပါက၊ အထောက်အကူပြုနည်းပညာများသည် အသုံးပြုနိုင်သော အမည် နှင့် ဒြပ်စင် placeholder
များအတွက် ရည်ညွှန်းချက်ကို အားကိုးရာအဖြစ် အသုံးပြုနိုင်သည်။ ဤအပိုင်းရှိ ဥပမာများသည် အကြံပြုထားသော ကိစ္စရပ်အလိုက် ချဉ်းကပ်နည်းအချို့ကို ပေးပါသည်။<input>
<textarea>
အမြင်အာရုံဖြင့် ဝှက်ထားသော အကြောင်းအရာများ (ပုံစံအကွက်တစ်ခုတွင် အကြောင်းအရာတစ်ခုပါ၀င်သည်နှင့် ပျောက်ကွယ်သွားသည့် အကြောင်းအရာကိုပင်) အသုံးပြုနေစဉ်တွင် .sr-only
အထောက်အကူ aria-label
နည်းပညာ placeholder
အသုံးပြုသူများကို အကျိုးပြုမည်ဖြစ်ပြီး၊ မြင်နိုင်သော အညွှန်းစာသားမရှိခြင်းသည် အချို့သောအသုံးပြုသူများအတွက် ပြဿနာရှိနေဆဲဖြစ်သည်။ မြင်နိုင်သော အညွှန်းပုံစံအချို့သည် အများအားဖြင့် အသုံးပြုရနိုင်မှုနှင့် အသုံးပြုနိုင်မှုတို့အတွက် အကောင်းဆုံးချဉ်းကပ်မှုဖြစ်သည်။