Membuat Form dengan Bootstrap

22 Aug 2016 13:33 2951 Hits 0 Comments
Munculkan form indah di webmu dengan bootstrap

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!

 

Tags Web Bootstrap

About The Author

Rijwan 42
Ordinary

Rijwan

Saya merupakan anak RPL yang bercita - cita membangun web sendiri juga menjadi ahli pemrograman serta komputer.

Comments

You need to be logged in to be able to post a comment. Click here to login
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel