Fomu

Vaaiga lautele

E fa'alautele le fa'atonutonuina o fomu a Bootstrap i la matou Sitaili fomu Toe fa'afouina ma vasega. Fa'aoga nei vasega e filifili ai i a latou fa'aaliga fa'apitoa mo se fa'aliliuga faifai pea i su'esu'ega ma masini.

Ia mautinoa e fa'aoga se typeuiga talafeagai i mea uma e fai (fa'ata'ita'iga, emailmo tuatusi imeli po'o numberfa'amatalaga numera) e fa'aoga lelei ai fa'atonuga fou e pei o fa'amaonia imeli, filifiliga numera, ma isi mea.

Ole fa'ata'ita'iga vave lea e fa'aalia ai sitaili fomu a Bootstrap. Fa'aauau le faitau mo fa'amaumauga i vasega mana'omia, fa'atulagaina o fomu, ma isi mea.

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

Fa'atumu tusitusiga

E mafai ona faia ni tusitusiga fa'apoloka-tulaga po'o totonu-laina i le fa'aogaina o le .form-text.

Fa'atumu tusitusiga i lalo o mea e fa'aoga e mafai ona fa'avasega i le .form-text. Afai o le a faʻaaogaina se elemene poloka, e faʻaopoopoina le pito i luga mo le faigofie o le avanoa mai mea faʻaoga i luga.

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

E mafai ona fa'aogaina e tusitusiga i totonu so'o se elemene HTML masani (pe o se <span>, <small>, po'o se isi mea) e leai se mea e sili atu nai lo le .form-textvasega.

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

Fomu fa'aletonu

Fa'aopoopo le disableduiga o le boolean i luga o se fa'aoga e taofia ai le fegalegaleai a tagata fa'aoga ma fa'aali mama.

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

Fa'aopoopo le disableduiga ile a <fieldset>e tape uma ai fa'atonuga i totonu. E fa'aogaina e tagata su'esu'e ia fa'atonuga uma ( <input>, <select>, ma <button>elemene) i totonu o se <fieldset disabled>fa'aletonu, e taofia ai feso'ota'iga keyboard ma isumu i luga.

Ae peita'i, afai o lau fomu o lo'o aofia ai fo'i elemene fa'aaganu'u e pei o le <a class="btn btn-*">...</a>, o le a na'o le sitaili o le pointer-events: none, o lona uiga o lo'o taula'i ma fa'agaoioia i le fa'aogaina o le piano. I lenei tulaga, e tatau ona e suia ma le lima nei faʻatonuga e ala i le faʻaopoopoina tabindex="-1"e taofia ai i latou mai le mauaina o le taulaʻi ma aria-disabled="disabled"faʻailo latou setete i tekinolosi fesoasoani.

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

Avanoa

Ia fa'amautinoa o lo'o i ai i fa'atonuga uma se igoa e mafai ona fa'aogaina ina ia mafai ai ona fa'ao'o atu lo latou fa'amoemoe i tagata fa'aoga tekinolosi fesoasoani. O le auala pito sili ona faigofie e ausia ai lenei mea o le faʻaaogaina lea o se <label>elemene, poʻo-i le tulaga o faʻamau-e aofia ai faʻamatalaga faʻamatalaga e lava o se vaega o le <button>...</button>anotusi.

Mo tulaga e le mafai ona aofia ai se <label>anotusi manino pe talafeagai, o loʻo i ai isi auala e tuʻuina atu ai pea se igoa avanoa, e pei o:

• <label>elemene natia e faaaoga ai le .visually-hiddenvasega
• Fa'asino i se elemene o lo'o i ai e mafai ona avea ma fa'ailoga e fa'aoga aiaria-labelledby
• Tuuina atu o se titleuiga
• Fa'atulaga manino le igoa e mafai ona maua i luga o se elemene fa'aaogaaria-label

Afai e leai se tasi o nei mea, e mafai e tekinolosi fesoasoani ona fa'aogaina le placeholderuiga e fai ma fa'afouga mo le igoa avanoa i luga <input>ma <textarea>elemene. O faʻataʻitaʻiga i lenei vaega o loʻo tuʻuina atu ai ni nai faʻataʻitaʻiga, faʻapitoa faʻapitoa.

A'o fa'aogaina mea e natia va'aia ( .visually-hidden, aria-label, ma e o'o lava placeholderi mea, e mou atu pe a maua e le fomu le anotusi) o le a manuia ai tagata fa'aoga tekonolosi fesoasoani, o le leai o se fa'ailoga va'aia e ono fa'afitauli mo nisi tagata fa'aoga. O nisi ituaiga o igoa vaaia e masani lava o le auala sili lea, e le gata mo le faʻaogaina ma le faʻaaogaina.

Sass

Le tele o fesuiaiga o foliga ua seti i se tulaga lautele e toe faʻaaogaina ma faʻalautele e vaega taʻitasi fomu. E masani ona e va'ai i nei mea e pei o $btn-input-*ma $input-*fesuiaiga.

Fuafuaga

$btn-input-*fesuia'i o fefa'asoaa'i suiga fa'alelalolagi i le va o a tatou fa'amau ma a tatou vaega fomu. E te mauaina nei mea e masani ona toe tofia e fai ma tau i isi vaega-fa'apitoa fesuiaiga.

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