Form Bootstrap 4 – Form adalah salah satu komponen paling penting pada sebuah website. tanpa tampilan form yang bersih dan rapi tentu desain website lain juga akan menjadi kurang maksimal.

Bootstrap sudah menyediakan berbagai class yang bisa langsung kita terapkan pada form html.

Baca :

• Tutorial HTML Part 11 : Membuat From Pada HTML
• Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap

Form Bootstrap 4

Pada tutorial bootstrap 4 ini kita akan membahas tentang komponen form yang sudah disediakan pada bootstrap. pastikan teman-teman sudah mengerti tentang pengertian bootstrap dan cara penggunaan dasarnya seperti cara menghubungkannya dan cara penggunaan dasarnya.

Jika teman-teman belum membaca cara penggunaannya, silahkan teman-teman baca pada tutorial bootstrap 4 sebelumnya.

Yang akan kita bahas pada tutorial form bootstrap 4 ini diantaranya adalah :

• Form Control
• Form Group
• Form Upload
• Ukuran Form
• Checkbox dan Radio
• Form Grid (Responsive)
• Form Horizontal

Kita mulai pembahasan dari urutan yang pertama, yaitu Form Control Bootstrap.

Form Control

Untuk menerapkan form bootstrap ke form biasa yang kita buat, kita bisa menggunakan class .form-control.

Class .form-control ini bisa kita gunakan pada elemen <input>, <select> .. </select> dan <textarea> .. </textarea>.

Tentu pasti teman-teman sudah familiar dengan elemen form yang disebutkan di atas, jika belum silahkan teman-teman baca tutorial cara membuat form pada html yang sudah pernah dibahas pada tutorial dasar HTML sebelumnya.

Perhatikan contoh pembuatan form menggunakan class .form-control bootstrap 4 berikut.

Seperti yang dijelaskan di atas, kita tinggal menggunakan class .form-control pada form seperti contoh di atas.

Jika kita jalankan maka hasilnya akan seperti berikut.

membuat form dengan bootstrap 4

Seperti yang terlihat pada gambar di atas, form tampil dengan desain form bootstrap.

Form Group

Form group di sini dimaksudkan kita bisa memisahkan masing-masing form dan sekalian kita buat label untuk masing-masing form.

Untuk membuat label kita bisa membuatnya dengan menggunakan elemen <label> .. </label>.

Selanjutnya bagian formnya, tinggal kita terapkan class .form-control seperti contoh sebelumnya.

Kemudian kedua elemen ini kita letakkan di dalam elemen <div> yang kita beri class .form-group. perhatikan contoh berikut.

Maka hasilnya akan seperti berikut.

contoh form group bootstrap 4

Maka tampil label atau nama untuk masing-masing form dengan rapi seperti contoh gambar di atas.

Form Upload

Tidak hanya form biasa seperti di atas, bootstrap juga menyediakan class untuk diterapkan pada form upload, perhatikan contoh berikut.

Ada 2 jenis form upload pada contoh di atas. yaitu form upload model biasa, dan satunya lagi form upload yang sudah di custom.

Jika kita jalankan pada browser maka hasilnya seperti berikut.

form upload bootstrap

Pada form upload yang pertama, cara membuatnya hampir sama dengan cara membuat form yang sudah dijelaskan pada sub judul sebelumnya yaitu tentang form group.

Bedanya hanya pada class yang kita buat, pada form upload yang pertama class nya adalah .form-control-file.

Pada form upload yang kedua,  yaitu form custom, class yang digunakan pada form adalah .custom-file-input, kemudian class yang kita buat pada label nya adalah .custom-file-label.

Kemudian kedua elemen tersebut dibalut dalam elemen <div> .. </div> yang kita beri class .custom-file.

Cukup mudah bukan ?

Ukuran Form Bootstrap

Bootstrap juga menyediakan class untuk membuat pengaturan ukuran form. untuk mengubah ukuran form pada bootstrap, kita bisa menambahkan class berikut beriringan dengan class .form-control.

• .form-control-sm untuk membuat form yang berukuran kecil.
• .form-control-lg untuk membuat form yang berukuran besar.

Perhatikan contoh berikut.

Dan hasilnya.

mengubah ukuran form bootstrap

Form Checkbox dan Radio

Untuk mengkustom tampilan form checkbox dan radio, perhatikan contoh checkbox dan radio menggunakan bootstrap berikut.

Kita tinggal menambahkan class .control-custom-input pada form radio dan form checkbox. seperti contoh di atas.

Kita juga bisa membuat form checkbox atau radio yang berbentuk inline atau posisinya sebaris dengan form lainnya, dengan cara menambahkan class .custom-control-inline.

Hasilnya

form control checkbox dan radio

Form Grid Responsive

Grid System bootstrap juga bisa kita terapkan pada form. dengan tujuan untuk mengatur lebar dari masing-masing form.

Silahkan baca lagi tentang tutorial grid system bootstrap 4 yang sebelumnya sudah kita bahas.

Caranya cukup mudah, perhatikan contoh berikut.

Untuk mengatur grid masing-masing form, silahkan buat class .form-row pada baris form sesuai keinginan, kemudian pada masing-masing form-group, buat .col-* sesuai dengan ukuran form yang ingin dibuat.

Pastikan teman-teman sudah membaca tutorial sebelumnya tentang grid system bootstrap, agar tutorial ini lebih mudah teman-teman pahami,

Jika kita jalankan, maka hasilnya akan seperti berikut.

form grid bootstrap

Sesuai seperti yang kita buat pada contoh syntax di atas tadi, pada row pertama kita menerapkan class col-md-6 pada form nama dan form username, sehingga ukuran nya akan terbagi 2 dari 12 grid.

Row kedua pada form di atas, masing-masing form yaitu nama ayah, pekerjaan ayah dan alamat ayah kita beri class col-md-4, sehingga hasilnya 12/4=3. akan ada 3 kolum form seperti di atas.

Form Horizontal

Form horizontal pada bootstrap adalah form yang label nya terletak disebelah kiri, perhatikan contoh berikut.

Jalankan pada browser.

form bootstrap 4

Untuk membuat form horizontal seperti di atas caranya cukup mudah, kita masih menggunakan grid system bootstrap. bagian label kita beri col-sm-2, dan sisanya yaitu col-sm-10 kita beri pada bagian form.

Jika teman-teman ingin membaca lebih lengkap tentang komponen form pada bootstrap, teman-teman bisa baca di https://getbootstrap.com/docs/4.3/components/forms/

Silahkan download source code dan melihat demo nya pada link berikut.

Download Source Code

Demo