బూస్ట్రాప్ 5 ఫార్మ్ ఫ్లోటింగ్ లేబుల్

ఫ్లోటింగ్ లేబుల్/అనిమేషన్ లేబుల్

అప్రమేయంగా, లేబుల్‌ను ఉపయోగించడం వల్ల, వాటిని ఇన్‌పుట్ ఫీల్డ్‌పైన సాధారణంగా కనిపిస్తాయి:

ఫ్లోటింగ్ లేబుల్ ఉపయోగించడం ద్వారా, మీరు ఇన్‌పుట్ ఫీల్డ్‌నందున లేబుల్‌ను ప్రవేశపెట్టవచ్చు మరియు ఇన్‌పుట్ ఫీల్డ్‌పై క్లిక్ చేసినప్పుడు వాటిని ఫ్లోటింగ్/అనిమేషన్ చేయవచ్చు:

ఉదాహరణ

<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> ఎలిమెంట్స్ కూడా మరియు ప్రతి ముక్తిలో ఉండాలి ఎల్లా <label> ఎలిమెంట్స్ కూడా ఉండాలి. placeholder అటువంటి లక్షణాలు (ప్రకటించబడలేదు కూడా).

టెక్స్ట్ ఏరియా

టెక్స్ట్ ఫీల్డ్స్ కూడా అనువర్తిస్తాయి:

ఉదాహరణ

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="విమర్శలు ఇక్కడ వెళ్ళిపోతాయి"></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>

స్వయంగా ప్రయత్నించండి