in English

Mga porma

Mga panig-ingnan ug mga giya sa paggamit alang sa mga istilo sa pagkontrol sa porma, mga kapilian sa layout, ug naandan nga mga sangkap alang sa paghimo og daghang lainlain nga mga porma.

Overview

Ang mga kontrol sa porma sa Bootstrap nagpalapad sa among Gi-reboot nga mga istilo sa porma nga adunay mga klase. Gamita kini nga mga klase aron makapili sa ilang gipahiangay nga mga pasundayag alang sa mas makanunayon nga paghubad sa mga browser ug aparato.

Siguruha nga mogamit usa ka angay typenga kinaiya sa tanan nga mga input (pananglitan, emailalang sa email address o numberalang sa numerical nga impormasyon) aron mapahimuslan ang mas bag-ong mga kontrol sa input sama sa pag-verify sa email, pagpili sa numero, ug uban pa.

Ania ang usa ka dali nga pananglitan aron ipakita ang mga istilo sa porma sa Bootstrap. Padayon sa pagbasa alang sa dokumentasyon sa gikinahanglan nga mga klase, porma layout, ug uban pa.

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

Mga kontrol sa porma

Ang mga kontrol sa porma sa teksto—sama <input>sa s, <select>s, ug <textarea>s—gi-istilo sa .form-controlklase. Apil ang mga estilo alang sa kinatibuk-ang panagway, kahimtang sa pagtutok, gidak-on, ug uban pa.

Siguruha nga susihon ang among naandan nga mga porma sa dugang nga istilo <select>.

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

Alang sa mga input sa file, ibaylo ang .form-controlpara sa .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>

Pagsukod

Ibutang ang mga gitas-on gamit ang mga klase sama sa .form-control-lgug .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>

Basaha ra

Idugang ang readonlyboolean nga attribute sa usa ka input aron malikayan ang pagbag-o sa bili sa input. Ang read-only inputs makita nga mas gaan (sama sa mga disabled inputs), apan ipabilin ang standard cursor.

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

Basaha lamang nga yano nga teksto

Kung gusto nimo nga adunay <input readonly>mga elemento sa imong porma nga gi-istilo ingon yano nga teksto, gamita ang .form-control-plaintextklase aron tangtangon ang default nga pag-istilo sa field sa porma ug ipreserba ang husto nga margin ug padding.

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

Itakda ang horizontally scrollable range inputs gamit ang .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>

Mga checkbox ug radyo

Ang mga default nga checkbox ug radyo gipaayo sa tabang sa .form-check, usa ka klase alang sa duha ka tipo sa input nga nagpauswag sa layout ug pamatasan sa ilang mga elemento sa HTML . Ang mga checkbox kay para sa pagpili og usa o ubay-ubay nga mga opsyon sa usa ka lista, samtang ang mga radyo para sa pagpili og usa ka opsyon gikan sa daghan.

Gisuportahan ang mga disabled nga checkbox ug radyo. Ang disabledhiyas mag-aplay ug mas gaan nga kolor aron makatabang sa pagpakita sa kahimtang sa input.

Ang mga checkbox ug radio button nagsuporta sa HTML-based form validation ug naghatag ug mugbo, accessible nga mga label. Sa ingon, ang atong <input>s ug <label>s kay managsuon nga elemento sukwahi sa <input>sulod sa <label>. Kini mao ang gamay nga mas verbose ingon nga kamo kinahanglan gayud nga espesipiko idug formga hiyas sa pag-asoy sa <input>ug <label>.

Default (stacked)

Sa kasagaran, ang bisan unsang gidaghanon sa mga checkbox ug radyo nga diha-diha nga igsoon ipatindog nga patayo ug tukma nga ibutang sa .form-check.

Default nga checkbox

Nabalda ang checkbox

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

Default nga radyo

Ikaduha nga default nga radyo

Nabaldado nga radyo

<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

Grupo ang mga checkbox o mga radyo sa parehas nga pinahigda nga laray pinaagi sa pagdugang .form-check-inlinesa bisan unsang .form-check.

3 (baldado)

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

3 (baldado)

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

Walay mga label

Idugang .position-staticsa mga input sa sulod .form-checknga walay bisan unsang label nga teksto. Hinumdumi nga maghatag gihapon og usa ka porma sa ma-access nga ngalan alang sa mga teknolohiya nga makatabang (pananglitan, gamit ang aria-label).

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

Layout

Tungod kay ang Bootstrap magamit display: blockug width: 100%sa halos tanan namong mga kontrol sa porma, ang mga porma pinaagi sa default stack nga patindog. Ang dugang nga mga klase mahimong magamit aron usbon kini nga layout sa per-form nga basehan.

Pagporma og mga grupo

Ang .form-groupklase mao ang pinakasayon nga paagi sa pagdugang sa pipila ka istruktura sa mga porma. Naghatag kini usa ka flexible nga klase nga nagdasig sa husto nga paggrupo sa mga label, kontrol, opsyonal nga teksto sa tabang, ug pagporma sa pag-validate sa mensahe. Sa kasagaran kini magamit lamang margin-bottom, apan kini mokuha og dugang nga mga estilo .form-inlinekon gikinahanglan. Gamita kini sa <fieldset>s, <div>s, o halos bisan unsang elemento.

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

Porma nga grid

Ang mas komplikado nga mga porma mahimong matukod gamit ang among mga klase sa grid. Gamita kini alang sa mga porma nga layout nga nanginahanglan daghang mga kolum, lainlain nga gilapdon, ug dugang nga mga kapilian sa pag-align.

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

Porma nga laray

Mahimo ka usab nga magbaylo .rowog .form-row, usa ka kalainan sa among standard nga grid row nga nag-override sa default nga column gutters alang sa mas hugot ug mas compact nga mga layout.

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

Ang mas komplikado nga mga layout mahimo usab nga mahimo gamit ang grid system.

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

Paghimo og pinahigda nga mga porma nga adunay grid pinaagi sa pagdugang sa .rowklase aron maporma ang mga grupo ug gamit ang mga .col-*-*klase aron itakda ang gilapdon sa imong mga label ug kontrol. Siguruha nga idugang .col-form-labelusab ang imong <label>mga s aron kini patindog nga nakasentro sa ilang kauban nga mga kontrol sa porma.

Usahay, kinahanglan nimo nga gamiton ang mga gamit sa margin o padding aron mahimo ang hingpit nga pag-align nga kinahanglan nimo. Pananglitan, gitangtang namo ang padding-toplabel sa among stacked radio inputs aron mas maayo nga i-align ang text baseline.

<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 row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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 nga porma nga pagsukod sa label

Siguroha nga gamiton .col-form-label-smo .col-form-label-lgsa imong <label>s o <legend>s sa husto nga pagsunod sa gidak-on sa .form-control-lgug .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>

Pagsukod sa kolum

Sama sa gipakita sa miaging mga pananglitan, ang among grid system nagtugot kanimo sa pagbutang og bisan unsang gidaghanon sa .cols sulod sa usa .rowo .form-row. Gibahin nila ang magamit nga gilapdon nga parehas sa taliwala nila. Mahimo ka usab nga magpili usa ka subset sa imong mga kolum aron makakuha og daghang o gamay nga espasyo, samtang ang nahabilin nga .cols parehas nga gibahin ang nahabilin, nga adunay piho nga mga klase sa kolum sama sa .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

Ang panig-ingnan sa ubos naggamit sa usa ka flexbox utility aron patindog nga isentro ang mga sulud ug mga pagbag .col- o .col-autoaron ang imong mga kolum makakuha ra ug daghang espasyo kung gikinahanglan. Sa laing paagi, ang mga gidak-on sa kolum mismo base sa mga sulod.

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

Mahimo nimong i-remix kana pag-usab sa mga klase sa kolum nga piho sa gidak-on.

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

Ug siyempre gisuportahan ang naandan nga mga kontrol sa porma .

<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 nga mga porma

Gamita ang .form-inlineklase sa pagpakita og serye sa mga label, mga kontrol sa porma, ug mga buton sa usa ka pinahigda nga laray. Ang mga kontrol sa porma sulod sa inline nga mga porma magkalahi gamay gikan sa ilang mga default nga estado.

Ang mga kontrol mao ang display: flex, pag-collapse sa bisan unsa nga HTML nga puti nga luna ug nagtugot kanimo sa paghatag og alignment nga kontrol uban sa spacing ug flexbox utilities.
Ang mga kontrol ug input nga mga grupo makadawat width: autoaron ma-override ang Bootstrap default width: 100%.
Ang mga kontrol makita lang nga inline sa mga viewport nga labing menos 576px ang gilapdon aron i-account ang pig-ot nga viewport sa mga mobile device.

Mahimong kinahanglan nimo nga mano-mano nga sulbaron ang gilapdon ug pag-align sa indibidwal nga mga kontrol sa porma nga adunay mga gamit sa gilay-on (sama sa gipakita sa ubos). Katapusan, siguruha nga kanunay iapil ang usa <label>sa matag kontrol sa porma, bisan kung kinahanglan nimo itago kini gikan sa mga bisita nga dili screenreader nga adunay .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>

Gisuportahan usab ang mga kontrol ug pagpili sa custom nga porma.

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

Mga alternatibo sa tinago nga mga label

Ang mga tabang nga teknolohiya sama sa screen readers magkaproblema sa imong mga porma kung dili ka mag-apil og label sa matag input. Alang niining mga inline nga porma, mahimo nimong tagoan ang mga label gamit ang .sr-onlyklase. Adunay dugang nga alternatibong mga pamaagi sa paghatag og label para sa mga teknolohiya sa pagtabang, sama sa aria-label, aria-labelledbyo titleattribute. Kung walay bisan usa niini, ang mga teknolohiya sa pagtabang mahimong mogamit sa placeholderhiyas, kung naa, apan timan-i nga ang paggamit placeholderingon usa ka puli sa ubang mga pamaagi sa pag-label wala gitambagan.

Tabang text

Ang block-level nga tabang nga teksto sa mga porma mahimong mabuhat gamit ang .form-text(nailhan kaniadto nga .help-blocksa v3). Ang inline nga tabang nga teksto mahimong dali nga ipatuman gamit ang bisan unsang inline nga elemento sa HTML ug mga klase sa utility sama sa .text-muted.

Pag-apil sa tabang nga teksto sa mga kontrol sa porma

Ang teksto sa tabang kinahanglan nga klaro nga adunay kalabotan sa pagkontrol sa porma nga adunay kalabotan sa paggamit sa aria-describedbyhiyas. Kini magsiguro nga ang mga teknolohiya nga makatabang—sama sa mga tigbasa sa screen—mopahibalo niini nga teksto sa tabang kung ang tiggamit mag-focus o mosulod sa kontrol.

Ang tabang nga teksto sa ubos sa mga input mahimong i-istilo sa .form-text. Kini nga klase naglakip display: blockug nagdugang pipila ka taas nga margin alang sa dali nga gilay-on gikan sa mga input sa ibabaw.

Password Ang imong password kinahanglan nga 8-20 ka karakter ang gitas-on, adunay mga letra ug numero, ug kinahanglan dili adunay mga espasyo, espesyal nga karakter, o emoji.

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

Ang inline nga teksto mahimong mogamit sa bisan unsang tipikal nga inline nga HTML nga elemento (bisan kini usa ka <small>, <span>, o uban pa) nga wala’y labaw sa usa ka klase sa utility.

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

Mga disabled nga porma

Idugang ang disabledboolean nga attribute sa usa ka input aron mapugngan ang mga interaksyon sa user ug himoon kini nga mas gaan.

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

Idugang ang disabledhiyas sa usa <fieldset>aron ma-disable ang tanang kontrol sa sulod.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <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 nga adunay mga angkla

Gitratar sa mga browser ang tanan nga mga kontrol sa lumad nga porma ( <input>, <select>, ug <button>mga elemento) sa sulod sa usa <fieldset disabled>ingon nga disabled, nga nagpugong sa mga interaksyon sa keyboard ug mouse niini.

Bisan pa, kung ang imong porma naglakip usab sa naandan nga mga elemento nga sama sa butones sama sa <a ... class="btn btn-*">, hatagan ra kini usa ka istilo nga pointer-events: none. Ingon sa nahibal-an sa seksyon bahin sa disabled nga estado alang sa mga buton (ug espesipiko sa sub-section alang sa mga elemento sa anchor), kini nga CSS nga kabtangan wala pa gi-standardize ug dili hingpit nga gisuportahan sa Internet Explorer 10. Ang mga kontrol nga nakabase sa anchor mahimo usab focusable ug operate gamit ang keyboard. Kinahanglan nimo nga mano-mano nga usbon kini nga mga kontrol pinaagi sa pagdugang tabindex="-1"aron mapugngan sila nga makadawat og pokus ug aria-disabled="disabled"aron ipahibalo ang ilang estado sa mga teknolohiya nga makatabang.

Pagkaangay sa cross-browser

Samtang ang Bootstrap magamit kini nga mga istilo sa tanan nga mga browser, ang Internet Explorer 11 ug sa ubos dili hingpit nga nagsuporta sa disabledhiyas sa usa ka <fieldset>. Gamita ang custom JavaScript aron ma-disable ang fieldset niini nga mga browser.

Pagpamatuod

Paghatag og bililhon, maaksiyonan nga feedback sa imong mga user nga adunay HTML5 nga pag-validate sa porma– anaa sa tanan namong gisuportahan nga mga browser . Pagpili gikan sa default nga feedback sa pag-validate sa browser, o ipatuman ang naandan nga mga mensahe sa among mga built-in nga klase ug starter JavaScript.

Nahibal-an namon nga sa pagkakaron ang mga istilo sa pag-validate sa bahin sa kliyente ug mga tooltip dili ma-access, tungod kay wala sila naladlad sa mga teknolohiya nga makatabang. Samtang nagtrabaho kami sa usa ka solusyon, among girekomenda nga gamiton ang kapilian sa kilid sa server o ang default nga pamaagi sa pag-validate sa browser.

Giunsa kini paglihok

Ania kung giunsa ang pag-validate sa porma sa Bootstrap:

Ang pag-validate sa porma sa HTML gipadapat pinaagi sa duha ka pseudo-classes sa CSS, :invalidug :valid. Kini magamit sa <input>, <select>, ug <textarea>mga elemento.
Gisangkapan sa Bootstrap ang :invalidug :validmga istilo sa .was-validatedklase sa ginikanan, nga sagad gigamit sa <form>. Kung dili, ang bisan unsang gikinahanglan nga field nga walay bili makita nga dili balido sa pagkarga sa panid. Niining paagiha, mahimo nimong pilion kung kanus-a kini i-aktibo (kasagaran pagkahuman gisulayan ang pagsumite sa porma).
Aron i-reset ang dagway sa porma (pananglitan, sa kaso sa dinamikong mga pagsumiter sa porma gamit ang AJAX), kuhaa ang .was-validatedklase gikan sa <form>pag-usab human sa pagsumite.
Isip usa ka fallback, .is-invalidug .is-validang mga klase mahimong gamiton imbes sa pseudo-classes para sa server side validation . Wala sila magkinahanglan og .was-validatedklase sa ginikanan.
Tungod sa mga pagpugong kung giunsa paglihok ang CSS, dili kami (sa pagkakaron) magamit ang mga istilo sa usa <label>nga moabut sa wala pa ang kontrol sa porma sa DOM nga wala’y tabang sa naandan nga JavaScript.
Gisuportahan sa tanang modernong browser ang constraint validation API , usa ka serye sa mga pamaagi sa JavaScript alang sa pag-validate sa mga kontrol sa porma.
Ang mga mensahe sa feedback mahimong mogamit sa mga default sa browser (lahi alang sa matag browser, ug dili ma-estilo pinaagi sa CSS) o ang among naandan nga mga istilo sa feedback nga adunay dugang nga HTML ug CSS.
Mahimo kang maghatag ug custom validity nga mga mensahe setCustomValiditysa JavaScript.

Uban niana sa hunahuna, hunahunaa ang mga mosunud nga demo para sa among naandan nga mga istilo sa pag-validate sa porma, opsyonal nga mga klase sa kilid sa server, ug mga default sa browser.

Pasadya nga mga istilo

Para sa custom Bootstrap form validation nga mga mensahe, kinahanglan nimong idugang ang novalidateboolean attribute sa imong <form>. Gi-disable niini ang browser default feedback tooltips, apan naghatag gihapon og access sa form validation API sa JavaScript. Sulayi nga isumite ang porma sa ubos; ang among JavaScript makapugong sa isumite nga butones ug i-relay ang feedback kanimo. Kung mosulay sa pagsumite, imong makita ang :invalidug :validmga istilo nga gipadapat sa imong mga kontrol sa porma.

Ang mga istilo sa pasadya nga feedback nag-aplay sa naandan nga mga kolor, mga utlanan, mga istilo sa pagtutok, ug mga icon sa background aron mas maayo nga makigsulti sa feedback. Ang mga icon sa background para <select>sa s anaa lamang sa .custom-select, ug dili .form-control.

Unang ngalan

Nindot tan-awon!

Apelyido

Nindot tan-awon!

Dakbayan

Palihug paghatag ug balido nga siyudad.

Estado

Palihug pagpili ug balido nga estado.

Zip

Palihug paghatag ug balido nga zip.

Pag-uyon sa mga termino ug kondisyon

Kinahanglan nga mouyon ka sa dili pa mosumite.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

Mga default sa browser

Dili interesado sa kostumbre nga mga mensahe sa feedback sa validation o pagsulat sa JavaScript aron mabag-o ang mga pamatasan sa porma? Ang tanan maayo, mahimo nimong gamiton ang mga default sa browser. Sulayi ang pagsumite sa porma sa ubos. Depende sa imong browser ug OS, makakita ka og gamay nga lahi nga estilo sa feedback.

Samtang kini nga mga istilo sa feedback dili mahimong istilo sa CSS, mahimo gihapon nimo ipasibo ang teksto sa feedback pinaagi sa JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </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>

kilid sa server

Among girekomendar ang paggamit sa client-side validation, apan kon gikinahanglan nimo ang server-side validation, mahimo nimong ipaila ang dili balido ug balido nga mga field sa porma nga adunay .is-invalidug .is-valid. Timan-i nga .invalid-feedbackgisuportahan usab kini nga mga klase.

Alang sa dili balido nga mga natad, siguroha nga ang dili balido nga feedback/error nga mensahe gilambigit sa may kalabutan nga porma nga field gamit ang aria-describedby. Kini nga hiyas nagtugot sa labaw pa sa usa idnga mahimong pakisayran, kung ang uma nagpunting na sa dugang nga porma nga teksto.

Unang ngalan

Nindot tan-awon!

Apelyido

Nindot tan-awon!

Dakbayan

Palihug paghatag ug balido nga siyudad.

Estado

Palihug pagpili ug balido nga estado.

Zip

Palihug paghatag ug balido nga zip.

Pag-uyon sa mga termino ug kondisyon

Kinahanglan nga mouyon ka sa dili pa mosumite.

<form>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Gisuportahan nga mga elemento

Ang mga estilo sa pag-validate anaa alang sa mosunod nga mga kontrol sa porma ug mga sangkap:

<input>s ug <textarea>s uban.form-control
<select>s uban .form-controlo.custom-select
.form-checks
.custom-checkboxs ug .custom-radios
.custom-file

Textarea

Palihug pagsulod ug mensahe sa textarea.

Susiha kining custom nga checkbox

Pananglitan dili balido nga teksto sa feedback

I-toggle kining naandan nga radyo

O i-toggle kining laing custom nga radyo

Dugang nga pananglitan dili balido nga teksto sa feedback

Pananglitan dili balido nga custom nga pagpili nga feedback

Pilia ang file...

Pananglitan dili balido nga feedback sa custom file

Pananglitan dili balido nga feedback sa grupo sa input

Mga kapilian

Pananglitan dili balido nga feedback sa grupo sa input

Pilia ang file...

Pananglitan dili balido nga feedback sa grupo sa input

<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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Mga tooltip

Kung gitugotan kini sa imong layout sa porma, mahimo nimong ibaylo ang mga .{valid|invalid}-feedbackklase alang sa .{valid|invalid}-tooltipmga klase aron ipakita ang feedback sa pag-validate sa usa ka istilo nga tooltip. Siguruha nga adunay usa ka ginikanan nga position: relativenaa niini alang sa pagposisyon sa tooltip. Sa panig-ingnan sa ubos, ang among mga klase sa kolum aduna na niini, apan ang imong proyekto mahimong magkinahanglan og alternatibong setup.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

Pag-customize

Ang mga estado sa validation mahimong ipasibo pinaagi sa Sass gamit ang $form-validation-statesmapa. Nahimutang sa among _variables.scssfile, kini nga mapa sa Sass gi-loop aron makamugna ang default valid/ invalidvalidation nga mga estado. Lakip ang usa ka nested nga mapa alang sa pag-customize sa kolor ug icon sa matag estado. Samtang walay laing estado nga gisuportahan sa mga browser, kadtong naggamit ug custom nga mga estilo daling makadugang sa mas komplikadong porma nga feedback.

Palihug timan-i nga dili namo girekomenda ang pag-customize niini nga mga kantidad nga wala usab giusab ang form-validation-statemixin.

// 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));
}

Pag-validate sa grupo sa input

Aron mahibal-an kung unsa nga mga elemento ang nanginahanglan mga rounded corner sa sulod sa usa ka input nga grupo nga adunay validation, usa ka input nga grupo nanginahanglan usa ka dugang .has-validationnga klase.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Palihug pagpili ug username.

Pasadya nga mga porma

Alang sa labi pa nga pag-customize ug pagkamakanunayon sa cross browser, gamita ang among hingpit nga naandan nga mga elemento sa porma aron ilisan ang mga default sa browser. Gitukod sila sa ibabaw sa semantic ug accessible nga markup, mao nga sila lig-on nga mga kapuli sa bisan unsang default nga kontrol sa porma.

Mga checkbox ug radyo

Ang matag checkbox ug radyo <input>ug <label>pagpares giputos sa usa <div>aron mahimo ang among naandan nga kontrol. Sa istruktura, parehas kini nga pamaagi sa among default .form-check.

Among gigamit ang sibling selector ( ~) para sa tanan namong <input>estado—sama :checked—sa hustong paagi sa pag-istilo sa among custom nga indikasyon sa porma. Kung gihiusa sa .custom-control-labelklase, mahimo usab namon nga i-istilo ang teksto alang sa matag aytem base sa <input>estado sa 's.

Among gitago ang default <input>gamit opacityang ug gigamit ang .custom-control-labelsa paghimo og bag-ong indikasyon sa custom nga porma sa dapit niini nga adunay ::beforeug ::after. Ikasubo nga dili kami makahimo og usa ka kostumbre gikan lamang sa <input>tungod kay ang CSS contentdili molihok sa kana nga elemento.

Sa gisusi nga mga estado, gigamit namo ang base64 nga naka-embed nga SVG nga mga icon gikan sa Open Iconic . Naghatag kini kanamo sa labing kaayo nga kontrol alang sa pag-istilo ug pagposisyon sa mga browser ug aparato.

Mga checkbox

Susiha kining custom nga checkbox

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

Ang mga custom nga checkbox mahimo usab nga mogamit sa :indeterminatepseudo class kung mano-mano nga gitakda pinaagi sa JavaScript (walay magamit nga HTML attribute para sa pagtino niini).

Susiha kining custom nga checkbox

Kung naggamit ka og jQuery, ang usa ka butang nga sama niini igo na:

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

Mga radyo

I-toggle kining naandan nga radyo

O i-toggle kining laing custom nga radyo

<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

I-toggle kining naandan nga radyo

O i-toggle kining laing custom nga radyo

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" 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="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Nabaldado

Ang mga custom nga checkbox ug radyo mahimo usab nga ma-disable. Idugang ang disabledboolean attribute sa <input>ug ang custom indicator ug label nga deskripsyon awtomatik nga i-istilo.

Susiha kining custom nga checkbox

I-toggle kining naandan nga radyo

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

Mga switch

Ang usa ka switch adunay marka sa usa ka custom nga checkbox apan naggamit sa .custom-switchklase sa paghimo sa usa ka toggle switch. Gisuportahan usab sa mga switch ang disabledattribute.

I-toggle kini nga elemento sa switch

Nabalda ang elemento sa switch

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

Ang mga custom <select>nga menu nagkinahanglan lamang ug custom nga klase, .custom-selectaron ma-trigger ang custom nga mga estilo. Gilimitahan ang mga custom nga istilo <select>sa una nga hitsura ug dili mabag-o ang <option>s tungod sa mga limitasyon sa browser.

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

Mahimo ka usab nga mopili gikan sa gagmay ug dagkong mga gipili nga kostumbre aron ipares ang among parehas nga gidak-on nga mga input sa teksto.

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

Gisuportahan multipleusab ang attribute:

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

Sama sa sizekinaiya:

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

Sakop

Paghimo og custom nga <input type="range">mga kontrol gamit ang .custom-range. Ang track (ang background) ug thumb (ang bili) pareho nga gi-istilo aron makita nga parehas sa mga browser. Ingon nga ang IE ug Firefox ra ang nagsuporta sa "pagpuno" sa ilang track gikan sa wala o tuo sa kumagko isip usa ka paagi aron makita ang pag-uswag, wala kami karon nagsuporta niini.

Ehemplo range

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

Ang mga input sa range adunay implicit nga mga kantidad alang sa minug max— 0ug 100, matag usa. Mahimo nimong itakda ang bag-ong mga kantidad alang sa mga naggamit sa minug mga maxhiyas.

Ehemplo range

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

Sa kasagaran, ang mga input sa range "snap" sa mga integer nga kantidad. Aron mabag-o kini, mahimo nimong itakda ang usa ka stepkantidad. Sa pananglitan sa ubos, gidoble namo ang gidaghanon sa mga lakang pinaagi sa paggamit sa step="0.5".

Ehemplo range

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

File browser

Ang girekomendar nga plugin aron ma-animate ang custom file input: bs-custom-file-input , mao kana ang among gigamit karon dinhi sa among mga docs.

Ang pag-input sa file mao ang labing katingad-an sa hugpong ug nanginahanglan dugang nga JavaScript kung gusto nimo nga i-hook kini gamit ang gamit nga Pilia ang file… ug gipili nga teksto sa ngalan sa file.

Pilia ang file

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

Among gitago ang default nga file <input>pinaagi sa opacityug sa baylo i-istilo ang <label>. Ang buton gihimo ug gipahimutang sa ::after. Katapusan, among gideklarar ang usa ka widthug heightsa <input>para sa hustong gilay-on alang sa naglibot nga sulod.

Paghubad o pag-customize sa mga string gamit ang SCSS

Ang :lang()pseudo-class gigamit sa pagtugot sa paghubad sa "Browse" nga teksto ngadto sa ubang mga pinulongan. I-override o idugang ang mga entry sa $custom-file-textvariable sa Sass nga adunay tag nga lengguwahe ug gi-localize nga mga string. Ang English nga mga kuwerdas mahimong ipasibo sa samang paagi. Pananglitan, ania kung giunsa ang pagdugang usa ka paghubad sa Kinatsila (ang code sa pinulongang Espanyol mao ang es):

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

Ania ang lang(es)aksyon sa custom file input para sa Spanish translation:

Pagpili sa Archivo

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

Kinahanglan nimo nga itakda ang lengguwahe sa imong dokumento (o subtree niini) sa husto aron mapakita ang husto nga teksto. Mahimo kini gamit ang langattribute sa <html>elemento o ang Content-LanguageHTTP header , ug uban pang mga pamaagi.

Paghubad o pag-customize sa mga string gamit ang HTML

Naghatag usab ang Bootstrap og paagi sa paghubad sa "Browse" nga teksto sa HTML nga adunay data-browseattribute nga mahimong idugang sa custom input label (pananglitan sa Dutch):

Tan-awa ang imong dokumento sa tiil

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

Mga porma

Overview

Mga kontrol sa porma

Pagsukod

Basaha ra

Basaha lamang nga yano nga teksto

Range Inputs

Mga checkbox ug radyo

Default (stacked)

Inline

Walay mga label

Layout

Pagporma og mga grupo

Porma nga grid

Porma nga laray

Horizontal nga porma

Horizontal nga porma nga pagsukod sa label

Pagsukod sa kolum

Auto-sizing

Inline nga mga porma

Mga alternatibo sa tinago nga mga label

Tabang text

Pag-apil sa tabang nga teksto sa mga kontrol sa porma

Mga disabled nga porma

Caveat nga adunay mga angkla

Pagkaangay sa cross-browser

Pagpamatuod

Giunsa kini paglihok

Pasadya nga mga istilo

Mga default sa browser

kilid sa server

Gisuportahan nga mga elemento

Mga tooltip

Pag-customize

Pag-validate sa grupo sa input

Pasadya nga mga porma

Mga checkbox ug radyo

Mga checkbox

Mga radyo

Inline

Nabaldado

Mga switch

Pilia ang menu

Sakop

File browser

Paghubad o pag-customize sa mga string gamit ang SCSS

Paghubad o pag-customize sa mga string gamit ang HTML