Тамғакоғазҳои шинокунанда

Тамғакоғазҳои зебои содда эҷод кунед, ки дар болои майдонҳои вуруди шумо шино мекунанд.

Дар ин саҳифа

Мисол

Барои фаъол кардани тамғакоғазҳои шинокунанда бо майдонҳои шакли матнии Bootstrap як ҷуфт <input class="form-control">ва <label>унсурҳоро печонед. .form-floatingБарои ҳар кадоми онҳо 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аллакай муайян карда шудааст, <label>s ба таври худкор ба мавқеъи шинокунандаи худ мувофиқат мекунад.

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 бо .form-controlбаландии <input>s хоҳад буд.

Шарҳҳо

html

<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 фармоишӣ).

Шарҳҳо

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-selects дастрасанд. Онҳо ҳамон тавр кор мекунанд, аммо бар хилофи <input>s, онҳо ҳамеша <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>

Сасс

Тағйирёбандаҳо

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