Forms

Têgihiştinî

Kontrolên forma Bootstrap li ser şêwazên forma me yên Rebooted bi dersan berfireh dibin. Van dersan bikar bînin da ku hûn dîmenên xweyên xwerû hilbijêrin da ku li seranserê gerok û cîhazan danûstendinek domdartir bikin.

Bawer bikin ku hûn li ser hemî têketinan taybetmendiyek guncan bikar bînin type(mînak, emailji bo navnîşana e-nameyê an numberji bo agahdariya jimareyî) da ku ji kontrolên têketina nûtir ên mîna verastkirina e-nameyê, bijartina hejmarê, û hêj bêtir sûd werbigirin.

Li vir mînakek bilez heye ku şêwazên forma Bootstrap nîşan bide. Ji bo belgeyên li ser dersên pêwîst, sêwirana formê, û hêj bêtir bixwînin.

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

Nivîsarek çêbikin

Metna formê ya asta blokê an jî di asta hundurîn de dikare bi karanîna .form-text.

Metna formê ya li jêr têketinan dikare bi şêwazê were çêkirin .form-text. Ger hêmanek di asta blokê de were bikar anîn, ji bo veqetandina hêsan a ji têketinên jorîn marjîneyek jorîn tê zêdekirin.

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

Nivîsa xêzkirî dikare her hêmanek HTML-ê ya xêzkirî ya tîpîk bikar bîne (çi be <span>, <small>, an tiştek din be) ji .form-textçîna wêdetir tiştek tune.

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

Formên astengdar

disabledTaybetmendiya boolean li ser têketinê zêde bikin da ku pêşî li danûstendinên bikarhêner bigire û wê siviktir xuya bike .

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

disabledTaybetmendiyê li a zêde bikin <fieldset>da ku hemî kontrolên di hundurê de neçalak bikin. Gerok hemî kontrolên forma xwemalî ( <input>, <select>, û <button>hêmanên) di hundurê de <fieldset disabled>wekî neçalak dihesibîne, hem li ser wan danûstendinên klavyeyê û hem jî mişkî asteng dike.

Lêbelê, heke di forma we de hêmanên bişkojka xwerû yên wekî <a class="btn btn-*">...</a>, ji van re tenê şêwazek were dayîn pointer-events: none, tê vê wateyê ku ew hîn jî bi karanîna klavyeyê ve baldar in û kar dikin. Di vê rewşê de, divê hûn bi destan van kontrolan biguhezînin û lê zêde tabindex="-1"bikin da ku pêşî li wergirtina balê bigirin û aria-disabled="disabled"rewşa wan ji teknolojiyên arîkar re nîşan bidin.

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

Gihîştina

Piştrast bikin ku hemî kontrolên formê navek gihîştî ya guncan heye da ku armanca wan ji bikarhênerên teknolojiyên arîkar re were ragihandin. Awayê herî hêsan ku meriv bigihîje vê ev e ku meriv <label>hêmanek bikar bîne, an jî -di doza bişkokan de - wekî beşek <button>...</button>naverokê nivîsek têra xwe raveker bi nav bike.

Ji bo rewşên ku ne mimkun e ku <label>naverokek nivîsê ya xuya an guncav tê de hebe, awayên alternatîf hene ku hîn jî navek gihîştî peyda bikin, wek:

• <label>hêmanên veşartî bikaranîna .visually-hiddenclass
• Nîşana hêmanek heyî ya ku dikare wekî etîketek bikar bîne destnîşan dikearia-labelledby
• Pêşkêşkirina titletaybetmendiyek
• Bi eşkere li ser hêmanek bi karanîna navê gihîştî danînaria-label

Ger yek ji van tune be, dibe ku teknolojiyên arîkar bikar bînin ku placeholdertaybetmendiyê wekî paşvekêşana navên gihîştî <input>û <textarea>hêmanan bikar bînin. Nimûneyên di vê beşê de çend nêzîkatiyên pêşniyarkirî, yên taybetmendiyê pêşkêş dikin.

Dema ku karanîna naveroka veşartî ya dîtbarî ( .visually-hidden, aria-label, û hetta placeholdernaverok, ku gava ku naverokek qadek formê hebe winda dibe) dê ji bikarhênerên teknolojiya arîkar sûd werbigire, nebûna nivîsa nîşana xuya dibe ku ji bo hin bikarhêneran hîn jî pirsgirêk be. Hin celeb nîşana xuyangê bi gelemperî nêzîkatiya çêtirîn e, hem ji bo gihîştinê û hem jî ji bo karanîna.

Sass

Gelek guhêrbarên formê di astek gelemperî de têne danîn ku ji hêla pêkhateyên forma kesane ve ji nû ve werin bikar anîn û dirêj kirin. Hûn ê van pir caran wekî $btn-input-*û $input-*guherbaran bibînin.

Variables

$btn-input-*guhêrbar guhêrbarên gerdûnî yên di navbera bişkokên me û pêkhateyên forma me de têne parve kirin . Hûn ê van bi gelemperî wekî nirx ji bo guhêrbarên pêkhateyên taybetî yên din ji nû ve têne veqetandin bibînin.

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