Форми
Примери и упатства за употреба за стилови за контрола на форми, опции за распоред и сопствени компоненти за создавање широк спектар на форми.
Преглед
Контролите на формата на Bootstrap се прошируваат на нашите рестартирани стилови на форми со класи. Користете ги овие класи за да се вклучите во нивните приспособени прикази за поконзистентно прикажување низ прелистувачите и уредите.
Погрижете се да користите соодветен type
атрибут на сите влезови (на пр., email
за адреса на е-пошта или number
за нумерички информации) за да ги искористите предностите од поновите контроли за внесување, како што се проверка на е-пошта, избор на број и друго.
Еве брз пример за демонстрација на стиловите на формите на Bootstrap. Продолжете да читате за документација за потребните часови, распоред на формулари и многу повеќе.
<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>
Формирајте текст
Текстот на формата на ниво на блок или на внатрешно ниво може да се креира со помош на .form-text
.
Поврзување на текстот на формуларот со контролите на формата
Текстот на формуларот треба експлицитно да се поврзе со контролата на формата со која се однесува користејќи го aria-describedby
атрибутот. Ова ќе осигури дека помошните технологии - како што се читачите на екранот - ќе го објават овој текст на формуларот кога корисникот ќе се фокусира или ќе влезе во контролата.
Текстот на формуларот подолу, влезовите може да се стилизираат со .form-text
. Ако се користи елемент на ниво на блок, се додава горната маргина за лесно растојание од влезовите погоре.
<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>
Вградениот текст може да користи кој било типичен внатрешен HTML елемент (било да е <span>
, <small>
, или нешто друго) со ништо повеќе од .form-text
класата.
<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>
Оневозможени форми
Додајте го disabled
атрибутот boolean на влез за да спречите интеракции со корисникот и да изгледате полесни.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Додајте го disabled
атрибутот на a <fieldset>
за да ги оневозможите сите контроли во него. Прелистувачите ги третираат сите контроли на оригинални форми ( <input>
, <select>
, и <button>
елементи) во a <fieldset disabled>
како оневозможени, спречувајќи ги интеракциите на тастатурата и глувчето на нив.
Меѓутоа, ако вашата форма вклучува и прилагодени елементи слични на копчиња, како на пр <a class="btn btn-*">...</a>
., на нив ќе им се даде само стил на pointer-events: none
, што значи дека сè уште може да се фокусираат и да се ракуваат со помош на тастатурата. Во овој случај, мора рачно да ги менувате овие контроли со додавање tabindex="-1"
за да ги спречите да добиваат фокус и aria-disabled="disabled"
да ја сигнализирате нивната состојба на помошните технологии.
<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>
Пристапност
Погрижете се сите контроли на формулари да имаат соодветно достапно име за да може нивната цел да се пренесе на корисниците на помошните технологии. Наједноставниот начин да се постигне ова е да се користи <label>
елемент или - во случај на копчиња - да се вклучи доволно описен текст како дел од <button>...</button>
содржината.
За ситуации каде што не е можно да се вклучи видлива <label>
или соодветна текстуална содржина, постојат алтернативни начини да се обезбеди достапно име, како што се:
<label>
елементи скриени со користење на.visually-hidden
класата- Укажување на постоечки елемент што може да дејствува како ознака користејќи
aria-labelledby
- Обезбедување
title
атрибут - Експлицитно поставување на достапното име на елемент користејќи
aria-label
Ако ниту едно од нив не е присутно, помошните технологии може да прибегнуваат кон користење на placeholder
атрибутот како резервна копија за достапното име <input>
и <textarea>
елементите. Примерите во овој дел даваат неколку предложени пристапи специфични за случајот.
Иако користењето визуелно скриени содржини ( .visually-hidden
, aria-label
, па дури и placeholder
содржина, која исчезнува откако полето за формулар има содржина) ќе биде од корист за корисниците на помошната технологија, недостатокот на видлив текст на етикетата сè уште може да биде проблематичен за одредени корисници. Некоја форма на видлива ознака е генерално најдобриот пристап, и за пристапност и за употребливост.
Сас
Многу променливи на формата се поставени на општо ниво за повторно да се користат и да се прошират од поединечни компоненти на формата. Овие најчесто ќе ги гледате како $btn-input-*
и $input-*
променливи.
Променливи
$btn-input-*
променливите се споделени глобални променливи помеѓу нашите копчиња и нашите компоненти на формата. Ќе ги најдете овие често преназначени како вредности на други променливи специфични за компонентите.
$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;