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.
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" placeholder="Enter email">
<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" placeholder="Password">
</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>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 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>.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>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><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" placeholder="Password">
</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>1000 hmangin horizontal scroll theih range inputs te 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>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 hi a support a, mahse not-allowedparent hover-a cursor pek tur <label>chuan disabledattribute chu .form-check-input. Disabled attribute hian input dinhmun tarlanna atana pui turin lighter color a apply ang.
Checkbox leh radio hman te hi HTML-based form validation support turin siam a ni a, label tawi, hman theih tur a 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-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.
<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><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>Horizontal row khata checkbox emaw radio emaw chu .form-check-inlinegroup .form-check.
<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><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>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>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.
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">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>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>, 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" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</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>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" placeholder="Email">
</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" placeholder="Password">
</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>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>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>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>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 dawngwidth: 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 hnen atanga 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.
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.
<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>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-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</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.
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.
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-validatan 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 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
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide 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" placeholder="Zip" 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>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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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>Client side validation hman kan rawt a, mahse server side 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 .
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
<div class="invalid-feedback">
Please provide 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" placeholder="Zip" 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>Kan entirnan form te hian <input>a chunga native textual s te hi a tarlang a, mahse kan custom form control te tan pawh form validation styles a awm bawk.
<form class="was-validated">
<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>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.
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
<div class="invalid-tooltip">
Please provide 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" placeholder="Zip" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>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 tin hi kan custom control siam nan <div>unau pakhat nen a inkhuh a , a kaihhnawih thuziak atan a inkhuh bawk. Structural lamah chuan hei hi kan default ang chiah a ni .<span><label>.form-check
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.
<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).
jQuery i hmang a nih chuan hetiang thil hi a tawk tur a ni:
$('.your-checkbox').prop('indeterminate', true)<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><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>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.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>Custom <select>menu te hian custom class chauh a mamawh a, .custom-selectcustom style te trigger nan. Custom styles hi <select>'s initial appearance- ah chauh <option>tihkhawtlai a ni a, browser-a tihkhawtlai loh avangin s hi a siam danglam thei lo.
<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 tak tak 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>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 siam 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.
<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.
<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 stepvalue i tarlang thei bawk. A hnuaia entirnan hian step="0.5".
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">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 .
<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. widthA tawp berah chuan a leh heighton the <input>for proper spacing for surrounding content kan declare a .
: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"
);lang(es)Spanish tawnga lehlinna tur custom file input chungchangah hian hetiang hian action a awm:
<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