Tutorial Belajar Bootstrap 4 Part 19 – Mengatur Tampilan form dengan Bootstrap

Selamat datang di tutorial warungbelajar, masih dalam seri tutorial 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 :

Semisal kita simpan dengan nama full_width_form.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

  • form ditampilkan dengan menggunakan card, pembahasan card bisa dibaca didalam  cara membuat card dengan bootstrap karena itu form kita tulis diantara tag <div> dengan class card-body, perhatikan line 17
  • 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 :

Semisal kita simpan dengan nama inline_form.html, 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
  • checkbox
  • radio
  • 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 kami sebelumnya mengenai cara membuat form di html

untuk contoh penggunaannya adalah seperti berikut :

Semisal kita simpan dengan nama form_input.html, jika kita buka di browser maka hasilnya adalah :

Keterangan :

  • untuk membuat field form anda perlu membuat tag <div> 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 kami sebelumnya Membuat textarea di form HTML

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

Semisal kita simpan dengan nama textarea_bootstrap.html, 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 Checkbox dengan Bootstrap

Bootstrap juga menyediakan class yang bisa digunakan untuk bagian checkbox, jika anda belum mengetahui apa itu checkbox, bisa melihat tutorial kami sebelumnya mengenai cara membuat checkbox di form html.

Untuk contoh penggunaan skripnya adalah seperti berikut ini :

Semisal kita simpan dengan nama bootstrap_checkbox.html, maka hasilnya adalah :

Keterangan :

  • untuk membuat checkbox yang ditampilkan secara vertical anda perlu membuat tag <div> dengan class .form-check perhatikan pada line 15,20,25, berikutnya buat tag label dan tambahkan class .form-check-label perhatikan pada line 21,26,34, berikutnya buat tag <checkbox> dan tambahkan class form-check-input perhatikan line 17,22,27
  • untuk membuat checkbox yang ditampilkan secara horizontal anda perlu membuat tag <div> dengan class .form-check dan class  form-check-inline perhatikan pada line 33,38,43 berikutnya buat tag label dan tambahkan class .form-check-label perhatikan pada line 34,39,44, berikutnya buat tag <checkbox> dan tambahkan class form-check-input perhatikan line 35,40,45
  • Untuk disabled pada bagian checkbox tambahkan class disabled pada tag <div> perhatikan line 25, 43 lalu tambahkan attribute disabled pada tag <input> perhatikan line 27,45

 

 

Membuat Radio Button dengan Bootstrap

Bootstrap juga menyediakan class untuk membuat radio button, jika anda belum mengetahui apa itu radio button bisa melihat di tutorial kami sebelumnya, cara membuat radio button di HTML

Untuk contoh skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama radio_button_bootstrap.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

  • Untuk membuat radio button yang ditampilkan secara vertical anda perlu membuat tag <div> dengan class radio perhatikan line 15,18,21, didalam tag <div> </div> anda bisa menuliskan untuk skrip radio button, untuk disabled radio button anda perlu menambahkan attribute disabled pada tag <input>
  • Untuk membuat radio button yang ditampilkan secara horizontal anda perlu membuat tag <label> dengan class radio-inline perhatikan line 27,30,33 didalam tag <label> </label> anda bisa menuliskan untuk skrip radio button

 

 

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 kami sebelumnya cara membuat select box dengan bootstrap

Untuk contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama select_menu_bootstrap.html, lalu jika dibuka di bootstrap hasilnya :

Keterangan :

  • untuk membuat select menu anda perlu membuat tag <div> dan tambahkan class form-group perhatikan pada line 13
  • lalu buat tag <select> tambahkan class form-control, perhatikan line 15, 23
  • untuk membuat multiple select menu, silahkan tambahkan attribute multiple, perhatikan line 15, 23

 

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

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *