Source

Formulir

Conto lan pedoman panggunaan kanggo gaya kontrol formulir, opsi tata letak, lan komponen khusus kanggo nggawe macem-macem formulir.

Ringkesan

Kontrol formulir Bootstrap nggedhekake gaya formulir Reboot karo kelas. Gunakake kelas kasebut kanggo milih tampilan sing disesuaikan kanggo rendering sing luwih konsisten ing browser lan piranti.

Pesthekake nggunakake typeatribut sing cocog ing kabeh input (contone, emailkanggo alamat email utawa numberinformasi numerik) kanggo njupuk kauntungan saka kontrol input sing luwih anyar kayata verifikasi email, pilihan nomer, lan liya-liyane.

Punika conto cepet kanggo nduduhake gaya formulir Bootstrap. Terus maca kanggo dokumentasi babagan kelas sing dibutuhake, tata letak formulir, lan liya-liyane.

Kita ora bakal nuduhake email sampeyan karo wong liya. 
<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>

Kontrol formulir

Kontrol wangun tekstual-kaya <input>s, <select>s, lan <textarea>s-ditata karo .form-controlkelas. Kalebu gaya kanggo tampilan umum, status fokus, ukuran, lan liya-liyane.

Aja manawa kanggo njelajah wangun adat kita kanggo gaya luwih <select>s.

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

Kanggo input file, ganti .form-controlmenyang .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>

ukuran

Setel dhuwur nggunakake kelas kaya .form-control-lglan .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>

Namung diwaca

Tambah readonlyatribut boolean ing input kanggo nyegah modifikasi nilai input. Input mung diwaca katon luwih entheng (kaya input sing dipateni), nanging tetep kursor standar.

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

Waca teks biasa

Yen sampeyan pengin duwe <input readonly>unsur ing wangun gaya minangka teks kosong, gunakake .form-control-plaintextkelas kanggo mbusak gaya lapangan formulir standar lan ngreksa wates lan padding sing bener.

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

Input Range

Setel input kisaran sing bisa digulung kanthi horisontal nggunakake .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>

Kothak lan radio

Kothak lan radio standar ditambahake kanthi bantuan .form-check, kelas siji kanggo loro jinis input sing nambah tata letak lan prilaku unsur HTML . Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar, dene radio kanggo milih siji opsi saka akeh.

kothak centhang lan radio dipatèni didhukung. Atribut disabledkasebut bakal ngetrapake warna sing luwih entheng kanggo nuduhake status input.

Kotak centhang lan tombol radio ndhukung validasi formulir adhedhasar HTML lan menehi label sing ringkes lan bisa diakses. Dadi, <input>s lan <label>s kita minangka unsur sedulur minangka lawan saka <input>ing a <label>. Iki rada luwih verbose amarga sampeyan kudu nemtokake idlan foratribut kanggo nggandhengake <input>lan <label>.

Default (ditumpuk)

Kanthi gawan, sawetara kothak centhang lan radio sing dadi sedulur langsung bakal ditumpuk vertikal lan diwenehi jarak kanthi .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>

Inline

Klompok kothak centhang utawa radio ing baris horisontal sing padha kanthi nambahake .form-check-inline..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>

Tanpa label

Tambah .position-staticmenyang input .form-checksing ora ana teks label. Elinga yen isih menehi sawetara wujud label kanggo teknologi bantu (contone, nggunakake 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>

Tata letak

Wiwit Bootstrap ditrapake display: blocklan width: 100%meh kabeh kontrol formulir, formulir bakal ditumpuk kanthi vertikal. Kelas tambahan bisa digunakake kanggo macem-macem tata letak iki ing basis saben wangun.

Nggawe kelompok

Kelas .form-groupminangka cara paling gampang kanggo nambah sawetara struktur menyang formulir. Iki nyedhiyakake kelas fleksibel sing nyengkuyung klompok label, kontrol, teks pitulung opsional, lan olahpesen validasi formulir. Kanthi gawan, iku mung ditrapake margin-bottom, nanging njupuk gaya tambahan yen .form-inlineperlu. Gunakake karo <fieldset>s, <div>s, utawa meh wae unsur liyane.

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

Bentuk kothak

Wangun sing luwih rumit bisa dibangun kanthi nggunakake kelas kothak. Gunakake iki kanggo tata letak formulir sing mbutuhake pirang-pirang kolom, jembar sing beda-beda, lan opsi keselarasan tambahan.

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

Formulir baris

Sampeyan uga bisa ngganti .rowkanggo .form-row, variasi saka baris kothak standar kita sing overrides talang kolom standar kanggo noto tighter lan luwih kompak.

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

Tata letak sing luwih rumit uga bisa digawe nganggo sistem kothak.

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

Bentuk horisontal

Nggawe formulir horisontal kanthi kothak kanthi nambahake .rowkelas kanggo mbentuk grup lan nggunakake .col-*-*kelas kanggo nemtokake jembar label lan kontrol sampeyan. Pesthekake kanggo nambah .col-form-labelmenyang <label>s uga supaya lagi vertikal tengah karo kontrol wangun gadhah sing.

Kadhangkala, sampeyan bisa uga kudu nggunakake utilitas margin utawa padding kanggo nggawe keselarasan sampurna sing sampeyan butuhake. Contone, kita wis mbusak padding-toplabel input radio sing ditumpuk kanggo luwih nyelarasake garis dasar teks.

Radios
kothak centhang 
<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>
Ukuran label formulir horisontal

Dadi manawa kanggo nggunakake .col-form-label-smutawa .col-form-label-lgkanggo <label>s utawa <legend>s kanggo bener tindakake ukuran .form-control-lglan .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>

Ukuran kolom

Kaya sing dituduhake ing conto sadurunge, sistem kothak ngidini sampeyan nyelehake nomer .cols ing a .rowutawa .form-row. Padha bakal pamisah jembaré kasedhiya merata antarane wong-wong mau. Sampeyan uga bisa milih subset saka kolom kanggo njupuk luwih utawa kurang spasi, dene .cols isih padha pamisah liyane, karo kelas kolom tartamtu kaya .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>

Ukuran otomatis

Conto ing ngisor iki nggunakake utilitas flexbox kanggo vertikal tengah isi lan owah-owahan .colsupaya .col-autokolom sampeyan mung njupuk akeh spasi yen perlu. Kanthi cara liya, ukuran kolom kasebut dhewe adhedhasar isi.

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

Sampeyan banjur bisa nyampur maneh karo kelas kolom khusus ukuran.

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

Lan mesthi kontrol wangun adat didhukung.

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

Formulir inline

Gunakake .form-inlinekelas kanggo nampilake seri label, kontrol formulir, lan tombol ing baris horisontal siji. Kontrol formulir ing formulir inline rada beda karo status standar.

  • Kontrol yaiku display: flex, ngrusak spasi putih HTML lan ngidini sampeyan nyedhiyakake kontrol keselarasan karo keperluan spasi lan flexbox .
  • Kontrol lan grup input nampa width: autokanggo ngganti standar Bootstrap width: 100%.
  • Kontrol mung katon inline ing viewport sing ambane paling sethithik 576px kanggo akun viewports sing sempit ing piranti seluler.

Sampeyan bisa uga kudu kanthi manual alamat jembaré lan Alignment saka kontrol wangun individu karo keperluan spasi (minangka kapacak ing ngisor iki). Pungkasan, manawa sampeyan tansah nyakup a <label>karo saben kontrol formulir, sanajan sampeyan kudu ndhelikake saka pengunjung non-screenreader kanthi .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>

Kontrol lan pilihan formulir khusus uga didhukung.

<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>
Alternatif kanggo label sing didhelikake

Teknologi bantu kayata maca layar bakal duwe masalah karo formulir sampeyan yen sampeyan ora nyakup label kanggo saben input. Kanggo formulir inline iki, sampeyan bisa ndhelikake label nggunakake .sr-onlykelas. Ana cara alternatif liyane kanggo nyedhiyakake label kanggo teknologi bantu, kayata aria-label, aria-labelledbyutawa titleatribut. Yen ora ana siji-sijine, teknologi pitulung bisa nggunakake placeholderatribut kasebut, yen ana, nanging elinga yen nggunakake placeholderminangka panggantos kanggo metode label liyane ora disaranake.

Teks bantuan

Teks bantuan tingkat blok ing formulir bisa digawe nggunakake .form-text(sadurunge dikenal .help-blocking v3). Teks bantuan inline bisa dileksanakake kanthi fleksibel nggunakake unsur HTML inline lan kelas utilitas kaya .text-muted.

Nggayutake teks pitulung karo kontrol formulir

Teks pitulung kudu digandhengake kanthi jelas karo kontrol formulir sing ana gandhengane karo nggunakake aria-describedbyatribut kasebut. Iki bakal mesthekake yen teknologi pitulung-kayata layar maca-bakal ngumumake teks bantuan iki nalika pangguna fokus utawa mlebu kontrol.

Teks bantuan ing ngisor iki bisa ditata nganggo .form-text. Kelas iki kalebu display: blocklan nambah sawetara wates ndhuwur kanggo gampang spasi saka input ndhuwur.

Tembung sandhi sampeyan kudu dawane 8-20 karakter, ngemot huruf lan angka, lan ora ngemot spasi, karakter khusus, utawa 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>

Teks inline bisa nggunakake unsur HTML inline sing khas (kaya <small>, <span>, utawa liya-liyane) kanthi ora luwih saka kelas sarana.

Dawane kudu 8-20 karakter. 
<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>

Formulir sing dipatèni

Tambah disabledatribut boolean ing input kanggo nyegah interaksi pangguna lan nggawe katon luwih entheng.

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

Tambah disabledatribut menyang a <fieldset>mateni kabeh kontrol ing.

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

Kanthi gawan, browser bakal nganggep kabeh kontrol wangun asli ( <input>, <select>lan <button>unsur) ing njero <fieldset disabled>minangka dipatèni, nyegah interaksi keyboard lan mouse. Nanging, yen formulir sampeyan uga kalebu <a ... class="btn btn-*">unsur, iki mung bakal diwenehi gaya pointer-events: none. Kaya sing kacathet ing bagean babagan status dipatèni kanggo tombol (lan khusus ing sub-bagean kanggo unsur anchor), properti CSS iki durung standar lan durung didhukung kanthi lengkap ing Internet Explorer 10, lan ora bakal nyegah pangguna keyboard dadi. bisa fokus utawa ngaktifake pranala kasebut. Supaya aman, gunakake JavaScript khusus kanggo mateni tautan kasebut.

Kompatibilitas lintas-browser

Nalika Bootstrap bakal ngetrapake gaya kasebut ing kabeh browser, Internet Explorer 11 lan ing ngisor iki ora ndhukung disabledatribut kasebut kanthi lengkap <fieldset>. Gunakake JavaScript khusus kanggo mateni set lapangan ing browser kasebut.

Validasi

Nyedhiyakake umpan balik sing migunani lan bisa ditindakake kanggo pangguna kanthi validasi formulir HTML5– kasedhiya ing kabeh browser sing didhukung . Pilih saka umpan balik validasi standar browser, utawa laksanakake pesen khusus karo kelas sing dibangun lan JavaScript wiwitan.

Saiki disaranake nggunakake gaya validasi khusus, amarga pesen validasi standar browser asli ora terus-terusan kapapar teknologi bantu ing kabeh browser (utamane, Chrome ing desktop lan seluler).

Cara kerjane

Mangkene carane validasi formulir bisa digunakake karo Bootstrap:

  • Validasi formulir HTML ditrapake liwat rong kelas pseudo CSS, :invalidlan :valid. Iku ditrapake kanggo <input>, <select>, lan <textarea>unsur.
  • Bootstrap nyakup gaya :invalidlan gaya menyang kelas :validinduk , biasane ditrapake ing . Yen ora, kolom sing dibutuhake tanpa nilai bakal katon ora sah nalika mbukak kaca. Kanthi cara iki, sampeyan bisa milih kapan arep ngaktifake (biasane sawise pengajuan formulir dicoba)..was-validated<form>
  • Kanggo ngreset tampilan formulir (contone, ing kasus kiriman formulir dinamis nggunakake AJAX), mbusak .was-validatedkelas saka <form>maneh sawise pengajuan.
  • Minangka fallback, .is-invalidlan .is-validkelas bisa digunakake tinimbang pseudo-kelas kanggo validasi sisih server . Dheweke ora mbutuhake .was-validatedkelas wong tuwa.
  • Amarga alangan babagan cara CSS bisa digunakake, kita ora bisa (saiki) ngetrapake gaya menyang a <label>sing sadurunge kontrol formulir ing DOM tanpa bantuan JavaScript khusus.
  • Kabeh browser modern ndhukung API validasi kendala , seri metode JavaScript kanggo validasi kontrol formulir.
  • Pesen umpan balik bisa uga nggunakake standar browser (beda kanggo saben browser, lan ora bisa diatur liwat CSS) utawa gaya umpan balik khusus kita kanthi HTML lan CSS tambahan.
  • Sampeyan bisa menehi pesen validitas khusus setCustomValiditying JavaScript.

Kanthi atine, nimbang demo ing ngisor iki kanggo gaya validasi formulir khusus, kelas sisih server opsional, lan standar browser.

Gaya khusus

Kanggo pesen validasi formulir Bootstrap khusus, sampeyan kudu nambah novalidateatribut boolean menyang <form>. Iki mateni tooltip umpan balik standar browser, nanging isih menehi akses menyang API validasi formulir ing JavaScript. Coba kirim formulir ing ngisor iki; JavaScript kita bakal nyegat tombol kirim lan ngirim umpan balik kanggo sampeyan. Nalika nyoba ngirim, sampeyan bakal weruh :invalidlan :validgaya sing ditrapake kanggo kontrol formulir.

Gaya umpan balik khusus ngetrapake warna, wates, gaya fokus, lan lambang latar mburi khusus kanggo menehi umpan balik sing luwih apik. Lambang latar mburi kanggo <select>s mung kasedhiya karo .custom-select, lan ora .form-control.

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

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

Default browser

Ora kasengsem ing pesen umpan balik validasi khusus utawa nulis JavaScript kanggo ngganti prilaku formulir? Kabeh apik, sampeyan bisa nggunakake standar browser. Coba kirim formulir ing ngisor iki. Gumantung ing browser lan OS sampeyan, sampeyan bakal weruh gaya umpan balik sing rada beda.

Nalika gaya umpan balik iki ora bisa ditata nganggo CSS, sampeyan isih bisa ngatur teks umpan balik liwat JavaScript.

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

Sisih server

Disaranake nggunakake validasi sisih klien, nanging yen sampeyan mbutuhake validasi sisih server, sampeyan bisa nunjukake kolom formulir sing ora bener lan bener karo .is-invalidlan .is-valid. Elinga yen .invalid-feedbackuga didhukung karo kelas kasebut.

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

Unsur sing didhukung

Gaya validasi kasedhiya kanggo kontrol lan komponen formulir ing ngisor iki:

  • <input>s lan <textarea>s karo .form-control(kalebu nganti siji .form-controling grup input)
  • <select>s karo .form-controlutawa.custom-select
  • .form-checks
  • .custom-checkboxs lan .custom-radios
  • .custom-file
Mangga ketik pesen ing textarea.
Tuladha teks umpan balik sing ora bener
Conto liyane teks umpan balik sing ora bener
Conto saran pilihan khusus sing ora bener
Conto umpan balik file khusus sing ora bener 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

Tooltips

Yen tata letak formulir sampeyan ngidini, sampeyan bisa ngganti .{valid|invalid}-feedbackkelas kanggo .{valid|invalid}-tooltipkelas kanggo nampilake umpan balik validasi ing tooltip gaya. Priksa manawa sampeyan duwe wong tuwa position: relativesing ana kanggo posisi tooltip. Ing conto ing ngisor iki, kelas kolom kita wis duwe, nanging proyek sampeyan mbutuhake persiyapan alternatif.

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

Ngatur

Negara validasi bisa disesuaikan liwat Sass nganggo $form-validation-statespeta. Dumunung ing _variables.scssfile kita, peta Sass iki diubengi kanggo ngasilake status standar valid/ invalidvalidasi. Kalebu peta nested kanggo ngatur warna lan lambang saben negara. Nalika ora ana negara liya sing didhukung dening browser, sing nggunakake gaya khusus bisa kanthi gampang nambah umpan balik formulir sing luwih rumit.

Wigati dimangerteni manawa kita ora nyaranake nyetel nilai kasebut tanpa ngowahi 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));
}

Wangun khusus

Kanggo kustomisasi lan konsistensi browser sing luwih akeh, gunakake unsur formulir khusus kanggo ngganti standar browser. Dibangun ing ndhuwur markup semantik lan bisa diakses, dadi panggantos sing kuat kanggo kontrol formulir standar.

Kothak lan radio

Saben kothak centhang lan radio <input>lan <label>pasangan wis kebungkus ing <div>kanggo nggawe kontrol adat kita. Secara struktural, iki minangka pendekatan sing padha karo standar kita .form-check.

Kita nggunakake pamilih sedulur ( ~) kanggo kabeh <input>negara kita - kaya - kanggo :checkedgaya indikator formulir khusus kita. Nalika digabungake karo .custom-control-labelkelas, kita uga bisa gaya teks kanggo saben item adhedhasar <input>'s negara.

Kita ndhelikake standar <input>karo opacitylan nggunakake .custom-control-labelkanggo mbangun Indikator wangun adat anyar ing panggonan karo ::beforelan ::after. Sayange, kita ora bisa mbangun adat saka mung <input>amarga CSS contentora bisa digunakake ing unsur kasebut.

Ing negara sing wis dicenthang, kita nggunakake lambang SVG sing ditempelake base64 saka Open Iconic . Iki menehi kontrol paling apik kanggo gaya lan posisi ing browser lan piranti.

kothak centhang

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

Kothak centhang khusus uga bisa nggunakake :indeterminatekelas pseudo nalika disetel kanthi manual liwat JavaScript (ora ana atribut HTML sing kasedhiya kanggo nemtokake).

Yen sampeyan nggunakake jQuery, kaya iki kudu cukup:

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

Radios

<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

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

dipatèni

Kothak lan radio khusus uga bisa dipateni. Tambah disabledatribut boolean menyang <input>lan indikator khusus lan deskripsi label bakal ditata kanthi otomatis.

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

Ngalih

Saklar nduweni tandha kothak centhang khusus nanging nggunakake .custom-switchkelas kasebut kanggo nggawe saklar pilihan. Ngalih uga ndhukung disabledatribut.

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

Pilih menu

Menu <select>khusus mung butuh kelas khusus, .custom-selectkanggo micu gaya khusus. Gaya khusus diwatesi ing <select>tampilan awal lan ora bisa ngowahi <option>s amarga watesan 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>

Sampeyan uga bisa milih saka pilihan khusus cilik lan gedhe kanggo cocog karo input teks ukuran sing padha.

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

Atribut multipleuga didhukung:

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

Minangka sizeatribut kasebut:

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

Range

Gawe <input type="range">kontrol khusus nganggo .custom-range. Trek (latar mburi) lan jempol (nilai) loro-lorone ditata supaya katon padha ing browser. Amarga mung IE lan Firefox sing ndhukung "ngisi" trek saka kiwa utawa tengen jempol minangka sarana kanggo nuduhake kemajuan kanthi visual, saiki kita ora ndhukung.

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

input Range duwe nilai implisit kanggo minlan max- 0lan 100, mungguh. Sampeyan bisa nemtokake nilai anyar kanggo sing nggunakake atribut minlan .max

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

Kanthi gawan, sawetara input "snap" menyang nilai integer. Kanggo ngganti iki, sampeyan bisa nemtokake stepnilai. Ing conto ing ngisor iki, kita pindho jumlah langkah kanthi nggunakake 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

Plugin sing disaranake kanggo animasi input file khusus: bs-custom-file-input , sing saiki digunakake ing dokumen kita.

Input file sing paling gnarly saka Bunch lan mbutuhake JavaScript tambahan yen sampeyan pengin pancing munggah karo fungsi Pilih file… lan milih jeneng file teks.

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

Kita ndhelikake file standar <input>liwat opacitylan tinimbang gaya <label>. Tombol digawe lan dipanggonke karo ::after. Pungkasan, kita ngumumake a widthlan heighting <input>kanggo spasi sing tepat kanggo isi lingkungan.

Nerjemahake utawa ngatur senar nganggo SCSS

Kelas :lang()pseudo digunakake kanggo ngidini nerjemahake teks "Browse" menyang basa liya. Ganti utawa tambahake entri menyang $custom-file-textvariabel Sass kanthi tag basa sing cocog lan senar sing dilokalisasi. Senar Inggris bisa disesuaikan kanthi cara sing padha. Contone, iki carane sampeyan bisa nambah terjemahan Spanyol (kode basa Spanyol yaiku es):

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

Mangkene lang(es)tumindak ing input file khusus kanggo terjemahan Spanyol:

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

Sampeyan kudu nyetel basa dokumen sampeyan (utawa subtree) kanthi bener supaya teks sing bener ditampilake. Iki bisa ditindakake kanthi nggunakake atribut langing unsur <html>utawa Content-Languageheader HTTP , ing antarane cara liyane.

Nerjemahake utawa ngatur senar nganggo HTML

Bootstrap uga menehi cara kanggo nerjemahake teks "Browse" ing HTML kanthi data-browseatribut sing bisa ditambahake menyang label input khusus (umpamane ing basa Walanda):

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