बूस्ट्रैप 5 फॉर्म फ्लॉट लेबल

फ्लोटिंग लेबल/एनीमेशन लेबल

डिफ़ॉल्ट में, लेबल (label) का उपयोग करते समय, वे आमतौर पर इनपुट फील्ड के ऊपर दिखाई देते हैं:

फ्लोटिंग लेबल का उपयोग करके, आप इनपुट फील्ड में लेबल घुसा सकते हैं और इनपुट फील्ड पर क्लिक करने पर उन्हें फ्लोटिंग/एनीमेशन कर सकते हैं:

उदाहरण

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="कृपया इलेक्ट्रॉनिक ईमेल पता भरें" name="email">
  <label for="email">इमेल</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="कृपया पासवर्ड भरें" name="pswd">
  <label for="pwd">पासवर्ड</label>
</div>

अपने आप प्रयास करें

फ्लॉटिंग टैग के बारे में ध्यान दें:

<label> एलीमेंट को <input> एलीमेंट के बाद होना चाहिए और हर <input> एलीमेंट को placeholder गुण (भले ही दिखाई न दें)।

Textarea

इसके अलावा टैक्सट फील्ड के लिए भी लागू होता है:

उदाहरण

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">टिप्पणी</label>
</div>

अपने आप प्रयास करें

चयन सूची

आप चयन सूची में 'फ्लॉटिंग टैग' का उपयोग भी कर सकते हैं। लेकिन, वे फ्लॉटिंग/एनिमेशन नहीं होते हैं। टैग हमेशा चयन सूची के उच्च-बाएं कोण में दिखाई देता है:

उदाहरण

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">चयन सूची (एक चयन करें)：</label>
</div>

अपने आप प्रयास करें