Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
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., ~).

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>

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

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>

Formaj validigaj stiloj ankaŭ funkcias kiel atendite.

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>

Tekstaj areoj

Defaŭlte, <textarea>s kun .form-controlestos la sama alteco kiel <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>

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

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.

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>

Nur legebla klarteksto

Ŝvebaj etikedoj ankaŭ subtenas .form-control-plaintext, kiu povas esti helpema por ŝanĝi de redaktebla <input>al klarteksta valoro sen tuŝi la paĝan aranĝon.

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>

Eniggrupoj

Ŝvebaj etikedoj ankaŭ subtenas .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>

Kiam oni uzas .input-groupkaj .form-floatingkune kun formularvalidigo, la -feedbackdevus esti metita ekster la .form-floating, sed interne de la .input-group. Ĉi tio signifas, ke la sugestoj devos esti montritaj per javaskripto.

@
Bonvolu elekti uzantnomon.
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>

Aranĝo

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

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>

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;