Formoli
Eżempji u linji gwida għall-użu għal stili ta 'kontroll tal-formoli, għażliet ta' tqassim, u komponenti tad-dwana għall-ħolqien ta 'varjetà wiesgħa ta' formoli.
Ħarsa ġenerali
Il-kontrolli tal-formoli tal-Bootstrap jespandu fuq l-istili tal-forma Rebooted tagħna bil-klassijiet. Uża dawn il-klassijiet biex tagħżel id-displejs personalizzati tagħhom għal rendering aktar konsistenti fil-browsers u l-apparati.
Kun żgur li tuża type
attribut xieraq fuq l-inputs kollha (eż., email
għall-indirizz tal-email jew number
għal informazzjoni numerika) biex tieħu vantaġġ minn kontrolli tal-input aktar ġodda bħall-verifika tal-email, l-għażla tan-numri, u aktar.
Hawn eżempju ta 'malajr biex turi l-istili tal-forma ta' Bootstrap. Kompli aqra għad-dokumentazzjoni dwar il-klassijiet meħtieġa, it-tqassim tal-formoli, u aktar.
<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>
Test tal-formola
Test tal-formola fil-livell ta' blokk jew fil-livell inline jista' jinħoloq bl -użu ta' .form-text
.
Assoċja test tal-formola mal-kontrolli tal-formola
It-test tal-formola għandu jkun assoċjat b'mod espliċitu mal-kontroll tal-formola li jirrelata miegħu bl-użu tal- aria-describedby
attribut. Dan se jiżgura li t-teknoloġiji ta' assistenza—bħal screen readers—se jħabbru dan it-test tal-formola meta l-utent jiffoka jew jidħol fil-kontroll.
It-test tal-formola taħt l-inputs jista' jiġi stilat bi .form-text
. Jekk se jintuża element ta' livell ta' blokk, jiżdied marġni ta' fuq għal spazjar faċli mill-inputs ta' hawn fuq.
<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>
It-test inline jista' juża kwalunkwe element HTML inline tipiku (kemm jekk ikun <span>
, <small>
, jew xi ħaġa oħra) b'xejn aktar mill- .form-text
klassi.
<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>
Formoli b'diżabilità
Żid l- disabled
attribut boolean fuq input biex tevita l-interazzjonijiet tal-utent u tagħmilha tidher eħfef.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Żid l- disabled
attribut ma 'a <fieldset>
biex tiddiżattiva l-kontrolli kollha ġewwa. Il-browsers jittrattaw il-kontrolli tal-forma nattiva kollha ( <input>
, <select>
, u l- <button>
elementi) ġewwa <fieldset disabled>
bħala diżattivati, u jipprevjenu kemm it-tastiera kif ukoll l-interazzjonijiet tal-maws fuqhom.
However, if your form also includes custom button-like elements such as <a class="btn btn-*">...</a>
, these will only be given a style of pointer-events: none
, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding tabindex="-1"
to prevent them from receiving focus and aria-disabled="disabled"
to signal their state to assistive technologies.
<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>
Accessibility
Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a <label>
element, or—in the case of buttons—to include sufficiently descriptive text as part of the <button>...</button>
content.
For situations where it’s not possible to include a visible <label>
or appropriate text content, there are alternative ways of still providing an accessible name, such as:
<label>
elements hidden using the.visually-hidden
class- Pointing to an existing element that can act as a label using
aria-labelledby
- Providing a
title
attribute - Explicitly setting the accessible name on an element using
aria-label
If none of these are present, assistive technologies may resort to using the placeholder
attribute as a fallback for the accessible name on <input>
and <textarea>
elements. The examples in this section provide a few suggested, case-specific approaches.
While using visually hidden content (.visually-hidden
, aria-label
, and even placeholder
content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
Sass
Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $btn-input-*
and $input-*
variables.
Variables
$btn-input-*
variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.
$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;