Membuat Form dengan getbootstrap 4

Form adalah tempat dimana user yang melihat web dapat memberikan input / masukkan data, dalam membuat form bila dilakukan secara manual kita harus banyak menulis kode-kode css dalam mengatur perataan, besar kotak input, menyamakan label dan warnanya, tetapi apabila kita menggunakan class-class yang sudah disediakan oleh bootstrap akan jauh lebih mudah, khususnya dalam mengatur efek responsive

Membuat Form pada bootstrap

Langkah membuat file html dan css

  • Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
  • pilih menu File, new dan simpan dengan nama form.css
    • isi ketikan css seperti kode dibawah ini
.kiri, .kanan {   
  height: 1200px;
  color: white;
}  
.kiri  {   background-color: #53777A; } 
.kanan {   background-color: #542437; }
  • pilih menu File, new dan simpan dengan nama form.html
  • seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
  • beberapa kata kunci emmet:
    • ! (tanda seru)
    • meta:vp
    • link (arahkan ke 3 css, bootstrap, font-awesome, form.css)
    • script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)
  • pada bagian isi ketik
    • ketik perintah emmet berikut:
    • div.row>div.container-fluid>div.col-sm-6.kiri+div.col-sm-6.kanan
    • lalu tekan tab sehingga menjadi kode seperti dibawah ini
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 kiri">
      ...
    </div>
    <div class="col-sm-6 kanan">
      ...
    </div>
  </div>
</div>

Membuat Form sederhana dengan bootstrap

  • pada bagian kiri ketik urutan perintah emmet berikut:
  • form:post , tekan tab
  • buat input untuk nama
    • fieldset.form-group , tekan tab
    • label{nama} , tekan tab, pada bagian for isi dengan id-nama
    • input:t.form-control , tekan tab
    • pada bagian name isi dengan nama
  • pada bagian for isi dengan id-nama
  • buat input untuk email
  • cobalah membuat 1 form group lagi seperti langkah c sampai e tetapi tipenya bukan text tetapi email, dan namanya menjadi email
  • buat tombol submit
    • ketik: button:submit.btn.btn-lg.btn-info{Kirim} ,tekan tab
<h3>Componen form yang berguna</h3>
<form action="" method="post">
  <fieldset class="form-group">
    <label for="id-nama">Nama</label>
    <input type="text" name="nama" id="id-nama" class="form-control">
  </fieldset>
  <fieldset class="form-group">
    <label for="id-email">Email</label>
    <input type="email" name="email" id="id-email" class="form-control">
  </fieldset>
  <button type="submit" class="btn btn-lg btn-info">Kirim</button>
</form>

Membuat Form Horizontal dengan bootstrap

  • dibawah form yang telah dibuat pada langkah 6, ketik langkah berikut:
  • form:post.form-horizontal , tekan tab
  • membuat field nama
    • div.form-group.row
    • label.col-sm-2.form-control-label{Nama} , tekan tab , pada for ketik id-nama
    • div.col-sm-10 , tekan tab
    • input:t.form-control , tekan tab
    • pada bagian name isi dengan nama
    • pada bagian for isi dengan id-nama
    • buat input untuk email
  • cobalah membuat 1 form group lagi seperti sebelumnya tetapi tipenya bukan text tetapi email, dan namanya menjadi email
  • buat tombol submit, ketik perintah berikut:
    • button:submit.btn.btn-lg.btn-info{Kirim} ,tekan tab
<h3>Form Horizontal</h3>
<form action="#" method="post" class="form-horizontal">
  <div class="form-group row">
    <label for="id-nama" class="col-sm-2 form-control-label">Nama</label>   
    <div class="col-sm-10">
      <input type="text" name="nama" id="id-nama" class="form-control">  
    </div>
  </div>
  <div class="form-group row">
    <label for="id-email" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" name="email" id="id-email" class="form-control">
    </div>
  </div>
  <button type="submit" class="btn btn-lg btn-info">Kirim</button>
 </form>

Beberapa class lain yang berguna

  • lakukan copy paste kode html berikut pada kolom kanan
<h3>Componen form yang berguna</h3>
<form action="" method="post">
  <fieldset class="form-group">
    <label for="id-jenis-kelamin">Jenis Kelamin</label>
    ...
  </fieldset>
  <fieldset class="form-group">
    <label for="id-hobi">Hobi</label>
    ...
  </fieldset>
  <button type="submit" class="btn btn-lg btn-info">Kirim</button>
</form>
  • Anda dapat membuat dengan emmet / copy-paste kode yang ada pada kelasdigital.com
  • Pada bagian dibawah label jenis kelamin ketik perintah berikut:
    • (div.checkbox>label>input:radio[name="jenis-kelamin" value="p1"]{p1})*2
    • pada label hapus pilihan for=””
    • untuk p1 pertama ubah menjadi Laki-Laki
    • untuk P1 kedua ubah menjadi Perempuan
    • bila ingin memiliki 3 pilihan ubah angka 2 menjadi 3
    • secara default pilihan akan tampak kebawah, bila anda menginginkan pilihan ke samping (sebaris), maka pada perintah diatas gunakan (div.checkbox-inline>…)
  • pada bagian dibawah hobi, ketik perintah berikut:
    • (div.radio-inline>label>input:checkbox[name="hobi" value="p1"]{p1})*2
    • pada label hapus pilihan for=””

beberapa catatan lain

  • hampir semua elemen input selain radio button dan checkbox menggunakan class form-control untuk mengatur tampilannnya.
    • perhatikan contoh berikut input berupa select box
<fieldset class = "form-group">
  <label for = "name">Pilihan anda</label>
  <select name="makanan" multiple class = "form-control">
     <option>1. Soto</option>
     <option>2. Rawon</option>
     <option>3. Bakso</option>
  </select>
</fieldset>
  • untuk mengatur tinggi dari suatu input box dapat menggunakan class berikut:
    • input-lg dan input-sm misalnya
<fieldset class="form-group input-lg">
  ...
</fieldset>
  • untuk mengatur lebar dari suatu input dapat menggunakan teknik col-sm-...
    • pada contoh dibawah ini adalah 2 kotak input yang memiliki besar 5 kolom dan 3 kolom
<div class="row">
  <div class="col-sm-5">
    <input type="text" class="form-control" nama="kotak-satu">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" name="kotak-dua">
  </div>
</div>
  • kita dapat menggunakan class form-control-static untuk suatu tag untuk menyatakan suatu nilai
    • berikut contohnya:
<div class="form-group">
  <label class="col-xs-3 form-control-label">Username</label>
  <div class="col-xs-8">
    <p class="form-control-static">Bugsy</p>
  </div>
</div>
  • Berikut adalah hasil lengkap dari praktek ini