Form hrang hrang

Form control style hrang hrang, layout option hrang hrang, leh form chi hrang hrang siamna atana custom component hrang hrangte entirnan leh hman dan tur kaihhruaina.

He page ah hian

Form control a ni State tam tak support turin textual input leh textarea te chu style rawh.

Thlang Browser default select elements te chu custom initial appearance hmangin siam tha rawh.

Check & radio te pawh a awm bawk Input option thlan nan form-a kan custom radio button leh checkbox te hmang rawh.

Zau zawng Browser default range inputs te chu kan custom version hmangin thlak leh rawh.

Input group a ni Semantic value tihpun nan i input-ah label leh button te dah la.

Floating label te pawh a awm I input field-a float thei tur form label awlsam tak tak siam rawh.

Ruangam I form te nen inline, horizontal, emaw grid-based layout complex tak tak siam rawh.

Validation tih a ni I form te chu custom emaw native emaw validation behavior leh style hmangin validate rawh.

A tlangpuiin

Bootstrap-a form controls hian kan Rebooted form styles te chu class hrang hrang nen a tizau a. Heng class te hi hmang la, browser leh device hrang hranga rendering mumal zawk neih theih nan an customized display-ah opt rawh.

Input control thar zawk email verification, number thlan leh a dangte hmang tangkai turin typeinput zawng zawngah (eg, emailemail address atan emaw , numerical information atan emaw) attribute dik tak hmang ngei ang che .number

Bootstrap form styles te entir nan entirnan awlsam tak kan rawn tarlang e. Class mamawh documentation, form layout leh thil dang tam tak hriat duh chuan chhiar chhunzawm zel ang che.

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

Form text a ni

Block-level emaw inline-level form text emaw hmangin siam theih a ni .form-text.

Form text chu form controls nena inzawm tir

aria-describedbyForm text chu attribute hmanna nena inzawm form control nen chiang taka inzawm tur a ni. Hei hian assistive technology—screen reader ang chi—chuan he form text hi user-in control-a a focus emaw, a luh emaw hunah an puang chhuak ang.

Inputs hnuaia form text chu .form-text. Block-level element hman a nih chuan a chunga inputs atanga inhlat awlsam zawk nan top margin dah belh a ni.

Tawngkam ruk

I password chu character 8-20 vel a sei tur a ni a, letter leh number a awm tur a ni a, space, special character, emoji a awm tur a ni lo.

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

Inline text hian inline HTML element pangngai (a <span>, , emaw thil dang emaw pawh nise) chu class <small>aia tam lovin a hmang thei a ni..form-text

Tawngkam ruk

Character 8-20 vel a sei tur a ni.

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

Rualbanlo form te

disabledInput pakhatah boolean attribute dah la, user interaction awm lo tur leh lighter zawka lang turin.

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

A chhunga control zawng zawng disable disabledturin attribute chu a ah dah rawh. <fieldset>Browser te chuan a chhunga native form control ( <input>, <select>, leh <button>elements) zawng zawng <fieldset disabled>chu disabled angin an en a, an chungah keyboard leh mouse inzawmna pahnih a veng thei a ni.

Mahse, i form-ah hian custom button ang chi elements , ang chi te pawh a tel a nih <a class="btn btn-*">...</a>chuan hengte hi style of , chauh pek a ni ang a pointer-events: none, chu chu keyboard hmanga focus theih leh hman theih an la ni tihna a ni. Chutiang a nih chuan, heng control te hi tabindex="-1"focus an dawn loh nan leh aria-disabled="disabled"an state chu assistive technology te hnena signal turin add hmangin manual-in i siam danglam tur a ni.

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

A thlen theihna tur

Form control zawng zawngte hian an thil tum chu assistive technology hmangtute hnena an thlen theih nan hming hman theih tur dik tak an neih theih nan hma la rawh. Chutianga tih theihna kawng awlsam ber chu <label>element hman a ni a, a nih loh leh—button-ah chuan—a thupuiah hian sawifiahna tling tak thuziak dah tel hi a <button>...</button>ni.

Thuziak hmuh theih emaw, hman tlâk emaw dah tel theih lohna dinhmunte atân chuan <label>, hming hmuh theih la pêk theih dân kawng dang a awm a, chu chu:

<label>.visually-hiddenclass hmanga element thup te
Label anga thawk thei element awmsa hmanga entiraria-labelledby
titleAttribute pakhat pek chhuah
Element pakhata accessible hming chiang taka set hmanginaria-label

Heng zinga pakhat mah a awm loh chuan assistive technology te chuan attribute chu accessible name on leh elements te placeholderfallback atan an hmang thei a ni. Hemi \hen-a entîrnate hian rawtna, case-specific approach tlemte a pe a ni.<input><textarea>

Visually hidden content ( .visually-hidden, aria-label, leh placeholdercontent pawh, form field-a content neih veleh bo thin) hman hian assistive technology hmangtute tan hlawkna a thlen dawn laiin, label text hmuh theih loh chuan hmangtu thenkhat tan chuan harsatna a la ni thei tho. Visible label chi khat chu a tlangpuiin a tha ber a, accessibility leh usability atan pawh a tha ber.

Sass a ni

Form variable tam tak chu form component hrang hrangin an hman nawn leh tur leh an tihzauh theih nan general level-ah an dah a. Hengte hi i hmu tam ber ang as $btn-input-*and $input-*variables.

Variables te pawh a awm

$btn-input-*variables te hi kan button leh kan form component te inkara global variable insem te an ni. Hengte hi component-specific variable dangte value atan reassign fo thin i hmu ang.

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