Cara membuat form responsive dengan bootstrap

Bootstrap adalah sebuah framework css yang sangat popular (hingga saat artikel ini ditulis) yang secara sengaja dibuat dan dikembangkan oleh para mastah dengan tujuan untuk mempermudah pembuatan desain website. Karena bootstrap adalah Framework maka bootstrap telah dilengkapi berbagai fitur dan kelebihan misalnya adalah responsive design yang artinya ketika menggunakan bootstrap (dengan benar) website yang kita buat memiliki kemampuan menyesuaikan dengan lebar layar monitor, sebagai contoh kalian bisa mengecilkan dengan menggeser-geser sudut window browser kalian, maka desain website ONPHPID akan berubah bentuk. Saat ini bootrtap telah mencapai versi 3.3.7 dan saat ini (saat artikel ini ditulis) Bootstrap tengah mengembangkan Bootstrap Versi yang ke 4 yang rumornya akan lebih mengoptimalkan fitur responsive khususnya pada versi mobile.

Namun ditutorial ini kita belum akan membahas Bootstrap 4 karena kali ini kita akan membahas tentang macam-macam bentuk from yang dapat dibuat dengan bootstrap sebagai salah satu fitur yang ditawarkan framework CSS Bootstrap dan hal inipun akan kaitan dengan bagaimana membuat form login, register dan form-form lain di tutorial selanjutnya.

Macam Macam Form dalam Boostrap

Agar kita bisa membuat form dengan bootsrap maka kita diharuskan mengetahui macam-macam form default yang ada didalam bootsrtap, dan didalam tutorial bootstrap inilah akan kita bahas form-form tersebut. Secara default di dalam bootsrtap terdapat tiga macam model form yang dapat langsung kita gunakan diantaranya :

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

  

    

      ...
    




    

      ...
    
  

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

Componen form yang berguna

  

    Nama
    
  
  

    Email
    
  
  Kirim

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

Form Horizontal

  

    Nama   
    

        
    
  

  

    Email
    

      
    
  

  Kirim
 

Beberapa class lain yang berguna

• lakukan copy paste kode html berikut pada kolom kanan

Componen form yang berguna

  

    Jenis Kelamin
    ...
  
  

    Hobi
    ...
  
  Kirim

• 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

  Pilihan anda
  
     
     
     
  

• untuk mengatur tinggi dari suatu input box dapat menggunakan class berikut:
  • input-lg dan input-sm misalnya

  ...

• 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

• kita dapat menggunakan class form-control-static untuk suatu tag untuk menyatakan suatu nilai

  Username
  

    
Bugsy
  

• Berikut adalah hasil lengkap dari praktek ini
  

Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?

Kelas apa yang digunakan dalam bootstrap untuk membuat bentuk gambar menjadi lingkaran?

Apa itu Bootstrap 5?