Source

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.

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="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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 control te pawh a awm

Textual form controls— <input>s, <select>s, leh s ang chi—chu class <textarea>nen style a ni. .form-controlA chhungah hian general appearance, focus state, sizing leh a dangte atana style hrang hrang a awm bawk.

Kan custom forms te hi explore ngei ang che to further style <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

File input atan chuan for tih kha swap .form-controlrawh .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Sizing a ni

.form-control-lgClass leh tih ang chi hmangin heights set rawh .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Chhiar tur chauh a ni

Input pakhatah boolean attribute dah la, readonlyinput value tihdanglam loh nan. Read-only inputs te chu a light zawkin a lang (disabled inputs ang bawkin), mahse standard cursor chu vawng reng rawh.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Chhiar tur chauh plain text

<input readonly>I form-a element awmte chu plain text anga style-a siam i duh chuan .form-control-plaintextclass hmangin default form field styling chu paih la, margin leh padding dik tak chu vawng reng rawh.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Range Input te pawh a awm

hmangin horizontal scroll theih range inputs chu set rawh .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Checkbox leh radio te pawh a awm bawk

Default checkbox leh radio te chu , input type pahnih tan class pakhat hmanga siam that a ni a .form-check, chu chuan an HTML element te layout leh behavior a ti tha a ni Checkbox hi list pakhata option pakhat emaw, a aia tam emaw thlan nan a ni a, radio erawh chu tam tak zinga option pakhat thlan nan a ni thung.

Disabled checkbox leh radio te pawh a support bawk. Attribute hian disabledinput dinhmun tarlanna atan color lighter a hmang ang.

Checkbox leh radio button te hian HTML hmanga form validation an support a, label tawi tak tak, awlsam taka hmuh theih te an pe bawk. Chutiang a nih avang chuan kan <input>s leh <label>s te hi sibling element an ni a, an <input>within a <label>. idHei hi a verbose deuh deuh a for, a <input>leh <label>.

Default (stack tawh) a ni.

Default-ah chuan, checkbox leh radio engzat pawh unau inhnaih tak takte chu vertical-in an dah ang a, a remchan dan angin an inthlau ang .form-check.

Default ah chuan checkbox a awm

Disabled tih checkbox a awm

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Radio hmasa ber a ni

Default radio pahnihna a ni

Radio tihtawp a ni

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline a ni

Horizontal row khata checkbox emaw radio emaw chu .form-check-inlinegroup .form-check.

1. a ni

2. 2.

3 (rualbanlo) .

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

1. a ni

2. 2.

3 (rualbanlo) .

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Label awm lovin

Add .position-staticto inputs chhunga .form-checklabel text nei lo. Assistive technology-te tana label chi khat (entir nan, hman aria-label) la pe turin hre reng ang che.

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Ruangam

Bootstrap hi a hman theih avangin display: blockleh width: 100%kan form control zawng zawngah te pawh a hman theih avangin form te chu default in vertical-in a stack ang. He layout hi per-form basis-a tihdanglam nan class dang pawh hman theih a ni.

Group hrang hrang siam rawh

Class hi .form-groupform-a structure engemaw zat dah belh dan awlsam ber a ni. Label, control, optional help text, leh form validation messaging te grouping dik taka dah theihna tur class flexible a pe a ni. By default it only applies , mahse a tul angin margin-bottomstyle dang a pick up thin. s, s, emaw element dang zawng zawng .form-inlinenen hmang rawh .<fieldset><div>

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Form grid a awm

Kan grid class hmangin form complex zawk siam theih a ni. Hengte hi form layout hrang hrang, column tam tak, width hrang hrang, leh alignment option dang mamawhna atan hmang ang che.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Form row a awm

, kan standard grid row a danglamna a ni a, chu chuan default column gutters te chu tighter leh compact layouts atan a override thei .rowbawk ..form-row

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Grid system hmang hian layout complex zawk siam theih a ni bawk.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontal ang maia awm

Grid hmangin horizontal form siam la, .rowclass chu form group-ah dah la, class hmangin .col-*-*i label leh control-te zau zawng tarlang rawh. .col-form-labelI s ah pawh add ve ngei ang che <label>, chutiang chuan an associated form controls te nen vertically centered an nih theih nan.

A châng chuan, chu i mamawh alignment ṭha famkim siam tûr chuan margin emaw padding utilities emaw i hman a ngai mai thei. Entirnan, padding-topkan stacked radio inputs label chu kan paih a, chu chuan text baseline chu a align tha zawk ang.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Horizontal form label siam dan tur

A size dik taka zawm turin or .col-form-label-smto .col-form-label-lgyour <label>s or s hmang ngei ang che .<legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Column lian leh te

Entirna hmasa lama kan hmuh tawh ang khan kan grid system hmang hian .cola .rowemaw .form-row. An inkarah chuan available width chu inang tlangin an then ang. I column-te subset pakhat chu space tam emaw tlem emaw la turin i thlang thei bawk a, a bak .cols chuan a bak zawng chu a inang tlangin a then a, column class bikte ang chi te nen .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing a ni

A hnuaia entirnan hian flexbox utility hmangin a chhunga thu awmte chu vertical-in a center a , i column-te’n a mamawh ang zat chauh hmun an luah theih nan a thlak .cola ni. .col-autoKawng dangin sawi ila, column chu a chhunga thu awm dan azirin a size a insiam a ni.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Chumi hnuah chuan chu chu size-specific column class hmangin vawi khat i remix leh thei ang.

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Tin, a dik e custom form controls pawh a support bawk.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline-a form siam a ni

Class hmang hian .form-inlinelabel hrang hrang, form control leh button hrang hrangte chu horizontal row pakhatah a lang thei ang. Inline form chhunga form control te hi an default state aiin a danglam deuh hlek.

Controls chu display: flex, HTML white space eng pawh collapse a, spacing leh flexbox utilities hmanga alignment control pek theihna a ni.
Control leh input group te width: autochuan Bootstrap default chu override turin an dawng width: 100%thin .
Mobile device-a viewport tawi te account turin controls chu 576px aia tlem lo viewport-ah chauh inline-in a lang thin.

Form control hrang hrangte zau zawng leh alignment chu spacing utilities (a hnuaia tarlan ang hian) nen manual-in i address a ngai mai thei. A tawp berah chuan, form control tin nen a dah tel fo ang <label>che, screenreader ni lo tlawhtute laka thup a ngai a nih pawhin .sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Custom form control leh select te pawh a support bawk.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Label thup ai chuan a danglamna tur

Input tin atan label i dah tel loh chuan screen reader ang chi assistive technology te hian i form-ah harsatna an nei ang. .sr-onlyHeng inline form te tan hian class hmangin label te chu i thup thei ang . Assistive technology-te tana label pek dan dang dang a awm a, chu chu aria-label, aria-labelledbyemaw titleattribute te hi a ni. Chung zinga pakhat mah a awm loh chuan, assistive technology-te chuan placeholderattribute hman an hmang thei a, a awm a nih chuan, mahse placeholderlabeling method dangte aiah hman a tha lo tih hre reng ang che.

Ṭanpuina thuziak

Form-a block-level help text chu hmangin siam theih a ni .form-text( .help-blockhmanlai chuan v3-a tih thin) hmangin siam theih a ni. Inline help text hi inline HTML element eng pawh hmangin flesible takin implement theih a ni a, utility class .text-muted.

Help text chu form controls nena inzawm tir

aria-describedbyHelp 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 help text hi user-in control-a a focus emaw, a luh emaw hunah an puang chhuak ang.

Inputs hnuaia help text hi style theih a ni .form-text. He class hian display: blocka chunga inputs atanga inhlat awlsam zawk nan top margin thenkhat a huam a, a dah belh bawk.

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">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Inline text hian inline HTML element pangngai (a <small>, <span>, emaw thil dang emaw pawh nise) chu utility class tih loh chu engmah dang nei lovin a hmang thei a ni.

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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>

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>

Caveat chu anchor hmangin a awm

Default-ah chuan browser-te chuan a chhunga native form control ( <input>, <select>leh <button>elements) zawng zawng <fieldset disabled>chu disabled angin an en ang a, keyboard leh mouse-a inzawmna pahnih a awm loh nan. Mahse, i form-ah <a ... class="btn btn-*">elements pawh a tel a nih chuan hengte hi style pointer-events: none. Button-te tana disabled state chungchang section-a kan sawi tawh ang khan (leh a bik takin anchor element-te tana sub-section-ah) he CSS property hi standardized a la ni lo va, Internet Explorer 10-ah pawh a support kim lo va, keyboard hmangtute chu an awm theih loh nan a khap dawn lo heng link te hi focus emaw activate emaw thei. Chuvangin him tur chuan custom JavaScript hmangin chutiang link chu disable rawh.

Cross-browser hmanga hman theih a ni

disabledBootstrap hian browser zawng zawngah heng style te hi a hmang vek dawn laiin, Internet Explorer 11 leh a hnuai lam hian attribute hi a support kim lo a <fieldset>ni. Heng browser-a fieldset awmte hi tihtawp nan custom JavaScript hmang ang che.

Validation tih a ni

HTML5 form validation hmangin i hmangtute hnenah feedback hlu tak, actionable tak pe rawh– kan supported browser zawng zawngah hmuh theih a ni . Browser default validation feedback atang hian thlang la, a nih loh leh kan built-in class leh starter JavaScript hmangin custom message te implement rawh.

Tunah hian custom validation style hman kan rawt a, native browser default validation message-te chu browser zawng zawngah (a langsar ber chu desktop leh mobile-a Chrome)-ah assistive technology-ah a inhmang reng lo a ni.

A hnathawh dan

Bootstrap hmanga form validation hnathawh dan chu hetiang hi a ni:

HTML form validation hi CSS-a pseudo-classes pahnih hmangin hman a ni a, :invalidleh :valid. <input>, <select>, leh <textarea>element- ah te a hman theih .
Bootstrap hian :invalidleh :validstyles te chu parent .was-validatedclass ah a scope a, a tlangpuiin <form>. Chutiang a nih loh chuan value nei lo field mamawh apiang chu page load-ah a dik lo angin a lang. Chutiang chuan engtikah nge activate tur tih i thlang thei ang (a tlangpuiin form thehluh tum hnuah).
Form hmel reset tur chuan (entir nan, AJAX hmanga dynamic form submission a nih chuan), submission hnua again .was-validatedatang chuan class chu paih chhuak rawh.<form>
Fallback angin, .is-invalidleh class te chu server side validation.is-valid atan pseudo-classes aiah hman theih a ni . Nu leh pa class an mamawh lo ..was-validated
CSS hnathawh danah harsatna a awm avangin (tunah chuan) <label>DOM-a form control hmaa lo awm a chu custom JavaScript puihna tel lovin style kan hmang thei lo.
Tunlai browser zawng zawng hian constraint validation API , form controls validate nana JavaScript method hrang hrang an support a.
Feedback message-ah hian browser default (browser tin tan a danglam, CSS hmanga style theih loh) emaw, HTML leh CSS dang nena kan custom feedback style emaw a hmang thei bawk.
setCustomValidityJavaScript hmangin custom validity message i pe thei bawk.

Chu chu ngaihtuah chungin, kan custom form validation styles, optional server side classes, leh browser defaults te tana a hnuaia demos te hi ngaihtuah la.

Custom style hrang hrang a awm bawk

Custom Bootstrap form validation message atan chuan novalidateboolean attribute chu i <form>. Hei hian browser default feedback tooltips te chu a titawp a, mahse JavaScript-a form validation API te chu a la lut thei tho. A hnuaia form hi thehluh tum ang che; kan JavaScript chuan submit button chu a intercept ang a, feedback a relay ang che. Submit i tum hian i form controls-a :invalidand styles hman dan i hmu ang.:valid

Custom feedback style-ah chuan feedback inhrilh tawnna tha zawk neih theih nan custom color, border, focus style leh background icon te a hmang thin. Background icons for <select>s hi .custom-select, nen chauh a awm a, .form-control.

Hming hmasa

Looks good!

Hming hnuhnung

Looks good!

User hming a ni

@ a ni.

Please choose a username.

Khawpui

Please provide a valid city.

Nihphung

Please select a valid state.

Zip a ni

Please provide a valid zip.

Terms leh conditions te chu pawm rawh

You must agree before submitting.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Browser a default a ni

Custom validation feedback message emaw, form behavior thlak danglam tur JavaScript ziah emaw duh lo em ni? All good, browser defaults te pawh i hmang thei bawk. A hnuaia form hi submit tum ang che. I browser leh OS a zirin feedback style danglam deuh deuh i hmu ang.

Heng feedback style te hi CSS hmanga style theih a nih loh laiin, JavaScript hmangin feedback text chu i siam danglam thei tho.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server lam a ni

Client-side validation hman kan rawt a, mahse server-side validation i mamawh a nih chuan form field dik lo leh dik lo chu leh hmangin i tarlang thei .is-invalidang .is-valid. .invalid-feedbackHeng class te nen hian a support bawk tih hre reng ang che .

Hming hmasa

A tha hle mai!

Hming hnuhnung

A tha hle mai!

User hming a ni

@ a ni.

Khawngaihin username pakhat thlang rawh.

Khawpui

Khawpui dik tak min pe dawn nia.

Nihphung

Khawngaihin state dik tak thlang rawh.

Zip a ni

Zip dik tak pe turin kan ngen a che u.

Terms leh conditions te chu pawm rawh

Submit hmain i remti tur a ni.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Element thlawptu te

A hnuaia form control leh component hrang hrangte tan hian validation style a awm a:

<input>s leh <textarea>s with ( input group- .form-controla pakhat thleng tel ) ..form-control
<select>s nen .form-controlor.custom-select
.form-checks
.custom-checkboxs leh .custom-radios
.custom-file

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Hmanraw hman dan tur

I form layout-in a phal chuan, styled tooltip-a validation feedback lantir turin class-te .{valid|invalid}-feedbackchu class-te nen i swap thei ang. Tooltip positioning atan .{valid|invalid}-tooltipnu leh pa nei ngei ngei tur a ni. position: relativeA hnuaia entirnan hian kan column class te hian hei hi an nei tawh a, mahse i project hian setup dang a mamawh mai thei.

Hming hmasa

Hming hnuhnung

User hming a ni

@ a ni.

Khawpui

Nihphung

Zip a ni

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Customizing a ni

Validation state te chu Sass hmangin $form-validation-statesmap nen customize theih a ni. Kan _variables.scssfile-a awm, he Sass map hi loop over a ni a, default valid/ invalidvalidation states a siam a ni. State tin rawng leh icon siam dan tur nested map pawh a tel bawk. State dang browser-in a support loh laiin, custom style hmangtute chuan awlsam takin form feedback complex zawk an dah belh thei a ni.

Mixin pawh siam danglam lovin heng value te hi customize kan rawt lo tih hre reng ang che form-validation-state.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Custom form siam a ni

Customization leh cross browser consistency tam zawk neih duh chuan kan completely custom form elements hmangin browser defaults te chu thlak rawh. Semantic leh accessible markup chungah an siam a, chuvangin default form control eng pawh atan solid replacement an ni.

Checkbox leh radio te pawh a awm bawk

Checkbox tin leh radio <input>leh <label>pairing tin chu <div>kan custom control siam turin a in wrapped a ni. Structural lamah chuan hei hi kan default ang chiah a .form-checkni .

Kan state ~zawng zawng tan sibling selector ( ) kan hmang a —like —kan custom form indicator chu dik taka style turin. Class nena kan inzawm chuan item tin text chu 's state hmangin kan style thei bawk.<input>:checked.custom-control-label<input>

<input>Default chu kan thup a, kan opacityhmang a, .custom-control-labela aiah custom form indicator thar siam nan leh hmangin kan hmang ::beforebawk ::after. Vanduaithlak takin custom one from just the kan siam thei lo a ni, a <input>chhan chu CSS’s contenthian chu element-ah chuan hna a thawk lo.

Checked state-ah chuan Open Iconic atanga base64 embedded SVG icons kan hmang thin . Hei hian browser leh device hrang hranga styling leh positioning control tha ber min pe a ni.

Checkbox hrang hrang a awm

He custom checkbox hi check la

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Custom checkbox te pawhin :indeterminateJavaScript hmanga manual-a set a nih chuan pseudo class hi an hmang thei bawk (a tarlanna tur HTML attribute a awm lo).

He custom checkbox hi check la

jQuery i hmang a nih chuan hetiang thil hi a tawk tur a ni:

$('.your-checkbox').prop('indeterminate', true)

Radio hrang hrangah te

He custom radio hi toggle rawh

A nih loh leh he custom radio dang hi toggle rawh

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inline a ni

He custom radio hi toggle rawh

A nih loh leh he custom radio dang hi toggle rawh

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Ramtuileilo

Custom checkbox leh radio te pawh tihtawp theih a ni bawk. disabledBoolean attribute chu add la, <input>custom indicator leh label description chu a style nghal vek ang.

He custom checkbox hi check la

He custom radio hi toggle rawh

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Switches a awm

Switch pakhat hian custom checkbox markup a nei a, mahse .custom-switchclass hmangin toggle switch a render thin. disabledSwitch te pawhin attribute hi an support bawk .

He switch element hi toggle rawh

Switch element tihtawp a ni

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Custom <select>menu te hian custom class chauh a mamawh a, .custom-selectcustom style te trigger nan. Custom styles hi 's initial appearance chauh a ni a , browser limitation vangin s a <select>siam danglam thei lo .<option>

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Kan text input lian leh te nena inmil turin custom select te te leh lian atang pawhin i thlang thei bawk.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Attribute pawh a multiplesupport bawk:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

sizeAttribute a nih angin :

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Zau zawng

hmangin custom <input type="range">control siam rawh .custom-range. Track (background) leh thumb (value) te hi browser hrang hrangah a inang vek turin style an nei vek a. IE leh Firefox chauhvin hmasawnna hmuh theiha tarlanna atan thumb veilam emaw dinglam emaw atanga an track “filling” an support avangin tunah hian kan support lo.

Entirna range

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

minRange inputs hian leh max— 0leh , te tan implicit value an nei a 100. minand maxattribute hmangtute tan value thar i dah thei bawk.

Entirna range

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Default-ah chuan range input chu integer value-ah “snap” a ni. Hei hi thlak danglam tur chuan astep value i tarlang thei bawk. A hnuaia entirnan hian step="0.5".

Entirna range

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

File browser a awm bawk

Custom file input animate nana plugin rawt chu: bs-custom-file-input , chu chu tuna kan docs-a kan hman mek chu a ni.

File input hi bunch zinga gnarly ber a ni a, functional Choose file... leh selected file name text hmanga hook up duh chuan JavaScript dang a mamawh bawk .

File thlang rawh

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<input>Default file chu kan thup a opacity, chu ai chuan kan style zawk a <label>ni. Button chu a siam a, a position chu ::after. A tawp berah chuan a widthlehheight on the <input>for proper spacing for surrounding content

SCSS hmanga string te lehlin emaw customize emaw

:lang()Pseudo-class hmang hian “Browse” tih thuziak chu ṭawng danga lehlin theih a ni. $custom-file-textSass variable-ah hian a kaihhnawih language tag leh localized string hmangin entry override emaw add emaw theih a ni. English string pawh chutiang bawk chuan customize theih a ni. Entirnan, hetiang hian Spanish tawng lehlin a dah belh theih dan tur chu (Spanish tawng code chu es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Spanish lang(es)tawnga lehlinna tur custom file input chungchangah hian action a awm a:

Archivo thlan chhuah

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Text dik tak a lan theih nan i document (or a subtree) language chu dik taka i set a ngai ang. Hei hi element -a attribute langemaw HTTP header emaw hmangin tih theih a ni a , chu chu method dangte nen a ni.<html>Content-Language

HTML hmanga string te lehlin emaw, customize emaw

Bootstrap hian HTML-a “Browse” text chu data-browseattribute hmanga lehlin dan a pe bawk a, chu chu custom input label-ah dah theih a ni (entirnan Dutch tawngin):

Voeg je document ke ruh a ni

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

Form hrang hrang

A tlangpuiin

Form control te pawh a awm

Sizing a ni

Chhiar tur chauh a ni

Chhiar tur chauh plain text

Range Input te pawh a awm

Checkbox leh radio te pawh a awm bawk

Default (stack tawh) a ni.

Inline a ni

Label awm lovin

Ruangam

Group hrang hrang siam rawh

Form grid a awm

Form row a awm

Horizontal ang maia awm

Horizontal form label siam dan tur

Column lian leh te

Auto-sizing a ni

Inline-a form siam a ni

Label thup ai chuan a danglamna tur

Ṭanpuina thuziak

Help text chu form controls nena inzawm tir

Rualbanlo form te

Caveat chu anchor hmangin a awm

Cross-browser hmanga hman theih a ni

Validation tih a ni

A hnathawh dan

Custom style hrang hrang a awm bawk

Browser a default a ni

Server lam a ni

Element thlawptu te

Hmanraw hman dan tur

Customizing a ni

Custom form siam a ni

Checkbox leh radio te pawh a awm bawk

Checkbox hrang hrang a awm

Radio hrang hrangah te

Inline a ni

Ramtuileilo

Switches a awm

Menu thlang rawh

Zau zawng

File browser a awm bawk

SCSS hmanga string te lehlin emaw customize emaw

HTML hmanga string te lehlin emaw, customize emaw