Membuat Form dengan Bootstrap

Assallamuallaikum Wr Wb ,.
Halo kawan kawan , pada kesempatan kali ini saya akan melanjutkan pembahasan / tutorial penggunan Bootstrap. Pada kali ini kita akan membuat form / formulir menggunakan Bootstrap. Dalam membuat form dengan bootstrap maka tampilan dari form aka menjadi lebih menarik dan responsive.

Dalam membuat form dengan bootstrap kita tinggal memanggil parameter parameter yang sudah di sediakan oleh bootstrap. Di ba wah ini adalah contoh dari parameter parameter yang saya gunakan dalam membuat form dengan bootstrap kali ini:

class="form-group" digunakan untuk membuat group dari form
input type diguanakan untuk memilih dari tipe inputan
class="checkbox" diguanakan untuk inputan tipe checkbox
class="radio-inline" Digunakan untuk membuat input type radio dalam satu baris.
class="btn btn-success" untuk membuat button.

Di bawah ini adalah script dari contoh form yang saya buat menggunakan bootstrap.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Formulir Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css " href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style type="text/css">
      blockquote {
        font-size: 15px;
      }
      .container {
        font-family: raleway;
      }
  </style>
</head>
<body>
<div class="container">
  <h1><center>Formulir dengan Bootstrap</center></h1>
  <br>
  <div class="form-group">
    Nama : <input type="text" name="nama" class="form-control" placeholder="Nama Lengkap"> 
  </div>
  <div class="form-group">
    Tgl Lahir : <input type="text" name="nama" class="form-control" > 
  </div>
  <div class="form-group">
    Alamat : <textarea class="form-control" rows="5" id="alamat" placeholder="Alamat"> </textarea>
  </div>
  Pilih Jurusan :
  <blockquote>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Rekayasa Perangkat Lunak 
  </div>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Teknik Pemesinan
  </div>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Teknik Ototronik
  </div>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Teknik Pembuatan Kain
  </div>
  </blockquote>
  Jenis Kelamin :
  <br>
  <div class="radio-inline">
    <input type="radio" name="kelamin"> Laki-Laki
  </div> 
  <div class="radio-inline">
    <input type="radio" name="kelamin"> Perempuan
  </div>
  <br>
  <br>
  <div class="form-group">
  Tahun Lulus : 
      <select class="form-control" > 
        <option>2011/2012</option> 
        <option>2012/2013</option> 
        <option>2013/2014</option> 
        <option>2014/2015</option> 
        <option>2015/2016</option> 
      </select>
  </div>
  <center>
  <button type="button" class="btn btn-success">Kirim</button>
  <button type="button" class="btn btn-danger">Batal</button>
  </center>
</body>
</html>

Hasil run di browser

Karna form ini menggunakan bootstrap maka form akan bersifat responsive. Ketika di bukak di perangkat yang tampilanya lebih kecil maka otomatis menyesuaikan. seperti gambar di bawah ini.

KESIMPULAN

Bootstrap telah menyediakan class form yang responsive dan terlihat modern dan kita tinggal mengkreasikanya sesuai kita. Dan kita tidak memerlukan class yang begitu rumit dan sudah saya paparkan diatas.