Bootstrap 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>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ