Formoj

Superrigardo

La formularaj kontroloj de Bootstrap plivastiĝas sur niaj Rebootitaj formularstiloj kun klasoj. Uzu ĉi tiujn klasojn por elekti siajn personecigitajn ekranojn por pli konsekvenca bildigo tra retumiloj kaj aparatoj.

Nepre uzu taŭgan typeatributon ĉe ĉiuj enigaĵoj (ekz. emailpor retpoŝta adreso aŭ numberpor nombraj informoj) por utiligi pli novajn enigajn kontrolojn kiel retpoŝtan konfirmon, nombro-elekton kaj pli.

Jen rapida ekzemplo por montri la formularajn stilojn de Bootstrap. Daŭre legu por dokumentado pri postulataj klasoj, formulararanĝo kaj pli.

<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>

Formu tekston

Bloknivela aŭ enlininivela formo teksto povas esti kreita per .form-text.

Formteksto sub enigaĵoj povas esti stilitaj per .form-text. Se blok-nivela elemento estos uzata, supra marĝeno estas aldonita por facila interspacigo de la enigaĵoj supre.

<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>

Enlinia teksto povas uzi ajnan tipan enlinian HTML-elementon (ĉu ĝi <span>, <small>aŭ io alia) kun nenio pli ol la .form-textklaso.

<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>

Malebligitaj formoj

Aldonu la disabledbulean atributon al enigo por malhelpi uzantinteragojn kaj fari ĝin aspekti pli malpeza.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Aldonu la disabledatributon al a <fieldset>por malŝalti ĉiujn kontrolojn ene. Retumiloj traktas ĉiujn denaskajn formkontrolojn ( <input>, <select>, kaj <button>elementoj) ene de <fieldset disabled>kiel malfunkciigitaj, malhelpante ambaŭ klavarajn kaj musajn interagojn sur ili.

Tamen, se via formularo ankaŭ inkluzivas kutimajn butonsimilajn elementojn kiel ekzemple <a class="btn btn-*">...</a>, ĉi tiuj nur ricevos stilon de pointer-events: none, kio signifas, ke ili ankoraŭ estas fokuseblaj kaj operacieblaj per la klavaro. En ĉi tiu kazo, vi devas mane modifi ĉi tiujn kontrolojn aldonante tabindex="-1"por malhelpi ilin ricevi fokuson kaj aria-disabled="disabled"signali ilian staton al helpaj teknologioj.

<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>

Alirebleco

Certigu, ke ĉiuj formularaj kontroloj havas taŭgan alireblan nomon, por ke ilia celo estu transdonita al uzantoj de helpaj teknologioj. La plej simpla maniero por atingi tion estas uzi <label>elementon, aŭ—kaze de butonoj—enmeti sufiĉe priskriban tekston kiel parton de la <button>...</button>enhavo.

Por situacioj kie ne eblas inkluzivi videblan <label>aŭ taŭgan tekstan enhavon, ekzistas alternativaj manieroj ankoraŭ provizi alireblan nomon, kiel ekzemple:

• <label>elementoj kaŝitaj uzante la .visually-hiddenklason
• Montrante al ekzistanta elemento kiu povas funkcii kiel etikedo uzantearia-labelledby
• Provizante titleatributon
• Eksplicite agordi la alireblan nomon sur elemento uzantearia-label

Se neniu el ĉi tiuj ĉeestas, helpaj teknologioj povas recurri al uzado de la placeholderatributo kiel rezerva por la alirebla nomo sur <input>kaj <textarea>elementoj. La ekzemploj en ĉi tiu sekcio disponigas kelkajn proponitajn, kaz-specifajn alirojn.

Dum uzado de videble kaŝita enhavo ( .visually-hidden, aria-label, kaj eĉ placeholderenhavo, kiu malaperas post kiam formokampo havas enhavon) profitigos helpteknologiajn uzantojn, manko de videbla etikedo teksto ankoraŭ povas esti problema por certaj uzantoj. Ia formo de videbla etikedo estas ĝenerale la plej bona aliro, kaj por alirebleco kaj uzebleco.

Sass

Multaj formvariabloj estas fiksitaj je ĝenerala nivelo por esti reuzitaj kaj etenditaj per individuaj formkomponentoj. Vi vidos ĉi tiujn plej ofte kiel $input-btn-*kaj $input-*variabloj.

Variabloj

$input-btn-*variabloj estas dividitaj tutmondaj variabloj inter niaj butonoj kaj niaj formkomponentoj. Vi trovos ĉi tiujn ofte reasignitajn kiel valorojn al aliaj komponent-specifaj variabloj.

$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;