बूटस्ट्रैप 4 फॉर्म इनपुट्स
समर्थित प्रपत्र नियंत्रण
बूटस्ट्रैप निम्नलिखित प्रपत्र नियंत्रणों का समर्थन करता है:
- इनपुट
- पाठ क्षेत्र
- चेक बॉक्स
- रेडियो
- चुनते हैं
बूटस्ट्रैप इनपुट
बूटस्ट्रैप सभी HTML5 इनपुट प्रकारों का समर्थन करता है: टेक्स्ट, पासवर्ड, डेटाटाइम, डेटाटाइम-लोकल, दिनांक, माह, समय, सप्ताह, नंबर, ईमेल, यूआरएल, सर्च, टेल, और रंग।
नोट: यदि इनपुट का प्रकार ठीक से घोषित नहीं किया गया है तो इनपुट पूरी तरह से स्टाइल नहीं होंगे!
निम्नलिखित उदाहरण में दो इनपुट तत्व हैं; में से एक type="text"और एक
type="password"। जैसा कि हमने प्रपत्र अध्याय में उल्लेख किया है, हम .form-controlपूर्ण-चौड़ाई और उचित पैडिंग आदि के साथ इनपुट को स्टाइल करने के लिए क्लास का उपयोग करते हैं:
उदाहरण
<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>
बूटस्ट्रैप Textarea
निम्नलिखित उदाहरण में एक टेक्स्टरेरा है:
उदाहरण
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
बूटस्ट्रैप चेकबॉक्स
चेकबॉक्स का उपयोग किया जाता है यदि आप चाहते हैं कि उपयोगकर्ता प्रीसेट विकल्पों की सूची से किसी भी विकल्प का चयन करे।
निम्नलिखित उदाहरण में तीन चेकबॉक्स हैं। अंतिम विकल्प अक्षम है:
उदाहरण
<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
इनलाइन चेकबॉक्स
.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>
बूटस्ट्रैप रेडियो बटन
यदि आप उपयोगकर्ता को प्रीसेट विकल्पों की सूची से केवल एक चयन तक सीमित करना चाहते हैं तो रेडियो बटन का उपयोग किया जाता है।
निम्नलिखित उदाहरण में तीन रेडियो बटन हैं। अंतिम विकल्प अक्षम है:
उदाहरण
<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>
बूटस्ट्रैप चयन सूची
यदि आप उपयोगकर्ता को एकाधिक विकल्पों में से चुनने की अनुमति देना चाहते हैं तो चयन सूचियों का उपयोग किया जाता है।
निम्न उदाहरण में एक ड्रॉपडाउन सूची है (सूची का चयन करें):
उदाहरण
<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">