Setelah sebelumnya saya telah memposting beberapa tutorial bootstrap mulai dari penginstalan bootstrap, membuat table, memanipulasi gambar dan mendesain tombol dengan menggunakan framework ini, kali ini saya akan kembali berbagi ilmu cara untuk membuat form lebih indah dengan bootstrap.
Bootstrap telah menyediakan banyak class bagi web desainer untuk mendesain form agar terlihat lebih modern dan juga bersih tentunya.
Pada tutorial ini akan saya jelaskan tentang bagaimana penulisan syntax, element – element HTML yang kita butuhkan untuk membuat form dengan bootstrap. Untuk mendapatkan hasil yang terbaik dalam mendesain form, bootstrap telah menyediakan 3 model yaitu:
- Form dengan model vertikal
Form degan model vertikal ini merupakan form default bootstrap. - Form dengan model inline
Formdengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris. - Form dengan model horizontal
Form dengan model horizontal ini merupakan form yang memiliki bentuk horizontal. artinya posisi label dan input form terletak horizontal.
Untuk membuat form dengan menggunakan class bootstrap, Anda bisa menggunakan class form-control pada tag – tag dan element form yang sering digunakan seperti tag input, tag textarea, tag select dan yang lainnya.
Membuat form model vertical dengan bootstrap
Form model vertical bootstrap merupakan form bentuk default dari bootstrap, artinya form ini merupakan form bawaan yang digunaklan secara default di bootstrap. Untuk membuat form model default atau vertical silakan Anda perhatikan skrip berikut:
Hasil dari skrip diatas adalah:
Untuk membuat form dengan bootstrap, yang pertama harus diperhatikan adalah menambahkan class form-group untuk membalut element sebuah form menjadi seperti label dan formnya. Kemudian dalam form berikan class form-control.
Untuk lebih jelasnya perhatikan skrip berikut:
Sangat mudah bukan? Tentu saja mudah karena bootstrap telah menyediakan class – class untuk membuat form jadi kita tinggal menambahkan saja class – clas  tersebut.
Untuk tombol pada form, saya sudah memposting cara memperindah button bootstrap pada tutorial sebelumnya jadi tinggal sesuaikan dengan keinginan Anda saja.
Silakan klik link ini untuk belajar button bootstrap http://goo.gl/82TrTh
Membuat form model inline dengan bootstrap
Cara membuat form model inline dengan bootstrap caranya juga sangat mudah, Anda hanya perlu menambahkan class form-inline pada tag form.
Berikut contoh dari form model inline.
Jika dijalankan, script diatas akan menghasilkan tampilan sebagai berikut:
Membuat form model horizontal dengan bootstrap
Untuk membuat form model horizontal, Anda bisa memperhatikan contoh berikut.
Script diatas akan menghasilkan tampilan sebagai berikut.
Untuk membuat form model horizontal, Anda dapat menggunakan class form-horizontal pada tag form. Dan pada bagian label beserta formnya harus menggunakan grid system untuk menentukan letaknya. Perhatikan contoh berikut:
Class col-sm-2 pada label dan class col-sm-10 pada tag div merupakan cara penggunaan grid system. Grid system berfungsi untuk membuat halaman website menjadi responsive pada seluruh perangkat. Untuk lebih jelasnya akan saya bahas lain kali.
Demikian artikel ini saya buat, mudah – mudahan bermanfaat dan selamat mencoba!
Â
