Bootstrap 4 Forms
Bootstrap 4 ၏ မူရင်းဆက်တင်များ
ဖောင်ထိန်းချုပ်မှုများသည် Bootstrap ဖြင့် ကမ္ဘာလုံးဆိုင်ရာ ပုံစံအချို့ကို အလိုအလျောက် ရရှိသည်-
အတန်းရှိ စာသား <input>၊ <textarea>နှင့်
<select>ဒြပ်စင်များ အားလုံးသည် .form-controlအကျယ် 100% ရှိသည်။
Bootstrap 4 Form Layouts
Bootstrap သည် form layout အမျိုးအစားနှစ်မျိုးကို ပေးဆောင်သည်-
- အထပ်လိုက် (အကျယ်-အပြည့်) ပုံစံ
- Inline ပုံစံ
Bootstrap 4 Stacked Form
အောက်ဖော်ပြပါ ဥပမာသည် ထည့်သွင်းမှုအကွက်နှစ်ခု၊ အမှတ်ခြစ်ကွက်တစ်ခုနှင့် တင်သွင်းရန် ခလုတ်တစ်ခုပါရှိသော စတန်းစီပုံစံတစ်ခုကို ဖန်တီးသည်။
.form-groupသင့်လျော်သောအနားသတ်များကိုသေချာစေရန် ၊ ပုံစံတစ်ခုစီ၏ထိန်းချုပ်မှုပတ်လည်တွင် ထုပ်ပိုးထားသောဒြပ်စင်တစ်ခုကိုထည့်ပါ -
ဥပမာ
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap Inline Form
inline ပုံစံဖြင့်၊ ဒြပ်စင်များအားလုံးကို inline နှင့် left-aligned လုပ်ထားသည်။
မှတ်ချက်- ၎င်းသည် အနည်းဆုံး 576px ကျယ်သော viewports အတွင်းရှိ ပုံစံများနှင့်သာ သက်ဆိုင်ပါသည်။ 576px ထက်သေးငယ်သော ဖန်သားပြင်များတွင်၊ ၎င်းသည် အလျားလိုက် တွဲနေမည်ဖြစ်သည်။
inline ပုံစံတစ်ခုအတွက် နောက်ထပ်စည်းမျဉ်း
- အတန်း
.form-inlineကို<form>ဒြပ်စင် သို့ထည့်ပါ။
အောက်ပါဥပမာသည် ထည့်သွင်းမှုအကွက်နှစ်ခု၊ အမှတ်ခြစ်ကွက်တစ်ခုနှင့် တင်သွင်းရန်ခလုတ်တစ်ခုပါရှိသော inline ပုံစံကို ဖန်တီးသည်-
ဥပမာ
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Utilities များဖြင့် Inline Form
အထက်ပါ inline form သည် "ဖိသိပ်ထားသည်" ခံစားရပြီး Bootstrap ၏ spacing utilities နှင့် များစွာ ပိုကောင်းလာမည်ဖြစ်သည်။ အောက်ဖော်ပြပါ ဥပမာ .mr-sm-2သည် စက်အားလုံးရှိ ထည့်သွင်းမှုတစ်ခုစီတွင် ညာဘက်အနားသတ် ( ) ကို ပေါင်းထည့်ပါသည်။ .mb-2နေရာလွတ်/အနံမလုံလောက်ခြင်းကြောင့် အလျားလိုက်မှ ဒေါင်လိုက်သို့ ကွဲသွားသည့်အခါ အနားသတ်အတန်းအစား ( ) ကို အသုံးပြုသည်။
ဥပမာ
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
ကျွန်ုပ်တို့၏ Bootstrap 4 Utilities အခန်း တွင် အကွာအဝေးနှင့် အခြား "အကူအညီပေးသူ" အတန်းများအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည် ။
အတန်း/ဇယားပုံစံ
.colspacing utilities များကို အသုံးမပြုဘဲ ဖောင်ထည့်သွင်းမှုများ၏ အကျယ်နှင့် ချိန်ညှိမှုကို ထိန်းချုပ်ရန် ကော်လံများ ( ) ကို သင်အသုံးပြုနိုင်သည် ။ အဲဒါတွေကို ဘူး ထဲမှာ ထည့်ထားဖို့ မမေ့ပါနဲ့ .row။
အောက်ဖော်ပြပါ ဥပမာတွင်၊ ဘေးချင်းယှဉ် ပေါ်လာမည့် ကော်လံနှစ်ခုကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။ Bootstrap Grids အခန်း တွင် ကော်လံများနှင့် အတန်းများအကြောင်း သင်ပိုမိုလေ့လာနိုင်မည်ဖြစ်ပါသည် ။
ဥပမာ
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
ဇယားကွက် အနားသတ်များ နည်းပါးလိုပါက (မူလကော်လံရေမြောင်းများကို အစားထိုးရန်)၊ .form-rowအစား သုံးပါ .row-
ဥပမာ
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
ပုံစံအတည်ပြုခြင်း။
အသုံးပြုသူများအတွက် အဖိုးတန်သော တုံ့ပြန်ချက်ပေးရန်အတွက် မတူညီသော အတည်ပြုခြင်းအတန်းများကို သင်အသုံးပြုနိုင်ပါသည်။ ဖောင်မတင်သွင်းမီ သို့မဟုတ် ပြီးနောက် အတည်ပြုချက်ပေးလိုခြင်းအပေါ် မူတည်၍ သော်လည်းကောင်း .was-validatedသို့မဟုတ် အစိတ်အပိုင်း .needs-validationသို့ ပေါင်းထည့်ပါ ။ <form>ထည့်သွင်းသည့်အကွက်များတွင် ဖောင်တွင် လွဲမှားနေသည့်အရာများကို ညွှန်ပြရန်အတွက် အစိမ်းရောင် (တရားဝင်) သို့မဟုတ် အနီရောင် (မမှန်ကန်သော) ဘောင်တစ်ခု ရှိပါမည်။ လွဲမှားနေသည့်အရာများကို သုံးစွဲသူအား ပြတ်သားစွာပြောပြရန် သို့မဟုတ် ဖောင်မတင်မီ လုပ်ဆောင်ရန် လိုအပ်သည့်စာ .valid-feedbackသို့မဟုတ် မက်ဆေ့ချ် များကိုလည်း သင်ထည့်နိုင်သည်
။.invalid-feedback
ဥပမာ
ဤဥပမာတွင်၊ .was-validatedဖောင်မတင်မီတွင် လွဲမှားနေသည့်အရာများကို ဖော်ပြရန် ကျွန်ုပ်တို့အသုံးပြုသည်-
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
ဥပမာ
ဤဥပမာတွင်၊ .needs-validationဖောင်ကိုတင်ပြပြီးသည်နှင့် (တစ်ခုခုလွဲမှားနေပါက) တရားဝင်အကျိုးသက်ရောက်မှုကို ထည့်သွင်းပေးမည့် ဤဥပမာတွင် ကျွန်ုပ်တို့အသုံးပြုသည်။ ဤနမူနာအတွက် ကောင်းမွန်စွာအလုပ်လုပ်ရန် သင်သည် jQuery ကုဒ်အချို့ကိုလည်း ထည့်သွင်းရမည်ဖြစ်ကြောင်း သတိပြုပါ။
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>