Cara Membuat Form Dengan Menggunakan Bootstrap Untuk Website

Jeje   8:56 PM   Bootstrap, Developer, Website   Comment  

Sebuah form sangat dibutuhkan oleh sebagian besar website, terutama mereka yang bergerak di bidang e-commerce. Bila di wordpress, tentu kamu dapat menggunakan plugin untuk menampilkannya. Akan tetapi, bagaimana sih cara membuat sebuah form untuk website?. Mari kita simak artikel ini untuk lebih mengetahui cara membuat form dengan Bootstrap dengan mudah. 

Ini adalah salah satu contoh form yang dapat kamu temukan di setiap website yang ada.

Source code:  

 <div class="mb-1">
  <label class="form-label">Email </label>
  <input class="form-control" id="exampleFormControlInput1" placeholder="contoh@gmail.com" type="email" />
</div>
<div class="mb-1">
  <label class="form-label">Komentar</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="1"></textarea>
</div> 

Dalam form tersebut kamu akan membuat sebuah kolom yang berfungsi untuk diisi oleh calon customer bila form pada e-commerce. Selain untuk bidang e-commerce, form tersebut digunakan oleh para pembaca sebagai layanan berkomentar atau meninggalkan pesan. 

Size 

Dengan menggunakan bantuan Bootstrap, kamu akan lebih mudah untuk mengatur size atau ukuran dari form tersebut. Untuk code yang dapat kamu gunakan adalah .form-control-lg dan .form-control-sm. Untuk lg adalah large atau besar, sedangkan sm atau small adalah kecil. 

Source code :

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

File Input Form 

Selanjutnya adalah File input. Ini basanya diperlukan untuk menguload beberapa file kedalam website, baik itu tanda transfer, photo atau file lainnya. Untuk penampakan dari form file input ialah seperti;

Source code :

<div class="mb-1">
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

Untuk yang hanya ingin mengupload satu file, kamu bisa gunakan yang pertama, dan bila kamu ingin bisa mengupload langsung beberapa file sekaligus, gunakan yang kedua atau yang multiple. 

Readonly plain text

Jika ingin elemen <input readonly> dalam formulir kamu diberi gaya sebagai teks biasa, gunakan kelas .form-control-plaintext untuk menghapus gaya bidang formulir default dan selalu mempertahankan margin dan paddingnya. 

Source code :

 <div class="mb-3 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@example.com">
    </div>
  </div>
  <div class="mb-3 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> 

Itu adalah cara bagaimana untuk membuat serta mengontrol form dengan menggunakan Bootstrap untuk web.