Formalar
Forma gözegçilik stilleri, düzüliş opsiýalary we dürli görnüşleri döretmek üçin ýörite komponentler üçin mysallar we ulanyş görkezmeleri.
Gysgaça syn
“Bootstrap” -yň forma dolandyryşlary, “ Rebooted” görnüş stillerimizde giňelýär . Brauzerlerde we enjamlarda has yzygiderli görkezmek üçin özleşdirilen displeýleri saýlamak üçin bu synplary ulanyň.
E-poçta barlamak, san saýlamak we ş.m. ýaly täze giriş dolandyryşlaryndan peýdalanmak üçin type
ähli girişlerde (meselem, email
e-poçta salgysy ýa-da san maglumatlary üçin) degişli atributdan peýdalanyň.number
“Bootstrap” -yň görnüşlerini görkezmek üçin çalt mysal. Gerekli sapaklar, forma düzülişi we ş.m. resminamalary okamak üçin dowam ediň.
<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>
Forma teksti
Blok derejeli ýa-da içerki görnüşli tekst teksti ulanyp döredilip bilner .form-text
.
Forma tekstini forma dolandyryşlary bilen baglanyşdyrmak
Forma teksti, atributy ulanmak bilen baglanyşykly forma gözegçiligi bilen aç-açan baglanyşykly bolmaly aria-describedby
. Bu, ulanyjy okyjylara ünsi jemläninde ýa-da girende, ekran okyjylary ýaly kömekçi tehnologiýalaryň bu forma tekstini yglan etmegini üpjün eder.
Girişleriň aşagyndaky forma teksti bilen düzülip bilner .form-text
. Blok derejeli element ulanylsa, ýokardaky girişlerden aňsat aralyk üçin ýokarky margin goşulýar.
<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>
Içerki tekst , sapakdan başga hiç zat bolmadyk adaty HTML elementini (a <span>
, <small>
ýa-da başga bir zat) ulanyp biler..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>
Maýyp görnüşler
disabled
Ulanyjynyň özara täsiriniň öňüni almak we has ýeňil görünmek üçin girişde boolean atributyny goşuň .
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Içindäki ähli dolandyryşlary öçürmek üçin disabled
atribut goşuň . <fieldset>
Brauzerler içindäki ähli ýerli dolandyryş dolandyryşlaryny ( <input>
, <select>
we elementleri) maýyp hasaplaýarlar, klawiaturanyň we syçanjygyň özara täsiriniň öňüni alýarlar.<button>
<fieldset disabled>
Şeýle-de bolsa, formaňyzda düwme ýaly adaty elementler hem bar <a class="btn btn-*">...</a>
bolsa, bulara diňe bir stil berler pointer-events: none
, ýagny klawiatura arkaly henizem ünsi jemläp bolýar. Bu ýagdaýda, tabindex="-1"
ünsi almazlygy we aria-disabled="disabled"
kömekçi tehnologiýalara öz ýagdaýyna signal bermek üçin goşmak bilen bu dolandyryşlary el bilen üýtgetmeli.
<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>
Elýeterlilik
Maksatlarynyň kömekçi tehnologiýalary ulanyjylara ýetirilmegi üçin ähli forma gözegçilikleriniň degişli elýeterli adynyň bardygyna göz ýetiriň. Muňa ýetmegiň iň ýönekeý usuly, bir elementi ulanmak , ýa-da düwmeler bolan ýagdaýynda, mazmunyň <label>
bir bölegi hökmünde ýeterlik derejede düşündirişli teksti goşmakdyr.<button>...</button>
Görünýän ýa-da degişli tekst mazmunyny goşmak mümkin bolmadyk ýagdaýlar <label>
üçin elýeterli ady bermegiň alternatiw usullary bar, meselem:
<label>
.visually-hidden
synpy ulanyp gizlenen elementler- Ulanyş belligi hökmünde hereket edip biljek bar bolan elementi görkezmek
aria-labelledby
title
Aýratynlyk bermek- Ulanylýan elementde elýeterli ady aç-açan düzmek
aria-label
Bularyň hiç biri ýok bolsa, kömekçi tehnologiýalar atlary we elementleri placeholder
elýeterli at üçin yza gaýtmak hökmünde ulanyp bilerler. Bu bölümdäki mysallar teklip edilen, mysal üçin birnäçe çemeleşmäni üpjün edýär.<input>
<textarea>
Görkezilen gizlin mazmuny ( we .visually-hidden
, aria-label
hatda placeholder
bir mazmun bar bolansoň ýitip gidýän mazmun) ulanmak tehnologiýa ulanyjylaryna peýdaly bolar, görünýän bellik tekstiniň ýoklugy käbir ulanyjylar üçin henizem kynçylyk döredip biler. Görünýän etiketkanyň käbir görnüşi, elýeterlilik we peýdalylyk üçin adatça iň oňat çemeleşme.
Sass
Köp forma üýtgeýjileri aýratyn görnüş bölekleri tarapyndan gaýtadan ulanmak we giňeltmek üçin umumy derejede kesgitlenýär. Bulary köplenç üýtgeýänler $btn-input-*
hökmünde görersiňiz.$input-*
Üýtgeýjiler
$btn-input-*
üýtgeýjiler düwmelerimiz bilen forma komponentlerimiziň arasynda global üýtgeýjilerdir . Bulary ýygy-ýygydan beýleki komponentlere mahsus üýtgeýänlere baha hökmünde bellärsiňiz.
$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;