Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

Йөзүче этикеткалар

Сезнең кертү кырларыгызда йөзә торган гади форма этикеткаларын булдырыгыз.

Бу биттә

Мисал

Bootstrap'ның текст формасы кырлары белән йөзүче этикеткаларны эшләтеп җибәрү өчен пар <input class="form-control">һәм <label>элементларны урыгыз. .form-floatingEachәрберсендә A placeholderталәп ителә, <input>чөнки безнең CSS-ның йөзә торган этикеткалары :placeholder-shownпсевдо-элементны куллана. Шунысын да онытмагыз: <input>без беренче булырга тиеш, шуңа күрә без бертуган селекторны куллана алабыз (мәс ~.).

html 
<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Инде билгеләнгән булганда, s <label>автоматик рәвештә аларның йөзгән позициясенә көйләнәчәк.

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

Форманы тикшерү стиле дә көтелгәнчә эшли.

html 
<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 белән s .form-controlбиеклеге булачак <input>.

html 
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Yourзегезгә махсус биеклек куяр өчен <textarea>, rowsатрибутны кулланмагыз. Киресенчә, ачык итеп куегыз height(яисә CSS аша).

html 
<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-select. Алар бер үк ысул белән эшлиләр, ләкин слардан аермалы буларак <input>, алар һәрвакыт <label>аның йөзгән халәтендә күрсәтәчәкләр. Белән сайлана sizeһәм multipleярдәм итми.

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

html 
<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.

@
html 
<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бергә кулланганда , -feedbackтыштан .form-floating, ләкин эчендә урнаштырылырга тиеш .input-group. Димәк, кире элемтә javascript ярдәмендә күрсәтелергә тиеш.

@
Зинһар, кулланучы исемен сайлагыз.
html 
<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 челтәр системасы белән эшләгәндә, форма элементларын багана классларына урнаштырыгыз.

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

Сасс

Variзгәрешләр

$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;