Belajar Bootstrap Part 13 (Membuat Form dengan Bootstrap)

ASSALAMU'ALAIKUM Wr. Wb.

Membuat Form Dengan Bootstrap
Pada tutorial kali ini akan dijelaskan tentang bagaimana cara penulisan syntax, element - element HTML yang kita butuhkan untuk membuat form dengan Bootstrap, Bootstrap telah menyediakan class form yang menarik dan membaginya dalam tiga model, yaitu :

Form dengan model Vertikal
Form dengan model vertikal ini merupakan form default Bootstrap
Form dengan model Inline
Form dengan model inline adalh sebuah form yang label dan form inputnya terletak sebaris
Form dengan model Horizontal
Form dengan model horizontal merupakan form yang memiliki bentuk horizontal. Artinya posisi label dan input form terletak Horizontal

Untuk membuat form dengan Bootstrap sobat dapat menggunakan class "form-control" pada tag <input>, <textarea>, <select> dan element form yang bisa digunakan lainya.

Membuat Form Vertikal Dengan Bootstrap
Form vertikal Bootstrap merupakan bentuk default dari Bootstrap. Artinya bentuk form vertikal ini merupakan bentuk yang digunakan secara default oleh Bootstrap. Untuk membuat form dengan Bootstrap silahkan perheatikan contoh berikut

hasil

Perhatikan contoh form Bootstrap diatas. Untuk membuat form dengan Bootstrap pertama yang harus diperhatikan adalah tambahkan class "form-group" untuk membalut element sebuah form seperti label dan formnya. Kemudian kita berikan clas "form-control"

<div class="form-group">
<label>Nama Anda:</label>
<input type="text" class="form-control">
</div>

Tentu sangat mudah bukan? Karena sobat hanya perlu menambahkan class - class yang sudah disediakan oleh Bootstrap . Sedikit tambahan, untuk membuat tombol pada Bootstrap , kita telah mempelajarinya pada tutorial sebelumnya

Membuat Form Inline Dengan Bootstrap
Untuk membuat form inline dengan Bootstrap caranya cukup mudah. Sobat hanya perlu menambahkan class "form-inline" pada tag <form> Perhatikan contoh berikut

hasil

Membuat Form Horizoltal Dengan Boostrap
Cara membuat form horizontal dengan Bootstrap yaitu dengan memberikan class "form-horizontal" pada tag <form> Perhatikan contoh berikut

hasil

Oke akan saya jelaskan tentang pembuatan form Horizontal pada contoh diatas

<form class="form-horizontal">

Kita bisa menggunakan class "form-horizontal" pada tag <fom> kemudian pada label dan formatnya

<label class="control-label col-sm-2" for="nama">Nama Anda:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control">
                </div>

Disini untuk membuat form horizontal kira harus menggunakan grid sistem Bootstrap untuk menentukan letaknya. Mungkin bagi sobat yang belum mempelajari Grid System akan agak kebingungan, untuk tutorial Grid System akan kita pelajari pada tutorial selanjutnya.

Kita tidak hanya dapat memasukkan kode syntax input type text saja tetapi kita dapat memasukkan kode lain dan mengkreasikanya sendiri. Perhatikan contoh berikut