Ձևաթղթեր
Օրինակներ և օգտագործման ուղեցույցներ ձևերի կառավարման ոճերի, դասավորության ընտրանքների և հատուկ բաղադրիչների համար՝ ձևերի լայն տեսականի ստեղծելու համար:
Ընդհանուր ակնարկ
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
հատկանիշը 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;