Wednesday, December 9, 2020

Cara Membuat Form Dengan Menggunakan Bootstrap Untuk Website

Cara Membuat Form Dengan Menggunakan Bootstrap Untuk Website

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. 

Foorm website


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. 

form bootstrap

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;
File input

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. 

form bootstrap

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.


EmoticonEmoticon