बूटस्ट्रैप 4 फॉर्म
बूटस्ट्रैप 4 की डिफ़ॉल्ट सेटिंग्स
प्रपत्र नियंत्रण स्वचालित रूप से बूटस्ट्रैप के साथ कुछ वैश्विक स्टाइल प्राप्त करते हैं:
वर्ग वाले सभी पाठ्य <input>, <textarea>, और
<select>तत्वों .form-controlकी चौड़ाई 100% है।
बूटस्ट्रैप 4 फॉर्म लेआउट
बूटस्ट्रैप दो प्रकार के फॉर्म लेआउट प्रदान करता है:
- स्टैक्ड (पूर्ण-चौड़ाई) प्रपत्र
- इनलाइन फॉर्म
बूटस्ट्रैप 4 स्टैक्ड फॉर्म
निम्न उदाहरण दो इनपुट फ़ील्ड, एक चेकबॉक्स और सबमिट बटन के साथ एक स्टैक्ड फॉर्म बनाता है।
.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>
बूटस्ट्रैप इनलाइन फॉर्म
इनलाइन रूप में, सभी तत्व इनलाइन और बाएँ-संरेखित होते हैं।
नोट: यह केवल उन व्यूपोर्ट्स के फ़ॉर्म पर लागू होता है जो कम से कम 576px चौड़े होते हैं। 576px से छोटे स्क्रीन पर, यह क्षैतिज रूप से स्टैक करेगा।
इनलाइन फॉर्म के लिए अतिरिक्त नियम:
- तत्व
.form-inlineमें वर्ग जोड़ें<form>
निम्न उदाहरण दो इनपुट फ़ील्ड, एक चेकबॉक्स और एक सबमिट बटन के साथ एक इनलाइन फॉर्म बनाता है:
उदाहरण
<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>
उपयोगिताओं के साथ इनलाइन फॉर्म
उपरोक्त इनलाइन फॉर्म "संपीड़ित" लगता है, और बूटस्ट्रैप की स्पेसिंग उपयोगिताओं के साथ बहुत बेहतर दिखाई देगा। .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>
आप हमारे बूटस्ट्रैप 4 यूटिलिटीज चैप्टर में स्पेसिंग और अन्य "हेल्पर" क्लासेस के बारे में अधिक जानेंगे ।
प्रपत्र पंक्ति/ग्रिड
.colआप स्पेसिंग यूटिलिटीज का उपयोग किए बिना फॉर्म इनपुट की चौड़ाई और संरेखण को नियंत्रित करने के लिए कॉलम ( ) का भी उपयोग कर सकते हैं । .rowबस उन्हें एक कंटेनर के अंदर रखना याद रखें ।
नीचे दिए गए उदाहरण में, हम दो स्तंभों का उपयोग करते हैं जो साथ-साथ दिखाई देंगे। आप बूटस्ट्रैप ग्रिड्स चैप्टर में कॉलम और रो के बारे में बहुत कुछ जानेंगे ।
उदाहरण
<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>