Membuat Form Menggunakan Bootstrap

Hallo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat form menggunakan Bootstrap 3. Didalam Bootstrap 3, terdapat 3 tampilan form yaitu :

1. Vertical Form ( Default )

2. Inline Form

3. Horizontal Form

Yang pertama kita akan membahas tampilan Vertical Form.

Vertikal Form ( Default )

Atribut yang perlu ditambahkan sebagai berikut :

-  Tambahkan role=”form” didalam tag <form>.

-  Tambahkan div dengan class form-group yang membungkus setiap label dan control seperti input, radio, select, checkbox, dan lain-lainnya.

-  Tambahkan class form-control pada setiap inputan seperti input, textarea, select, dan lain-lainnya.

Berikut adalah Script HTML nya :

Jika dijalankan dibrowser maka hasilnya seperti gambar dibawah ini :

Inline Form

Untuk tampilan inline form kalian bisa menambahkan class form-inline didalam tag <form>, contonya seperti gambar dibawah ini :

Jika kita jalankan dibrowser maka hasilnya seperti gambar dibawah ini :

Horizontal Form

Dan yang terakhir adalah tampilan Horizontal Form, tampilan horizontal form hampir sama dengan tampilan vertical form. Atribut yang perlu ditambahkan adalah :

-  Class form-horizontal didalam tag <form>.

-  Tambahkan class control-label pada setiap tag <table>.

Berikut adalah script HTML nya :

Jika kita jalankan dibrowser maka hasilnya seperti gambar dibawah ini :

Download Source