in English

Mga porma

Mga halimbawa at mga alituntunin sa paggamit para sa mga istilo ng kontrol ng form, mga pagpipilian sa layout, at mga custom na bahagi para sa paggawa ng malawak na iba't ibang mga form.

Pangkalahatang-ideya

Lumalawak ang mga kontrol sa form ng Bootstrap sa aming mga istilo ng Na-reboot na form na may mga klase. Gamitin ang mga klaseng ito para mag-opt in sa kanilang mga naka-customize na display para sa mas pare-parehong pag-render sa mga browser at device.

Tiyaking gumamit ng naaangkop na typekatangian sa lahat ng mga input (hal, emailpara sa email address o numberpara sa numerical na impormasyon) upang samantalahin ang mga mas bagong kontrol sa input tulad ng pag-verify ng email, pagpili ng numero, at higit pa.

Narito ang isang mabilis na halimbawa upang ipakita ang mga istilo ng form ng Bootstrap. Panatilihin ang pagbabasa para sa dokumentasyon sa mga kinakailangang klase, layout ng form, at higit pa.

Hindi namin kailanman ibabahagi ang iyong email sa sinuman. 
<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 form

Ang mga kontrol sa textual form—tulad ng <input>s, <select>s, at <textarea>s—ay naka-istilo sa .form-controlklase. Kasama ang mga istilo para sa pangkalahatang hitsura, estado ng focus, laki, at higit pa.

Siguraduhing tuklasin ang aming mga custom na form para sa karagdagang 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>

Para sa mga input ng file, palitan 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>

Pagsusukat

Itakda ang mga taas gamit ang mga klase tulad ng .form-control-lgat .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>

Basahin lamang

Idagdag ang readonlyboolean attribute sa isang input para maiwasan ang pagbabago ng value ng input. Ang mga read-only na input ay lumilitaw na mas magaan (tulad ng mga hindi pinaganang input), ngunit panatilihin ang karaniwang cursor.

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

Readonly plain text

Kung gusto mong magkaroon ng mga <input readonly>elemento sa iyong form na naka-istilo bilang plain text, gamitin ang .form-control-plaintextklase upang alisin ang default na pag-istilo ng field ng form at panatilihin ang tamang margin at 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>

Mga Input ng Saklaw

Itakda ang pahalang na na-scroll na mga input ng saklaw 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 at radyo

Ang mga default na checkbox at radyo ay pinapabuti sa tulong ng .form-check, isang solong klase para sa parehong mga uri ng input na nagpapabuti sa layout at pag-uugali ng kanilang mga elemento ng HTML . Ang mga checkbox ay para sa pagpili ng isa o ilang mga opsyon sa isang listahan, habang ang mga radyo ay para sa pagpili ng isang opsyon mula sa marami.

Sinusuportahan ang mga naka-disable na checkbox at radyo. Maglalapat ang disabledattribute ng mas magaan na kulay upang makatulong na ipahiwatig ang estado ng input.

Sinusuportahan ng mga checkbox at radio button ang HTML-based na form validation at nagbibigay ng maikli at naa-access na mga label. Dahil dito, ang ating <input>s at <label>s ay magkakapatid na elemento kumpara sa isang <input>within a <label>. Ito ay bahagyang mas verbose dahil kailangan mong tukuyin idat formga katangian upang maiugnay ang <input>at <label>.

Default (nakasalansan)

Bilang default, ang anumang bilang ng mga checkbox at radyo na agarang magkakapatid ay patayo na isalansan at naaangkop na lagyan ng espasyo sa .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>

Nasa linya

Igrupo ang mga checkbox o radyo sa parehong pahalang na hilera sa pamamagitan ng pagdaragdag .form-check-inlinesa alinmang .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>

Nang walang mga label

Idagdag .position-staticsa mga input sa loob .form-checkna walang anumang label na text. Tandaan na magbigay pa rin ng ilang uri ng naa-access na pangalan para sa mga pantulong na teknolohiya (halimbawa, 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

Dahil nalalapat ang Bootstrap display: blockat width: 100%sa halos lahat ng aming mga kontrol sa form, ang mga form ay sa pamamagitan ng default na stack patayo. Maaaring gamitin ang mga karagdagang klase upang pag-iba-ibahin ang layout na ito sa isang per-form na batayan.

Bumuo ng mga grupo

Ang .form-groupklase ay ang pinakamadaling paraan upang magdagdag ng ilang istraktura sa mga form. Nagbibigay ito ng flexible na klase na naghihikayat ng wastong pagpapangkat ng mga label, kontrol, opsyonal na text ng tulong, at pagmemensahe sa pagpapatunay ng form. Bilang default nalalapat lang ito margin-bottom, ngunit kumukuha ito ng mga karagdagang istilo kung .form-inlinekinakailangan. Gamitin ito kasama <fieldset>ng s, <div>s, o halos anumang iba pang 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>

Form grid

Maaaring bumuo ng mas kumplikadong mga form gamit ang aming mga klase sa grid. Gamitin ang mga ito para sa mga layout ng form na nangangailangan ng maraming column, iba't ibang lapad, at karagdagang mga opsyon 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>

Bumuo ng hilera

Maaari ka ring magpalit .rowng .form-row, isang variation ng aming karaniwang grid row na nag-o-override sa mga default na column gutters para sa mas mahigpit at mas compact na 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 kumplikadong mga layout ay maaari ding gawin 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>

Pahalang na anyo

Gumawa ng mga pahalang na form gamit ang grid sa pamamagitan ng pagdaragdag ng .rowklase upang bumuo ng mga grupo at paggamit ng mga .col-*-*klase upang tukuyin ang lapad ng iyong mga label at kontrol. Tiyaking idagdag din .col-form-labelsa iyong <label>mga s upang patayo silang nakasentro sa kanilang mga nauugnay na kontrol sa form.

Kung minsan, maaaring kailangan mong gumamit ng margin o padding utilities para magawa ang perpektong pagkakahanay na kailangan mo. Halimbawa, inalis namin ang padding-toplabel sa aming nakasalansan na radio inputs para mas mai-align ang text baseline.

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

Siguraduhing gamitin .col-form-label-smo .col-form-label-lgsa iyong mga <label>o <legend>para masundan nang tama ang laki ng .form-control-lgat .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>

Pagsusukat ng column

Gaya ng ipinakita sa mga nakaraang halimbawa, pinapayagan ka ng aming grid system na maglagay ng anumang bilang ng .cols sa loob ng isang .rowo .form-row. Hahatiin nila nang pantay ang magagamit na lapad sa pagitan nila. Maaari ka ring pumili ng isang subset ng iyong mga column na kukuha ng mas marami o mas kaunting espasyo, habang ang mga natitirang .cols ay pantay na hinahati ang iba, na may mga partikular na klase ng column tulad ng .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 halimbawa sa ibaba ay gumagamit ng isang flexbox utility upang patayo na igitna ang mga nilalaman at mga pagbabago .colupang .col-autoang iyong mga column ay kumukuha lamang ng maraming espasyo kung kinakailangan. Maglagay ng isa pang paraan, ang mga laki ng haligi mismo batay sa mga nilalaman.

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

Maaari mong muling i-remix iyon sa mga klase ng column na tukoy sa laki.

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

At siyempre suportado ang mga custom na kontrol sa form .

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

Mga inline na form

Gamitin ang .form-inlineklase upang magpakita ng serye ng mga label, mga kontrol sa form, at mga pindutan sa isang pahalang na hilera. Ang mga kontrol ng form sa loob ng mga inline na form ay bahagyang nag-iiba mula sa kanilang mga default na estado.

  • Ang mga kontrol ay display: flex, nagko-collapse ng anumang HTML white space at nagbibigay-daan sa iyong magbigay ng alignment control na may mga spacing at flexbox utilities.
  • Ang mga control at input group ay natatanggap width: autoupang i-override ang Bootstrap default width: 100%.
  • Ang mga kontrol ay lalabas lamang inline sa mga viewport na hindi bababa sa 576px ang lapad upang i-account ang mga makitid na viewport sa mga mobile device.

Maaaring kailanganin mong manu-manong tugunan ang lapad at pagkakahanay ng mga indibidwal na kontrol ng form na may mga kagamitan sa pagpupuwang (tulad ng ipinapakita sa ibaba). Panghuli, siguraduhing palaging magsama ng a <label>sa bawat kontrol ng form, kahit na kailangan mo itong itago mula sa mga bisitang hindi screenreader na may .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>

Sinusuportahan din ang mga kontrol at pagpili ng custom na form.

<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 mga nakatagong label

Magkakaroon ng problema sa iyong mga form ang mga pantulong na teknolohiya gaya ng mga screen reader kung hindi ka magsasama ng label para sa bawat input. Para sa mga inline na form na ito, maaari mong itago ang mga label gamit ang .sr-onlyklase. May mga karagdagang alternatibong paraan ng pagbibigay ng label para sa mga pantulong na teknolohiya, gaya ng aria-label, aria-labelledbyo titleattribute. Kung wala sa mga ito ang naroroon, ang mga pantulong na teknolohiya ay maaaring gumamit ng placeholderkatangian, kung mayroon, ngunit tandaan na ang paggamit ng placeholderbilang kapalit para sa iba pang mga paraan ng pag-label ay hindi pinapayuhan.

Text ng tulong

Maaaring gawin ang text ng tulong sa antas ng block sa mga form gamit ang .form-text(dating kilala bilang .help-blocksa v3). Ang inline na text ng tulong ay maaaring maipatupad nang may kakayahang umangkop gamit ang anumang inline na elemento ng HTML at mga utility class tulad ng .text-muted.

Pag-uugnay ng text ng tulong sa mga kontrol ng form

Ang text ng tulong ay dapat na tahasang nauugnay sa kontrol ng form na nauugnay sa paggamit ng aria-describedbykatangian. Titiyakin nito na ang mga pantulong na teknolohiya—gaya ng mga screen reader—ay iaanunsyo ang text ng tulong na ito kapag ang user ay tumutok o pumasok sa kontrol.

Ang teksto ng tulong sa ibaba ng mga input ay maaaring i-istilo ng .form-text. Kasama sa klase na ito display: blockat nagdaragdag ng ilang nangungunang margin para sa madaling pagpupuwang mula sa mga input sa itaas.

Ang iyong password ay dapat na 8-20 character ang haba, naglalaman ng mga titik at numero, at hindi dapat maglaman ng mga puwang, espesyal na character, 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 na text ay maaaring gumamit ng anumang tipikal na inline na elemento ng HTML (maging ito ay <small>, <span>, o iba pa) na walang iba kundi isang utility class.

Dapat ay 8-20 character ang haba. 
<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 hindi pinaganang form

Idagdag ang disabledkatangian ng boolean sa isang input upang maiwasan ang mga pakikipag-ugnayan ng user at gawin itong mas magaan.

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

Idagdag ang disabledattribute sa isang <fieldset>upang i-disable ang lahat ng kontrol sa loob.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat na may mga anchor

Tinatrato ng mga browser ang lahat ng mga kontrol ng native na form ( <input>, <select>, at mga <button>elemento) sa loob ng isang <fieldset disabled>bilang hindi pinagana, na pumipigil sa parehong mga pakikipag-ugnayan sa keyboard at mouse sa mga ito.

Gayunpaman, kung kasama rin sa iyong form ang mga custom na elementong tulad ng button gaya ng <a ... class="btn btn-*">, bibigyan lang ang mga ito ng istilong pointer-events: none. Tulad ng nabanggit sa seksyon tungkol sa naka- disable na estado para sa mga button (at partikular sa sub-section para sa mga elemento ng anchor), ang CSS property na ito ay hindi pa na-standardize at hindi pa ganap na sinusuportahan sa Internet Explorer 10. Ang mga anchor-based na kontrol ay mananatili pa rin nakatutok at nagagamit gamit ang keyboard. Dapat mong manu-manong baguhin ang mga kontrol na ito sa pamamagitan ng pagdaragdag tabindex="-1"upang pigilan ang mga ito sa pagtanggap ng focus at aria-disabled="disabled"upang ipahiwatig ang kanilang estado sa mga teknolohiyang pantulong.

Cross-browser compatibility

Habang ilalapat ng Bootstrap ang mga istilong ito sa lahat ng browser, hindi ganap na sinusuportahan ng Internet Explorer 11 at mas mababa ang disabledkatangian sa isang <fieldset>. Gumamit ng custom na JavaScript upang huwag paganahin ang fieldset sa mga browser na ito.

Pagpapatunay

Magbigay ng mahalaga, naaaksyunan na feedback sa iyong mga user na may HTML5 form validation– available sa lahat ng aming sinusuportahang browser . Pumili mula sa default na feedback sa pagpapatunay ng browser, o ipatupad ang mga custom na mensahe gamit ang aming mga built-in na klase at panimulang JavaScript.

Alam namin na sa kasalukuyan ang mga custom na istilo ng pagpapatunay sa panig ng kliyente at mga tooltip ay hindi naa-access, dahil hindi sila nakalantad sa mga pantulong na teknolohiya. Habang gumagawa kami ng solusyon, inirerekumenda namin ang alinman sa paggamit ng opsyon sa panig ng server o ang default na paraan ng pagpapatunay ng browser.

Pagpapatunay ng pangkat ng input

Ang mga pangkat ng input ay nahihirapan sa mga istilo ng pagpapatunay, sa kasamaang-palad. Ang aming rekomendasyon ay ilagay ang mga mensahe ng feedback bilang magkakapatid na elemento ng .input-groupna mayroong .is-{valid|invalid}. Ang paglalagay ng mga mensahe ng feedback sa loob ng mga input group ay sumisira sa border-radius. Tingnan ang workaround na ito .

Paano ito gumagana

Narito kung paano gumagana ang pagpapatunay ng form sa Bootstrap:

  • Ang pagpapatunay ng form ng HTML ay inilalapat sa pamamagitan ng dalawang pseudo-class ng CSS, :invalidat :valid. Nalalapat ito sa <input>, <select>, at <textarea>mga elemento.
  • Sinasaklaw ng Bootstrap ang :invalidat mga :validistilo sa parent .was-validatedclass, karaniwang inilalapat sa <form>. Kung hindi, lalabas ang anumang kinakailangang field na walang value bilang di-wasto sa pag-load ng page. Sa ganitong paraan, maaari mong piliin kung kailan isaaktibo ang mga ito (karaniwang pagkatapos subukan ang pagsusumite ng form).
  • Upang i-reset ang hitsura ng form (halimbawa, sa kaso ng mga dynamic na pagsusumite ng form gamit ang AJAX), alisin ang .was-validatedklase mula sa <form>muli pagkatapos ng pagsusumite.
  • Bilang isang fallback, .is-invalidat .is-validang mga klase ay maaaring gamitin sa halip na ang mga pseudo-class para sa server side validation . Hindi sila nangangailangan ng .was-validatedklase ng magulang.
  • Dahil sa mga hadlang sa kung paano gumagana ang CSS, hindi namin (sa kasalukuyan) maglapat ng mga istilo sa isang <label>nauuna sa kontrol ng form sa DOM nang walang tulong ng custom na JavaScript.
  • Sinusuportahan ng lahat ng modernong browser ang constraint validation API , isang serye ng mga pamamaraan ng JavaScript para sa pagpapatunay ng mga kontrol sa form.
  • Maaaring gamitin ng mga mensahe ng feedback ang mga default ng browser (iba-iba para sa bawat browser, at hindi mai-istilo sa pamamagitan ng CSS) o ang aming mga custom na istilo ng feedback na may karagdagang HTML at CSS.
  • Maaari kang magbigay ng mga custom na validity na mensahe setCustomValiditysa JavaScript.

Sa pag-iisip na iyon, isaalang-alang ang mga sumusunod na demo para sa aming mga istilo ng pagpapatunay ng custom na form, opsyonal na mga klase sa gilid ng server, at mga default ng browser.

Mga custom na istilo

Para sa custom na Bootstrap form validation messages, kakailanganin mong idagdag ang novalidateboolean attribute sa iyong <form>. Hindi nito pinapagana ang default na feedback tooltip ng browser, ngunit nagbibigay pa rin ng access sa mga form validation API sa JavaScript. Subukang isumite ang form sa ibaba; haharangin ng aming JavaScript ang button na isumite at maghahatid ng feedback sa iyo. Kapag sinusubukang isumite, makikita mo ang :invalidat mga :validistilong inilapat sa iyong mga kontrol sa form.

Ang mga custom na istilo ng feedback ay naglalapat ng mga custom na kulay, mga hangganan, mga estilo ng focus, at mga icon sa background upang mas mahusay na makipag-usap ng feedback. Ang mga icon sa background para sa <select>s ay magagamit lamang sa .custom-select, at hindi .form-control.

Mukhang maayos!
Mukhang maayos!
Mangyaring magbigay ng wastong lungsod.
Mangyaring pumili ng wastong estado.
Mangyaring magbigay ng wastong zip.
You must agree before submitting. 
<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 ng browser

Hindi interesado sa mga mensahe ng feedback sa custom na pagpapatunay o pagsulat ng JavaScript upang baguhin ang mga gawi ng form? Lahat ng mabuti, maaari mong gamitin ang mga default ng browser. Subukang isumite ang form sa ibaba. Depende sa iyong browser at OS, makakakita ka ng bahagyang naiibang istilo ng feedback.

Bagama't hindi mai-istilo ang mga istilo ng feedback na ito gamit ang CSS, maaari mo pa ring i-customize ang text ng feedback sa pamamagitan ng 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>

Sa panig ng server

Inirerekomenda namin ang paggamit ng pagpapatunay sa panig ng kliyente, ngunit kung sakaling kailanganin mo ang pagpapatunay sa panig ng server, maaari mong isaad ang mga di-wasto at wastong mga field ng form na may .is-invalidat .is-valid. Tandaan na .invalid-feedbacksinusuportahan din sa mga klase na ito.

Para sa mga di-wastong field, tiyaking ang di-wastong mensahe ng feedback/error ay nauugnay sa nauugnay na field ng form gamit ang aria-describedby. Ang katangiang ito ay nagbibigay-daan sa higit sa isa idna ma-reference, kung sakaling ang field ay tumuturo na sa karagdagang teksto ng form.

Mukhang maayos!
Mukhang maayos!
Mangyaring magbigay ng wastong lungsod.
Mangyaring pumili ng wastong estado.
Mangyaring magbigay ng wastong zip.
Dapat kang sumang-ayon bago magsumite. 
<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>

Mga sinusuportahang elemento

Available ang mga istilo ng pagpapatunay para sa mga sumusunod na kontrol at bahagi ng form:

  • <input>s at <textarea>s kasama.form-control
  • <select>s may .form-controlo.custom-select
  • .form-checks
  • .custom-checkboxs at .custom-radios
  • .custom-file
Mangyaring magpasok ng mensahe sa textarea.
Halimbawa ng di-wastong text ng feedback
Higit pang halimbawa ng di-wastong text ng feedback
Halimbawa ng di-wastong feedback sa custom na pagpili
Halimbawa ng di-wastong feedback ng custom na file
@
Halimbawa ng di-wastong feedback ng pangkat ng input
Halimbawa ng di-wastong feedback ng pangkat ng input
Halimbawa ng di-wastong feedback ng pangkat ng 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 pinapayagan ito ng iyong layout ng form, maaari mong palitan ang mga .{valid|invalid}-feedbackklase para sa mga .{valid|invalid}-tooltipklase upang magpakita ng feedback sa pagpapatunay sa isang naka-istilong tooltip. Tiyaking may kasamang magulang position: relativepara sa pagpoposisyon ng tooltip. Sa halimbawa sa ibaba, mayroon na nito ang aming mga klase sa column, ngunit maaaring mangailangan ng alternatibong setup ang iyong proyekto.

Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<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>

Pagpapasadya

Maaaring i-customize ang mga estado ng pagpapatunay sa pamamagitan ng Sass gamit ang $form-validation-statesmapa. Matatagpuan sa aming _variables.scssfile, ang mapa ng Sass na ito ay naka-loop upang makabuo ng mga estado ng default valid/ invalidvalidation. Kasama ang isang nested na mapa para sa pag-customize ng kulay at icon ng bawat estado. Bagama't walang ibang mga estado ang sinusuportahan ng mga browser, ang mga gumagamit ng mga custom na istilo ay madaling magdagdag ng mas kumplikadong feedback sa form.

Pakitandaan na hindi namin inirerekomenda ang pag-customize ng mga value na ito nang hindi rin binabago 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));
}

Workaround sa pagpapatunay ng pangkat ng input

Hindi namin naresolba ang mga sira border-radiusng mga pangkat ng pag-input na may pagpapatunay dahil sa mga limitasyon ng selector, kaya kinakailangan ang mga manu-manong override. Kapag gumagamit ka ng karaniwang pangkat ng pag-input at hindi na-customize ang mga default na halaga ng radius ng hangganan, idagdag .rounded-rightsa mga elementong may sirang border-radius.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Mangyaring pumili ng isang username.

Kapag gumagamit ka ng maliit o malaking pangkat ng input o nagko-customize ng mga default na border-radiusvalue, magdagdag ng custom na CSS sa elementong may busted na border-radius.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Mangyaring pumili ng isang username.

Mga custom na form

Para sa higit pang pagpapasadya at pagkakapare-pareho ng cross browser, gamitin ang aming ganap na custom na mga elemento ng form upang palitan ang mga default ng browser. Binuo ang mga ito sa ibabaw ng semantic at naa-access na markup, kaya solidong kapalit ang mga ito para sa anumang default na kontrol sa form.

Mga checkbox at radyo

Ang bawat checkbox at radyo <input>at <label>pagpapares ay nakabalot sa isang <div>upang gawin ang aming custom na kontrol. Sa istruktura, ito ay kapareho ng diskarte sa aming default .form-check.

Ginagamit namin ang sibling selector ( ~) para sa lahat ng aming <input>estado—tulad ng :checked—upang maayos na istilo ang aming custom na indicator ng form. Kapag pinagsama sa .custom-control-labelklase, maaari rin nating i-istilo ang teksto para sa bawat item batay sa <input>estado ng 's.

Itinatago namin ang default <input>gamit ang opacityat ginagamit ang .custom-control-labelupang bumuo ng bagong tagapagpahiwatig ng custom na form sa lugar nito na may ::beforeat ::after. Sa kasamaang palad, hindi kami makakagawa ng custom na isa mula sa dahil hindi gumagana <input>ang CSS sa elementong iyon.content

Sa mga naka-check na estado, gumagamit kami ng base64 na naka-embed na SVG na mga icon mula sa Open Iconic . Nagbibigay ito sa amin ng pinakamahusay na kontrol para sa pag-istilo at pagpoposisyon sa mga browser at device.

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

Magagamit din ng mga custom na checkbox ang :indeterminatepseudo class kapag manu-manong itinakda sa pamamagitan ng JavaScript (walang available na HTML attribute para sa pagtukoy nito).

Kung gumagamit ka ng jQuery, ang isang bagay na tulad nito ay sapat na:

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

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

Nasa linya

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

Hindi pinagana

Maaari ding i-disable ang mga custom na checkbox at radyo. Idagdag ang disabledboolean attribute sa <input>at ang custom na indicator at paglalarawan ng label ay awtomatikong mai-istilo.

<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 switch ay may markup ng custom na checkbox ngunit ginagamit ang .custom-switchklase para mag-render ng toggle switch. Sinusuportahan din ng mga switch ang disabledkatangian.

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

Pumili ng menu

Ang mga custom na <select>menu ay nangangailangan lamang ng isang custom na klase, .custom-selectupang ma-trigger ang mga custom na estilo. Ang mga custom na istilo ay limitado sa <select>unang hitsura ni at hindi maaaring baguhin ang mga <option>s dahil sa mga limitasyon ng 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>

Maaari ka ring pumili mula sa maliliit at malalaking custom na pinili upang tumugma sa aming mga input ng text na magkapareho ang laki.

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

Ang multiplekatangian ay sinusuportahan din:

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

Tulad ng sizekatangian:

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

Saklaw

Gumawa ng mga custom <input type="range">na kontrol gamit ang .custom-range. Ang track (ang background) at thumb (ang halaga) ay parehong naka-istilo upang lumitaw nang pareho sa mga browser. Dahil ang IE at Firefox lamang ang sumusuporta sa "pagpupuno" sa kanilang track mula sa kaliwa o kanan ng hinlalaki bilang isang paraan upang biswal na ipahiwatig ang pag-unlad, hindi namin ito sinusuportahan sa kasalukuyan.

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

Ang mga input ng range ay may mga implicit na value para sa minat max— 0at 100, ayon sa pagkakabanggit. Maaari kang tumukoy ng mga bagong halaga para sa mga gumagamit ng minat mga maxkatangian.

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

Bilang default, ang mga input ng range ay "snap" sa mga halaga ng integer. Upang baguhin ito, maaari kang tumukoy ng stephalaga. Sa halimbawa sa ibaba, doble namin ang bilang ng mga hakbang sa pamamagitan ng paggamit ng 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 browser

Ang inirerekomendang plugin para i-animate ang custom na input ng file: bs-custom-file-input , iyon ang kasalukuyang ginagamit namin dito sa aming mga doc.

Ang pag-input ng file ay ang pinakamakulit sa grupo at nangangailangan ng karagdagang JavaScript kung gusto mong i-hook up ang mga ito gamit ang functional Choose file... at piniling file name text.

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

Itinatago namin ang default na file sa <input>pamamagitan opacityng at sa halip ay i-istilo ang <label>. Ang pindutan ay nabuo at nakaposisyon na may ::after. Panghuli, ipinapahayag namin ang isang widthat heightsa <input>para sa wastong espasyo para sa nakapalibot na nilalaman.

Pagsasalin o pagpapasadya ng mga string gamit ang SCSS

Ang :lang()pseudo-class ay ginagamit upang payagan ang pagsasalin ng "Browse" na teksto sa ibang mga wika. I-override o magdagdag ng mga entry sa $custom-file-textSass variable na may nauugnay na tag ng wika at mga naka-localize na string. Ang English string ay maaaring i-customize sa parehong paraan. Halimbawa, narito kung paano maaaring magdagdag ng pagsasalin sa Espanyol (ang code ng wika ng Espanyol ay es):

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

Narito ang lang(es)pagkilos sa pasadyang pag-input ng file para sa pagsasalin ng Espanyol:

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

Kakailanganin mong itakda nang tama ang wika ng iyong dokumento (o subtree nito) upang maipakita ang tamang teksto. Magagawa ito gamit ang langattribute sa <html>elemento o ang Content-LanguageHTTP header , bukod sa iba pang mga pamamaraan.

Pagsasalin o pagpapasadya ng mga string gamit ang HTML

Nagbibigay din ang Bootstrap ng paraan upang i-translate ang text na "Browse" sa HTML na may data-browseattribute na maaaring idagdag sa custom na input label (halimbawa sa Dutch):

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