Bootstrap 4 Form ထည့်သွင်းမှုများ
ဖောင်ထိန်းချုပ်မှုများကို ပံ့ပိုးထားသည်။
Bootstrap သည် အောက်ပါပုံစံထိန်းချုပ်မှုများကို ပံ့ပိုးပေးသည်-
- ထည့်သွင်းမှု
- စာသားဧရိယာ
- အမှန်ခြစ်ပေးပါ။
- ရေဒီယို
- ရွေးချယ်ပါ။
Bootstrap ထည့်သွင်းခြင်း။
Bootstrap သည် HTML5 ထည့်သွင်းမှုအမျိုးအစားအားလုံးကို ပံ့ပိုးပေးသည်- စာသား၊ စကားဝှက်၊ ရက်စွဲအချိန်၊ ရက်စွဲအချိန်-စက်တွင်း၊ ရက်စွဲ၊ လ၊ အချိန်၊ ရက်သတ္တပတ်၊ နံပါတ်၊ အီးမေးလ်၊ url၊ ရှာဖွေမှု၊ ဖုန်း၊ နှင့် အရောင်။
မှတ်ချက်- ၎င်းတို့၏ အမျိုးအစားကို မှန်ကန်စွာ မကြေညာပါက ထည့်သွင်းမှုများကို အပြည့်အဝ ပုံစံချမည်မဟုတ်ပါ။
အောက်ပါဥပမာတွင် ထည့်သွင်းသည့်ဒြပ်စင်နှစ်ခုပါရှိသည်။ တစ်ခု type="text"နှင့်တစ်ခု
type="password"။ ဖောင်များအခန်းတွင် ဖော်ပြထားသည့်အတိုင်း၊ .form-controlကျွန်ုပ်တို့သည် အကျယ်အဝန်းနှင့် သင့်လျော်သော padding စသည်တို့ဖြင့် ထည့်သွင်းမှုများကို ပုံစံသတ်မှတ်ရန် အတန်းကို အသုံးပြုပါသည်။
ဥပမာ
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap Textarea
အောက်ပါဥပမာတွင် textarea တစ်ခုပါရှိသည်။
ဥပမာ
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap Checkboxes
အသုံးပြုသူအား ကြိုတင်သတ်မှတ်ရွေးချယ်မှုများစာရင်းမှ ရွေးချယ်စရာအရေအတွက်ကို ရွေးချယ်လိုပါက အမှတ်ခြစ်ကွက်များကို အသုံးပြုပါသည်။
အောက်ပါဥပမာတွင် checkbox သုံးခုပါရှိသည်။ နောက်ဆုံးရွေးချယ်ခွင့်ကို ပိတ်ထားသည်။
ဥပမာ
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
နမူနာရှင်းပြထားပါတယ်။
class="form-check"အညွှန်းများနှင့် အမှန်ခြစ်ပုံးများအတွက် သင့်လျော်သောအနားသတ်မျဉ်းများသေချာစေရန် ထုပ်ပိုးသည့်ဒြပ်စင်ကို အသုံးပြု ပါ။
.form-check-labelအတန်းကို အညွှန်းဒြပ်စင်များသို့ ပေါင်းထည့် ကာ ကွန်တိန်နာ .form-check-inputအတွင်းတွင် အမှန်ခြစ်ပုံးများကို မှန်ကန်စွာ ပုံစံသွင်းရန် ။.form-check
Inline Checkboxes
.form-check-inlineအမှတ်ခြစ်ကွက်များကို တူညီသောမျဉ်းပေါ်တွင် ပေါ်စေလိုပါက အတန်း ကို အသုံးပြု ပါ။
ဥပမာ
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Bootstrap ရေဒီယိုခလုတ်များ
ကြိုတင်သတ်မှတ်ရွေးချယ်မှုများစာရင်းမှ ရွေးချယ်မှုတစ်ခုသာ အသုံးပြုသူကို ကန့်သတ်လိုပါက ရေဒီယိုခလုတ်များကို အသုံးပြုသည်။
အောက်ပါဥပမာတွင် ရေဒီယိုခလုတ်သုံးခုပါရှိသည်။ နောက်ဆုံးရွေးချယ်ခွင့်ကို ပိတ်ထားသည်-
ဥပမာ
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
အမှန်ခြစ်ဘောက်စ်များ .form-check-inlineကဲ့သို့ တူညီသောလိုင်းပေါ်တွင် ရေဒီယိုခလုတ်များကို ပေါ်စေချင်ပါက အတန်းကို အသုံးပြုပါ။
ဥပမာ
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Bootstrap List ကို ရွေးပါ။
အသုံးပြုသူအား ရွေးချယ်စရာများစွာမှ ရွေးချယ်ခွင့်ပြုလိုပါက ရွေးချယ်ရန်စာရင်းများကို အသုံးပြုသည်။
အောက်ပါဥပမာတွင် dropdown list တစ်ခုပါရှိသည် (စာရင်းကိုရွေးချယ်ပါ)။
ဥပမာ
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
ပုံစံထိန်းချုပ်မှုအရွယ်အစား
ဖောင်ထိန်းချုပ်မှု၏ အရွယ်အစားကို .form-control-smသို့မဟုတ် .form-control-lg:
ဥပမာ
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
ရိုးရှင်းသောစာသားဖြင့် ပုံစံထိန်းချုပ်မှု
ထည့်သွင်းအကွက်ကို ရိုးရိုးစာသားအဖြစ် ပုံစံ ဆင် .form-control-plaintextလိုပါက၊
ဥပမာ
<input type="text" class="form-control-plaintext">
ပုံစံထိန်းချုပ်ရေးဖိုင်နှင့် အပိုင်းအခြား
အကွာအဝေး ထိန်းချုပ်မှုပုံစံ သို့မဟုတ် အကျယ်အပြည့်ရှိသော ဖိုင်အကွက်တစ်ခုသို့ သို့မဟုတ် အတန်း .form-control-rangeကို ထည့် ရန်-input type"range".form-control-fileinput type"file"
ဥပမာ
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">