Cara menggunakan bootstrap form

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

• Catatan Singkat
• Download
• Challenge

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
  

Framework Bootstrap terdiri dari file apa saja?

Bootstrap itu apa sih?

Apa itu Bootstrap 5?

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?