Rabu, 15 Maret 2017

Membuat Form dengan Bootstrap

   No comments

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.
wassalamualaikum.wr.wb

0 komentar:

Posting Komentar