Tutorial Form pada Bootstrap 4

Mengatur Tampilan form dengan Bootstrap

Selamat datang di  seri tutorial belajar  bootstrap 4, dalam tutorial kali ini kita akan membahas mengenai cara mengatur tampilan form dengan menggunakan bootstrap.

Form adalah elemen yang sangat penting yang ada dalam aplikasi berbasis web, dimana dengan form ini user dalam melakukan interaksi dengan aplikasi, seperti proses input edit dll.

Baik kita mulai saja beberapa hal yang bisa digunakan untuk mengatur tampilan form dengan menggunakan bootstrap 4

 

Layout Form pada Bootstrap 4

Bootstrap 4 memberikan 2 pilihan layout yang bisa digunakan untuk mengatur tampilan dari form, layout tersebut antara lain :

• Stacked (full-width) form
• Inline form

kita akan bahas satu – persatu untuk layout form tersebut.

 

Stacked (full-width) from

Jenis layout ini digunakan untuk menampilkan form dengan tampilan full-width, istilah full width disini adalah menggunakan keseluruhan ukuran lebar untuk menampilkan form, untuk contoh penggunaan dari layout ini perhatikan skrip dibawah ini :

            

Lalu kita buka di browser maka hasilnya adalah :

           

Keterangan :

• form ditampilkan dengan menggunakan card, pembahasan card bisa dibaca didalam http://www.plimbi.com/article/175187/tutorial-membuat-panel-dengan-bootstrap karena itu form kita tulis diantara tag div dengan class card-body, perhatikan line 16
• Masing – masing bagian form kita tulis diantara tag div dengan class form-group, perhatikan untuk bagian nama diantara line 18 – 21, email diantara line 22 – 25, dan password diantara line 26 – 29

 

Inline Form Bootstrap

Inline Form ini digunakan untuk membuat layout form secara horizontal, jadi form akan ditampilkan secara mendatar, untuk contohnya perhatikan skrip dibawah ini :

         

Lalu kita buka hasilnya :

         

Keterangan :

• Form akan ditampilkan dalam bentuk horizontal, hal tersebut karena kita menambahkan class form-inline pada tag form perhatikan line 17
• lalu dimasing – masing bagian form tidak perlu kita letakkan di antara tag div class=”form-group” seperti pada bagian full-width sebelumnya
• Inline form hanya bisa ditampilkan jika layar device yang mengakses lebarnya minimal 576 pixel, jika kurang dari itu maka form akan ditampilkan secara vertical

 

Form Input Bootstrap 4

Dalam bagian sebelumnya kita sudah belajar membuat layout pada bagian form, bootstrap mensupport beberapa Form input seperti :

• input
• textarea
• select

kita akan membahasnya satu persatu kita mulai dari bagian form dengan tipe input.

 

Membuat Input Form dengan Bootstrap

Penggunaan input pada form, caranya seperti membuat form biasa, yang membedakan adalah kita perlu menambahkan class form-control, jika anda belum mengetahui mengenai form input, bisa baca tutorial mengenai cara membuat  form di html

untuk contoh penggunaannya adalah seperti berikut :

       

,jika kita buka di browser maka hasilnya adalah :

       

Keterangan :

• untuk membuat field form anda perlu membuat tag
  dengan class form-group, seperti pada line 15 dan 19
• lalu tambahkan class form-control pada tag <input /> perhatikan pada line 17 dan 21

 

 

Membuat Textarea dengan bootstrap

Pembahasan textarea pada html, bisa dibaca di tutorial mengenai membuat text area di html

Secara konsep caranya sama yaitu dengan menambahkan class form-control pada tag textarea, contoh penggunaannya adalah sebagai berikut :

     

lalu kita buka di browser maka hasilnya :

   

Keterangan :

• untuk membuat text area anda hanya perlu menambahkan class form-control pada tag textarea, seperti pada line 17

Membuat Select Menu dengan bootstrap

Bootstrap juga menyediakan class yang bisa digunakan untuk bagian select menu, jika anda belum mengetahui mengenai select menu, bisa membaca tutorial mengenai cara membuat select box dengan bootstrap

Untuk contoh perhatikan skrip dibawah ini :

     

Jika kita jalankan maka hasilnya

       

Baik sekian dulu teman – teman tutorial mengenai pembuatan form dengan menggunakan bootstrap, jika ada yang ingin didiskusikan silahkan tinggalkan jejak kalian dikolom komentar, sekian dulu sampai jumpa di tutorial bootstrap selanjutnya.