Формалар
Форма белән идарә итү стиле, макет вариантлары, төрле формалар ясау өчен махсус компонентлар өчен үрнәкләр һәм куллану күрсәтмәләре.
Гомуми күзәтү
Bootstrap формасы белән идарә итү класслар белән Rebooted форма стильләрендә киңәя. Браузерлар һәм җайланмалар арасында эзлекле күрсәтү өчен, бу классларны кулланыгыз.
Электрон почта тикшерүе, номер сайлау һ.б. кебек яңа кертү контроллерыннан файдалану өчен 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
атрибутны өстәгез . <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-*
үзгәрүчән итеп күрерсез.
Variзгәрешләр
$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;