Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Tuesday, 18 April 2017

Belajar Bootstrap Part 13 Membuat Form Dengan Bootstrap

Assalamualaikum Wr. Wb.

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

PENGERTIAN

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.


LATAR BELAKANG

Belajar memanggil class class yang dibutuhkan dalam pembuatan sebuah form dengan menggunakan framework bootstrap.

MAKSUD & TUJUAN

Menghasilkan tampilan form yang menarik.

ALAT & BAHAN
  • Bootstrap
  • Text Editor
  • Browser
  • Laptop/PC

PEMBAHASAN



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>

 


Hasilnya
 

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

Mungkin itu dulu dari saya kurang lebihnya mohon maaf.

Syukron

Wassalamualaikum Wr. Wb.

Referensi

w3schools.com

No comments:

Post a Comment

Adbox