Form hrang hrang

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.

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

<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

<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 enkawl 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 a 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;