Форми
Примери и насоки за използване на стилове за управление на формуляри, опции за оформление и потребителски компоненти за създаване на голямо разнообразие от формуляри.
Преглед
Контролите за формуляри на 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
булевия атрибут към вход, за да предотвратите потребителски взаимодействия и да го направите да изглежда по-лек.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Добавете disabled
атрибута към a, <fieldset>
за да деактивирате всички контроли в него. Браузърите третират всички собствени контроли на формуляри ( <input>
, <select>
и <button>
елементи) вътре <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;