Source

Formulir

Contoh dan panduan penggunaan untuk gaya kontrol formulir, opsi tata letak, dan komponen kustom untuk membuat berbagai macam formulir.

Ringkasan

Kontrol formulir Bootstrap memperluas gaya formulir Reboot kami dengan kelas. Gunakan kelas ini untuk memilih tampilan yang disesuaikan untuk rendering yang lebih konsisten di seluruh browser dan perangkat.

Pastikan untuk menggunakan typeatribut yang sesuai pada semua input (misalnya, emailuntuk alamat email atau numberuntuk informasi numerik) untuk memanfaatkan kontrol input yang lebih baru seperti verifikasi email, pemilihan nomor, dan banyak lagi.

Berikut adalah contoh cepat untuk mendemonstrasikan gaya formulir Bootstrap. Teruslah membaca untuk dokumentasi tentang kelas yang diperlukan, tata letak formulir, dan banyak lagi.

Kami tidak akan pernah membagikan email Anda kepada orang lain. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-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 bentuk tekstual—seperti <input>s, <select>s, dan <textarea>s—digayakan dengan .form-controlkelas. Termasuk adalah gaya untuk penampilan umum, status fokus, ukuran, dan banyak lagi.

Pastikan untuk menjelajahi formulir khusus kami untuk gaya lebih lanjut <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>

Untuk input file, tukar .form-controluntuk .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>

Perekat

Atur ketinggian menggunakan kelas seperti .form-control-lgdan .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>

Baca saja

Tambahkan readonlyatribut boolean pada input untuk mencegah modifikasi nilai input. Input read-only tampak lebih ringan (seperti input yang dinonaktifkan), tetapi tetap menggunakan kursor standar.

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

Hanya baca teks biasa

Jika Anda ingin <input readonly>elemen dalam formulir Anda ditata sebagai teks biasa, gunakan .form-control-plaintextkelas untuk menghapus gaya bidang formulir default dan mempertahankan margin dan padding yang benar.

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

Kotak centang dan radio

Kotak centang dan radio default ditingkatkan dengan bantuan .form-check, satu kelas untuk kedua jenis input yang meningkatkan tata letak dan perilaku elemen HTML mereka . Kotak centang adalah untuk memilih satu atau beberapa opsi dalam daftar, sedangkan radio untuk memilih satu opsi dari banyak opsi.

Kotak centang dan radio yang dinonaktifkan didukung, tetapi untuk memberikan not-allowedkursor saat mengarahkan kursor ke induk <label>, Anda harus menambahkan disabledatribut ke .form-check-input. Atribut yang dinonaktifkan akan menerapkan warna yang lebih terang untuk membantu menunjukkan status input.

Penggunaan kotak centang dan radio dibuat untuk mendukung validasi formulir berbasis HTML dan memberikan label yang ringkas dan mudah diakses. Dengan demikian, <input>s dan <label>s kami adalah elemen saudara yang bertentangan dengan an <input>di dalam a <label>. Ini sedikit lebih bertele-tele karena Anda harus menentukan iddan foratribut untuk menghubungkan <input>dan <label>.

Default (bertumpuk)

Secara default, sejumlah kotak centang dan radio yang merupakan saudara langsung akan ditumpuk secara vertikal dan diberi spasi yang sesuai dengan .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 disabled">
  <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>

Di barisan

Kelompokkan kotak centang atau radio pada baris horizontal yang sama dengan menambahkan .form-check-inlineke sembarang .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

Tambahkan .position-staticke input di dalamnya .form-checkyang tidak memiliki teks label. Ingatlah untuk tetap memberikan beberapa bentuk label untuk teknologi bantu (misalnya, menggunakan 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

Karena Bootstrap berlaku display: blockdan width: 100%untuk hampir semua kontrol formulir kami, formulir secara default akan menumpuk secara vertikal. Kelas tambahan dapat digunakan untuk memvariasikan tata letak ini berdasarkan per-form.

Bentuk grup

Kelas .form-groupadalah cara termudah untuk menambahkan beberapa struktur ke formulir. Ini menyediakan kelas fleksibel yang mendorong pengelompokan label, kontrol, teks bantuan opsional, dan pesan validasi formulir yang tepat. Secara default ini hanya berlaku margin-bottom, tetapi mengambil gaya tambahan .form-inlinesesuai kebutuhan. Gunakan dengan <fieldset>s, <div>s, atau hampir semua elemen lainnya.

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

Bentuk kisi-kisi

Bentuk yang lebih kompleks dapat dibangun menggunakan kelas grid kami. Gunakan ini untuk tata letak formulir yang memerlukan beberapa kolom, lebar bervariasi, dan opsi perataan 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>

Baris formulir

.rowAnda juga dapat menukar .form-row, variasi baris kisi standar kami yang menggantikan talang kolom default untuk tata letak yang lebih rapat dan lebih ringkas.

<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 yang lebih kompleks juga dapat dibuat dengan sistem grid.

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

Bentuk horisontal

Buat formulir horizontal dengan kisi dengan menambahkan .rowkelas untuk membentuk grup dan menggunakan .col-*-*kelas untuk menentukan lebar label dan kontrol Anda. Pastikan untuk menambahkan s .col-form-labelAnda <label>juga sehingga mereka dipusatkan secara vertikal dengan kontrol formulir yang terkait.

Terkadang, Anda mungkin perlu menggunakan utilitas margin atau padding untuk membuat keselarasan sempurna yang Anda butuhkan. Misalnya, kami telah menghapus padding-toplabel input radio bertumpuk untuk menyelaraskan garis dasar teks dengan lebih baik.

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

Pastikan untuk menggunakan .col-form-label-smatau .col-form-label-lgke <label>s atau <legend>s Anda untuk mengikuti ukuran .form-control-lgdan .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

Seperti yang ditunjukkan pada contoh sebelumnya, sistem grid kami memungkinkan Anda untuk menempatkan sejumlah .cols dalam .rowatau .form-row. Mereka akan membagi lebar yang tersedia secara merata di antara mereka. Anda juga dapat memilih subset kolom Anda untuk mengambil lebih banyak atau lebih sedikit ruang, sementara sisa .cols membagi sisanya secara merata, dengan kelas kolom tertentu seperti .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

Contoh di bawah ini menggunakan utilitas flexbox untuk memusatkan konten secara vertikal dan mengubahnya .colsehingga .col-autokolom Anda hanya menggunakan ruang sebanyak yang diperlukan. Dengan kata lain, ukuran kolom itu sendiri berdasarkan isinya.

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

Anda kemudian dapat mencampurnya sekali lagi dengan 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>

Dan tentu saja kontrol formulir khusus didukung.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" 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 sebaris

Gunakan .form-inlinekelas untuk menampilkan serangkaian label, kontrol formulir, dan tombol pada satu baris horizontal. Kontrol formulir dalam formulir sebaris sedikit berbeda dari status defaultnya.

  • Kontrolnya adalah display: flex, menciutkan ruang putih HTML apa pun dan memungkinkan Anda memberikan kontrol perataan dengan utilitas spasi dan flexbox .
  • Kontrol dan grup input menerima width: autountuk mengganti default Bootstrap width: 100%.
  • Kontrol hanya muncul sebaris di area pandang yang lebarnya minimal 576 piksel untuk memperhitungkan area pandang yang sempit di perangkat seluler.

Anda mungkin perlu menangani lebar dan perataan kontrol formulir individual secara manual dengan utilitas spasi (seperti yang ditunjukkan di bawah). Terakhir, pastikan untuk selalu menyertakan a <label>dengan setiap kontrol formulir, bahkan jika Anda perlu menyembunyikannya dari pengunjung non-pembaca layar dengan .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 dan pemilihan formulir kustom juga didukung.

<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 untuk label tersembunyi

Teknologi bantu seperti pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap masukan. Untuk formulir sebaris ini, Anda dapat menyembunyikan label menggunakan .sr-onlykelas. Ada metode alternatif lebih lanjut untuk memberikan label untuk teknologi bantu, seperti aria-label, aria-labelledbyatau titleatribut. Jika tidak ada yang hadir, teknologi bantu dapat menggunakan placeholderatribut, jika ada, tetapi perhatikan bahwa penggunaan placeholdersebagai pengganti metode pelabelan lain tidak disarankan.

teks bantuan

Teks bantuan tingkat blok dalam formulir dapat dibuat menggunakan .form-text(sebelumnya dikenal sebagai .help-blockdi v3). Teks bantuan sebaris dapat diimplementasikan secara fleksibel menggunakan elemen HTML sebaris dan kelas utilitas seperti .text-muted.

Mengaitkan teks bantuan dengan kontrol formulir

Teks bantuan harus secara eksplisit dikaitkan dengan kontrol formulir yang terkait dengan penggunaan aria-describedbyatribut. Ini akan memastikan bahwa teknologi bantu—seperti pembaca layar—akan mengumumkan teks bantuan ini saat pengguna memfokuskan atau memasuki kontrol.

Teks bantuan di bawah input dapat ditata dengan .form-text. Kelas ini menyertakan display: blockdan menambahkan beberapa margin atas untuk memudahkan jarak dari input di atas.

Kata sandi Anda harus terdiri dari 8-20 karakter, berisi huruf dan angka, dan tidak boleh mengandung spasi, karakter khusus, atau 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 sebaris dapat menggunakan elemen HTML sebaris apa pun (baik itu a <small>, <span>, atau yang lainnya) dengan tidak lebih dari kelas utilitas.

Panjangnya harus 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 yang dinonaktifkan

Tambahkan disabledatribut boolean pada input untuk mencegah interaksi pengguna dan membuatnya tampak lebih ringan.

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

Tambahkan disabledatribut ke a <fieldset>untuk menonaktifkan semua kontrol di dalamnya.

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

Secara default, browser akan memperlakukan semua kontrol bentuk asli ( <input>, <select>dan <button>elemen) di dalam a <fieldset disabled>sebagai dinonaktifkan, mencegah interaksi keyboard dan mouse pada keduanya. Namun, jika formulir Anda juga menyertakan <a ... class="btn btn-*">elemen, elemen ini hanya akan diberi gaya pointer-events: none. Seperti disebutkan di bagian tentang status dinonaktifkan untuk tombol (dan khususnya di sub-bagian untuk elemen jangkar), properti CSS ini belum distandarisasi dan tidak sepenuhnya didukung di Opera 18 dan di bawahnya, atau di Internet Explorer 10, dan dimenangkan 't mencegah pengguna keyboard untuk dapat fokus atau mengaktifkan link ini. Jadi untuk amannya, gunakan JavaScript khusus untuk menonaktifkan tautan tersebut.

Kompatibilitas lintas-browser

Sementara Bootstrap akan menerapkan gaya ini di semua browser, Internet Explorer 11 dan di bawahnya tidak sepenuhnya mendukung disabledatribut pada file <fieldset>. Gunakan JavaScript khusus untuk menonaktifkan fieldset di browser ini.

Validasi

Berikan umpan balik yang berharga dan dapat ditindaklanjuti kepada pengguna Anda dengan validasi formulir HTML5– tersedia di semua browser yang kami dukung . Pilih dari umpan balik validasi default browser, atau terapkan pesan khusus dengan kelas bawaan dan JavaScript pemula kami.

Kami sangat menyarankan gaya validasi khusus karena default browser asli tidak diumumkan ke pembaca layar.

Bagaimana itu bekerja

Inilah cara kerja validasi formulir dengan Bootstrap:

  • Validasi formulir HTML diterapkan melalui dua kelas semu CSS, :invaliddan :valid. Ini berlaku untuk <input>, <select>, dan <textarea>elemen.
  • Bootstrap mencakup :invaliddan :validgaya ke kelas induk .was-validated, biasanya diterapkan ke <form>. Jika tidak, bidang wajib apa pun tanpa nilai akan ditampilkan sebagai tidak valid pada pemuatan halaman. Dengan cara ini, Anda dapat memilih kapan harus mengaktifkannya (biasanya setelah pengiriman formulir dicoba).
  • Sebagai fallback, .is-invaliddan .is-validkelas dapat digunakan sebagai ganti kelas semu untuk validasi sisi server . Mereka tidak memerlukan .was-validatedkelas induk.
  • Karena kendala dalam cara kerja CSS, kami tidak dapat (saat ini) menerapkan gaya ke a <label>yang muncul sebelum kontrol formulir di DOM tanpa bantuan JavaScript khusus.
  • Semua browser modern mendukung API validasi kendala , serangkaian metode JavaScript untuk memvalidasi kontrol formulir.
  • Pesan umpan balik dapat menggunakan default browser (berbeda untuk setiap browser, dan tidak dapat diubah gayanya melalui CSS) atau gaya umpan balik khusus kami dengan HTML dan CSS tambahan.
  • Anda dapat memberikan pesan validitas khusus setCustomValiditydalam JavaScript.

Dengan mengingat hal itu, pertimbangkan demo berikut untuk gaya validasi formulir kustom kami, kelas sisi server opsional, dan default browser.

Gaya kustom

Untuk pesan validasi formulir Bootstrap kustom, Anda harus menambahkan novalidateatribut boolean ke file <form>. Ini menonaktifkan tooltips umpan balik default browser, tetapi masih menyediakan akses ke API validasi formulir di JavaScript. Coba kirimkan formulir di bawah ini; JavaScript kami akan mencegat tombol kirim dan menyampaikan umpan balik kepada Anda.

Saat mencoba mengirim, Anda akan melihat :invaliddan :validgaya diterapkan ke kontrol formulir Anda.

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

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

Default peramban

Tidak tertarik dengan pesan umpan balik validasi khusus atau menulis JavaScript untuk mengubah perilaku formulir? Semua baik, Anda dapat menggunakan browser default. Coba kirimkan formulir di bawah ini. Tergantung pada browser dan OS Anda, Anda akan melihat gaya umpan balik yang sedikit berbeda.

Meskipun gaya umpan balik ini tidak dapat ditata dengan CSS, Anda masih dapat menyesuaikan teks umpan balik melalui 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" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Sisi server

Kami menyarankan untuk menggunakan validasi sisi klien, tetapi jika Anda memerlukan sisi server, Anda dapat menunjukkan bidang formulir yang tidak valid dan valid dengan .is-invaliddan .is-valid. Perhatikan bahwa .invalid-feedbackjuga didukung dengan kelas-kelas ini.

Kelihatan bagus!
Kelihatan bagus!
@
Silakan pilih nama pengguna.
Harap berikan kota yang valid.
Harap berikan status yang valid.
Harap berikan zip yang valid.
Anda harus setuju sebelum mengirimkan. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elemen yang didukung

Formulir contoh kami menunjukkan s tekstual asli <input>di atas, tetapi gaya validasi formulir juga tersedia untuk kontrol formulir kustom kami.

Contoh teks umpan balik tidak valid
Lebih banyak contoh teks umpan balik yang tidak valid
Contoh umpan balik pemilihan khusus yang tidak valid
Contoh umpan balik file khusus yang tidak valid 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

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

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

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

Keterangan alat

Jika tata letak formulir Anda mengizinkannya, Anda bisa menukar .{valid|invalid}-feedbackkelas dengan .{valid|invalid}-tooltipkelas untuk menampilkan umpan balik validasi dalam tip alat bergaya. Pastikan untuk memiliki induk position: relativeuntuk pemosisian tooltip. Pada contoh di bawah, kelas kolom kami sudah memilikinya, tetapi proyek Anda mungkin memerlukan penyiapan alternatif.

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

Formulir khusus

Untuk lebih banyak penyesuaian dan konsistensi lintas browser, gunakan elemen formulir kustom sepenuhnya kami untuk menggantikan default browser. Mereka dibangun di atas markup semantik dan dapat diakses, jadi mereka adalah pengganti yang solid untuk kontrol formulir default apa pun.

Kotak centang dan radio

Setiap kotak centang dan radio dibungkus dengan a <div>dengan saudara kandung <span>untuk membuat kontrol khusus kami dan a <label>untuk teks yang menyertainya. Secara struktural, ini adalah pendekatan yang sama dengan default kami .form-check.

Kami menggunakan pemilih saudara ( ~) untuk semua <input>status kami—seperti :checked—untuk menata dengan benar indikator formulir kustom kami. Saat digabungkan dengan .custom-control-labelkelas, kita juga dapat menata teks untuk setiap item berdasarkan status <input>'.

Kami menyembunyikan default <input>dengan opacitydan menggunakan .custom-control-labeluntuk membangun indikator formulir kustom baru di tempatnya dengan ::beforedan ::after. Sayangnya kami tidak dapat membuat yang khusus hanya dari <input>karena CSS contenttidak berfungsi pada elemen itu.

Dalam status yang dicentang, kami menggunakan ikon SVG tertanam base64 dari Open Iconic . Ini memberi kami kontrol terbaik untuk penataan gaya dan pemosisian di seluruh browser dan perangkat.

kotak centang

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

Kotak centang khusus juga dapat menggunakan :indeterminatekelas semu saat diatur secara manual melalui JavaScript (tidak ada atribut HTML yang tersedia untuk menentukannya).

Jika Anda menggunakan jQuery, sesuatu seperti ini sudah cukup:

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

Radio

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

Di barisan

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

Dengan disabilitas

Kotak centang dan radio khusus juga dapat dinonaktifkan. Tambahkan disabledatribut boolean ke <input>dan indikator kustom serta deskripsi label akan ditata secara otomatis.

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

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

Pilih menu

Menu khusus <select>hanya membutuhkan kelas khusus, .custom-selectuntuk memicu gaya khusus.

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

Anda juga dapat memilih dari pilihan kustom kecil dan besar untuk mencocokkan input teks kami yang berukuran sama.

<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 multiplejuga didukung:

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

Seperti sizeatributnya:

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

Peramban berkas

Input file adalah yang paling kasar dan membutuhkan JavaScript tambahan jika Anda ingin menghubungkannya dengan file Choose fungsional… dan teks nama file yang dipilih.

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

Kami menyembunyikan file default <input>melalui opacitydan sebagai gantinya menata file <label>. Tombol dibuat dan diposisikan dengan ::after. Terakhir, kami mendeklarasikan a widthdan heightpada <input>untuk spasi yang tepat untuk konten di sekitarnya.

Menerjemahkan atau menyesuaikan senar

Kelas :lang()semu digunakan untuk memungkinkan terjemahan teks "Jelajahi" ke bahasa lain. Ganti atau tambahkan entri ke $custom-file-textvariabel Sass dengan tag bahasa yang relevan dan string yang dilokalkan. String bahasa Inggris dapat dikustomisasi dengan cara yang sama. Misalnya, berikut cara menambahkan terjemahan bahasa Spanyol (kode bahasa Spanyol adalah es):

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

Berikut lang(es)tindakan pada input file khusus untuk terjemahan bahasa 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>

Anda harus mengatur bahasa dokumen Anda (atau subpohonnya) dengan benar agar teks yang benar dapat ditampilkan. Ini dapat dilakukan dengan menggunakan atribut langpada elemen <html>atau Content-Languageheader HTTP , di antara metode lainnya.