मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
Check
in English

तरंगपी लेबलां

तुमच्या इनपुट क्षेत्रांचेर तरंगपी सोबीत सादीं फॉर्म लेबलां तयार करात.

उदारण

Bootstrap च्या मजकूर फॉर्म क्षेत्रां वांगडा तरंगपी लेबलां सक्षम करपाक <input class="form-control">आनी <label>घटकांची जोडी गुठलावची. आमची फकत CSS-फक्त तरंगपी लेबलांची पद्दत छद्म-घटक वापरता म्हणून दरेकाचेर .form-floatingA जाय. तशेंच लक्षांत दवरात की the must come first म्हणजे आमी भावंड निवडपी वापरूं येता (देखीक, ).placeholder<input>:placeholder-shown<input>~

एचटीएमएल हें नांव
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

जेन्ना valueपयलींच व्याख्या केल्ली आसता, तेन्ना <label>s आपोआप तांच्या तरंगपी स्थितींत समायोजीत जातले.

एचटीएमएल हें नांव
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

फॉर्म प्रमाणीकरण शैलीय अपेक्षे प्रमाणें काम करतात.

एचटीएमएल हें नांव
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

पाठक्षेत्रां

पूर्वनिर्धारीतपणान, <textarea>s with s .form-controlसारकी उंचाय आसतली <input>.

एचटीएमएल हें नांव
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

तुमच्या चेर सानुकूल उंचाय सेट करपाक , गुणधर्म <textarea>वापरूं नाकात . rowsताचे बदला, स्पश्ट सेट करात height(एक तर इनलायन वा सानुकूल CSS वरवीं).

एचटीएमएल हें नांव
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

निवडटा

सोडल्यार .form-control, तरंगपी लेबलां फकत .form-selects चेर उपलब्ध आसात. ते एकेच तरेन काम करतात, पूण <input>s परस वेगळे तरेन, ते सदांच the <label>in its floated state दाखयतले. कडेन निवडटा sizeआनी multipleसमर्थीत ना.

एचटीएमएल हें नांव
<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

फकत वाचपाक सादो मजकूर

तरंगपी लेबलांय समर्थन करतात , जें पान मांडावळीचेर परिणाम करिनासतना .form-control-plaintextसंपादन करपाक येवपी मोला वयल्यान साद्या मजकूर मोला कडेन टॉगल करपाक उपेगी थारूंक शकता .<input>

एचटीएमएल हें नांव
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

इनपुट गट

तरंगपी लेबलांय तेंको दितात .input-group.

@ हांणी केला.
एचटीएमएल हें नांव
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

वापरतना .input-groupआनी .form-floatingफॉर्म प्रमाणीकरणा वांगडा, the -feedbackभायर दवरपाक जाय .form-floating, पूण भितर .input-group. हाचो अर्थ जावास्क्रिप्ट वापरून प्रतिसाद दाखोवचो पडटलो.

@ हांणी केला.
उपकार करून वापरप्याचें नांव निवडात.
एचटीएमएल हें नांव
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

रचणाय

Bootstrap ग्रिड प्रणाली वांगडा काम करतना, स्तंभ वर्गां भितर फॉर्म घटक दवरपाची खात्री करात.

एचटीएमएल हें नांव
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

सास

चड-उणें

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;