Bootstrap 5 फॉर्म
- पिछला पृष्ठ BS5 फ्लेक्स
- अगला पृष्ठ BS5 चयन सूची
स्टेकेड फॉर्म
सभी .form-control वर्ग के <input> और <textarea> एलीमेंटों को सही फॉर्म शैली प्राप्त होती है:
उदाहरण
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">ईमेल：</label>
<input type="email" class="form-control" id="email" placeholder="कृपया ईमेल पता भरें" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">पासवर्ड：</label>
<input type="password" class="form-control" id="pwd" placeholder="कृपया पासवर्ड भरें" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> याद रखें
</label>
</div>
<button type="submit" class="btn btn-primary">सबमिट</button>
</form>
अतिरिक्त, हमने प्रत्येक लेबल एलिमेंट के लिए .form-label क्लास सेट कर दिए गए हैं ताकि सही भराव हो।
चेकबॉक्स विभिन्न टैग से बदला जाता है। वे .form-check की कंटेनर एलिमेंट के आस-पास घेरा जाए। लेबल को .form-check-label क्लास का उपयोग करें, जबकि चेकबॉक्स और रेडियो बटन को .form-check-input।
Textarea
उदाहरण
<label for="comment">कमेंट：</label> <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
फॉर्म रोड / ग्रिड (इनलाइन फॉर्म)
यदि आप फॉर्म एलिमेंट्स को साथ-साथ दिखाना चाहते हैं, तो .row और .col：
उदाहरण
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="कृपया ईमेल एड्रेस भरें" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="कृपया पासवर्ड भरें" name="pswd">
</div>
</div>
</form>
आप इसमें बॉटस्ट्रैप ग्रिड चैप्टर में स्तम्भ और पट्टियों के बारे में अधिक जानकारी मिलेगी。
फॉर्म कंट्रोल आकार
आप इसे उपयोग कर सकते हैं .form-control-lg और .form-control-sm बदलें .form-control इनपुट कंट्रोल का आकार
उदाहरण
<input type="text" class="form-control form-control-lg" placeholder="बड़ा इनपुट कंट्रोल"> <input type="text" class="form-control" placeholder="साधारण इनपुट कंट्रोल"> <input type="text" class="form-control form-control-sm" placeholder="सूक्ष्म इनपुट कंट्रोल">
डिसेबल और साधारण
इनपुट फील्ड को डिसेबल और/या readonly गुणों से अक्षम करने के लिए, इसे उपयोग करें
उदाहरण
<input type="text" class="form-control" placeholder="साधारण इनपुट कंट्रोल"> <input type="text" class="form-control" placeholder="डिसेबल इनपुट कंट्रोल" disabled> <input type="text" class="form-control" placeholder="साधारण रीड़ोल इनपुट कंट्रोल" readonly>
साधारण टेक्स्ट इनपुट
इसे उपयोग करें .form-control-plaintext क्लास का उपयोग करके बिना बॉर्डर के इनपुट फील्ड की शैली को सेट करें, लेकिन उचित बाहरी और अंदरी मार्गदर्शन बनाए रहें
उदाहरण
<input type="text" class="form-control-plaintext" placeholder="साधारण टेक्स्ट इनपुट"> <input type="text" class="form-control" placeholder="साधारण इनपुट कंट्रोल">
छोड़कर चयनक
type="color" के इनपुट शैली को सही तरीके से सेट करने के लिए, इसे उपयोग करें .form-control-color क्लासः
उदाहरण
<input type="color" class="form-control form-control-color" value="#CCCCCC">
- पिछला पृष्ठ BS5 फ्लेक्स
- अगला पृष्ठ BS5 चयन सूची
