Lomakkeet

Yleiskatsaus

Bootstrapin lomakeohjaimet laajentavat uudelleenkäynnistettyjen lomakkeiden tyylejä luokilla. Käytä näitä luokkia ottaaksesi käyttöön räätälöidyt näytöt yhdenmukaisemman renderöinnin saamiseksi selaimissa ja laitteissa.

Varmista, että käytät asianmukaista typeattribuuttia kaikissa syötteissä (esim email. sähköpostiosoitteelle tai numbernumeerisille tiedoille), jotta voit hyödyntää uudempia syöttötoimintoja, kuten sähköpostin vahvistusta, numeron valintaa ja paljon muuta.

Tässä on nopea esimerkki Bootstrapin lomaketyyleistä. Jatka lukemista tarvittavien luokkien, lomakkeiden asettelun ja muiden dokumenttien lukemiseksi.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Lomakkeen teksti

Lohkotason tai rivitason lomaketekstiä voidaan luoda käyttämällä .form-text.

Syötteiden alla olevaa lomaketekstiä voidaan muotoilla .form-text. Jos käytetään lohkotason elementtiä, ylämarginaali lisätään helpottamaan etäisyyttä yllä olevista tuloista.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Sisäinen teksti voi käyttää mitä tahansa tyypillistä upotettua HTML-elementtiä (oli se sitten <span>, <small>, tai jotain muuta) ilman muuta kuin .form-textluokkaa.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Vammaiset lomakkeet

Lisää disabledlooginen attribuutti syötteeseen estääksesi käyttäjän vuorovaikutuksen ja tehdäksesi siitä vaaleamman.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Lisää disabledattribuutti kohtaan a <fieldset>poistaaksesi kaikki ohjaimet käytöstä. Selaimet käsittelevät kaikkia alkuperäisiä lomakesäätimiä ( <input>, <select>, ja <button>elementit) a:n sisällä <fieldset disabled>poissa käytöstä, mikä estää sekä näppäimistön että hiiren vuorovaikutuksen niissä.

Jos lomakkeessasi on kuitenkin myös mukautettuja painikemaisia ​​elementtejä, kuten <a class="btn btn-*">...</a>, niille annetaan vain tyyli pointer-events: none, mikä tarkoittaa, että ne ovat edelleen tarkennettavissa ja käytettävissä näppäimistöllä. Tässä tapauksessa sinun on muokattava näitä säätimiä manuaalisesti lisäämällä tabindex="-1"ne estämään niitä saamasta tarkennusta ja aria-disabled="disabled"ilmoittamaan tilastaan ​​aputekniikoille.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Esteettömyys

Varmista, että kaikilla lomakkeen ohjausobjekteilla on sopiva helppokäyttöinen nimi, jotta niiden tarkoitus voidaan välittää aputekniikoiden käyttäjille. Yksinkertaisin tapa saavuttaa tämä on käyttää <label>elementtiä tai – painikkeiden tapauksessa – sisällyttää <button>...</button>sisältöön riittävästi kuvaavaa tekstiä.

Tilanteissa, joissa näkyvää <label>tai asianmukaista tekstisisältöä ei ole mahdollista sisällyttää, on olemassa vaihtoehtoisia tapoja tarjota helppokäyttöinen nimi, kuten:

• <label>.visually-hiddenluokan avulla piilotetut elementit
• Osoittaa olemassa olevaan elementtiin, joka voi toimia tunnisteena käyttämälläaria-labelledby
• titleMääritteen tarjoaminen
• Elementin esteettömän nimen asettaminen eksplisiittisesti käyttämälläaria-label

Jos mitään näistä ei ole, aputekniikat voivat turvautua placeholderattribuutin käyttämiseen esteettömän nimen <input>ja <textarea>elementtien varana. Tämän osan esimerkit tarjoavat muutamia ehdotettuja tapauskohtaisia ​​lähestymistapoja.

Vaikka visuaalisesti piilotetun sisällön ( .visually-hidden, aria-label, ja jopa placeholdersisällön, joka katoaa, kun lomakekentässä on sisältöä) käyttö hyödyttää aputekniikan käyttäjiä, näkyvän tarratekstin puute voi silti olla ongelmallista joillekin käyttäjille. Jonkinlainen näkyvä etiketti on yleensä paras tapa sekä saavutettavuuden että käytettävyyden kannalta.

Sass

Monet lomakemuuttujat on asetettu yleiselle tasolle, jotta niitä voidaan käyttää uudelleen ja laajentaa yksittäisten lomakekomponenttien avulla. Näet nämä useimmiten muuttujina $btn-input-*ja .$input-*

Muuttujat

$btn-input-*muuttujat ovat jaettuja globaaleja muuttujia painikkeiden ja lomakekomponenttien välillä. Löydät nämä usein määritetyiksi arvoiksi muille komponenttikohtaisille muuttujille.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;