Lomakkeet
Esimerkkejä ja käyttöohjeita lomakkeiden ohjaustyyleistä, asetteluvaihtoehdoista ja mukautetuista komponenteista monenlaisten lomakkeiden luomiseen.
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 type
attribuuttia kaikissa syötteissä (esim email
. sähköpostiosoitteelle tai number
numeerisille 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
.
Lomaketekstin liittäminen lomakkeen ohjaimiin
Lomakkeen tekstin tulee olla nimenomaisesti liitetty lomakkeen ohjausobjektiin, johon se liittyy aria-describedby
määritteen käyttämiseen. Tämä varmistaa, että aputekniikat, kuten näytönlukijat, ilmoittavat tämän lomakkeen tekstin, kun käyttäjä keskittyy tai siirtyy ohjausobjektiin.
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-text
luokkaa.
<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ää disabled
looginen 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ää disabled
attribuutti 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-hidden
luokan avulla piilotetut elementit- Osoittaa olemassa olevaan elementtiin, joka voi toimia tunnisteena käyttämällä
aria-labelledby
title
Mää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 placeholder
attribuutin 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 placeholder
sisä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;