Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
in English

Flosantaj etikedoj

Kreu bele simplajn formajn etikedojn, kiuj flosas super viaj enigkampoj.

Sur ĉi tiu paĝo

Ekzemplo

Envolvu paron da <input class="form-control">kaj <label>elementoj .form-floatingpor ebligi flosajn etikedojn kun la tekstaj formularaj kampoj de Bootstrap. A placeholderestas postulata sur ĉiu <input>ĉar nia metodo de CSS-nur ŝvebaj etikedoj uzas la :placeholder-shownpseŭdo-elementon. Rimarku ankaŭ, ke la <input>devas veni unue, por ke ni povu uzi gefratan elektilon (ekz., ~).

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

Kiam estas valuejam difinita, <label>s aŭtomate alĝustigos al sia flosita pozicio.

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

Formaj validigaj stiloj ankaŭ funkcias kiel atendite.

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

Tekstaj areoj

Defaŭlte, <textarea>s kun .form-controlestos la sama alteco kiel <input>s.

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

Por agordi propran altecon sur via <textarea>, ne uzu la rowsatributon. Anstataŭe, agordu eksplicitan height(aŭ enlinia aŭ per kutima 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>

Elektas

Krom .form-control, flosantaj etikedoj disponeblas nur sur .form-selects. Ili funkcias en la sama maniero, sed male al <input>s, ili ĉiam montros la <label>en ĝia flosita stato. Elektoj kun sizekaj multiplene estas subtenataj.

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

Aranĝo

Kiam vi laboras kun la kradsistemo Bootstrap, nepre metu formalementojn ene de kolumnaj klasoj.

<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" 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="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

Sass

Variabloj

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