Űrlapok
Példák és használati útmutatók az űrlapvezérlési stílusokhoz, elrendezési beállításokhoz és egyéni összetevőkhöz az űrlapok széles skálájának létrehozásához.
Áttekintés
A Bootstrap űrlapvezérlői osztályokkal bővítik az Újraindított űrlapstílusainkat . Ezekkel az osztályokkal választhatja ki a testreszabott megjelenítéseiket a konzisztensebb megjelenítés érdekében a böngészőkben és eszközökön.
Ügyeljen arra, hogy type
minden bemeneten megfelelő attribútumot használjon (pl. email
e-mail-cím vagy number
numerikus információ esetén), hogy kihasználhassa az újabb beviteli vezérlők előnyeit, mint például az e-mailek ellenőrzése, a számok kiválasztása és egyebek.
Íme egy gyors példa a Bootstrap űrlapstílusainak bemutatására. Olvassa tovább a szükséges osztályokkal, űrlapelrendezéssel és egyebekkel kapcsolatos dokumentációt.
<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>
Űrlap szövege
Blokkszintű vagy sorközi űrlapszöveg a használatával hozható létre .form-text
.
Űrlapszöveg társítása űrlapvezérlőkkel
Az űrlapszöveget kifejezetten hozzá kell rendelni ahhoz az űrlapvezérlőhöz, amelyhez az aria-describedby
attribútum használatával kapcsolódik. Ez biztosítja, hogy a kisegítő technológiák – például a képernyőolvasók – közöljék ezt az űrlapszöveget, amikor a felhasználó fókuszál, vagy belép a vezérlőelembe.
A bemenetek alatti űrlapszöveg stílusozható a -val .form-text
. Ha blokkszintű elemet használunk, akkor egy felső margót adunk hozzá, hogy a fenti bemenetektől könnyebben elhelyezhető legyen.
<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>
A szövegközi szöveg bármilyen tipikus soron belüli HTML-elemet használhat (legyen az <span>
, <small>
, vagy valami más), az .form-text
osztályon kívül mással.
<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>
Letiltott űrlapok
Adja hozzá a disabled
logikai attribútumot egy bemenethez, hogy megakadályozza a felhasználói interakciókat, és világosabbnak tűnjön.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Adja hozzá az disabled
attribútumot az a <fieldset>
-hoz az összes vezérlő letiltásához. A böngészők az a-n belüli összes natív űrlapvezérlőt ( <input>
, <select>
, és <button>
elemet) <fieldset disabled>
letiltottként kezelik, megakadályozva rajtuk a billentyűzet és az egér interakcióit.
Ha azonban az űrlap egyéni gombszerű elemeket is tartalmaz, mint például a <a class="btn btn-*">...</a>
, ezek csak a stílust kapják pointer-events: none
, ami azt jelenti, hogy továbbra is fókuszálhatók és kezelhetők a billentyűzet segítségével. Ebben az esetben manuálisan kell módosítania ezeket a vezérlőket hozzáadással tabindex="-1"
, hogy megakadályozza, hogy fókuszba kerüljenek, és aria-disabled="disabled"
jelezze állapotukat a kisegítő technológiák felé.
<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>
Megközelíthetőség
Gondoskodjon arról, hogy minden űrlapvezérlőnek megfelelő hozzáférhető neve legyen, hogy céljukat átadhassák a kisegítő technológiák felhasználóinak. Ennek legegyszerűbb módja egy <label>
elem használata, vagy – gombok esetén – kellően leíró szöveg beillesztése a <button>...</button>
tartalomba.
Azokban a helyzetekben, amikor nem lehetséges látható <label>
vagy megfelelő szöveges tartalom szerepeltetése, vannak más módszerek is a hozzáférhető név megadására, például:
<label>
.visually-hidden
az osztály használatával elrejtett elemek- Meglévő elemre mutat, amely címkeként működhet
aria-labelledby
title
Attribútum biztosítása- Egy elem elérhető nevének explicit beállítása a használatával
aria-label
Ha ezek egyike sem található meg, a kisegítő technológiák az attribútum használatához folyamodhatnak placeholder
tartalékként az elérhető névhez <input>
és <textarea>
elemekhez. Az ebben a részben található példák néhány javasolt, esetspecifikus megközelítést kínálnak.
Míg a vizuálisan rejtett tartalom ( .visually-hidden
, aria-label
, és még placeholder
olyan tartalom is, amely eltűnik, ha egy űrlapmező rendelkezik tartalommal) a kisegítő technológiai felhasználók számára előnyös, a látható címkeszöveg hiánya bizonyos felhasználók számára továbbra is problémát jelenthet. A látható címke valamilyen formája általában a legjobb megközelítés, mind a hozzáférhetőség, mind a használhatóság szempontjából.
Sass
Sok űrlapváltozó általános szinten van beállítva, hogy újrafelhasználhassa és kibővítse az egyes űrlapkomponensekkel. Ezeket leggyakrabban $btn-input-*
és $input-*
változókként fogja látni.
Változók
$btn-input-*
A változók a gombjaink és az űrlapösszetevőink között megosztott globális változók . Ezeket gyakran más komponens-specifikus változókhoz értékként hozzárendeljük.
$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;