Bootstrap Part 13 : Membuat Form Dengan Bootstrap


Membuat Form Dengan Bootstrap

Sebelumnya pada tutorial belajar bootstrap part-part sebelumnya di www.malasngoding.com saya sudah menjelaskan tentang penggunaan macam-macam komponen bootstrap seperti membuat tombol dengan bootstrap, membuat atau mendesign table dengan bootstrap, membuat menu dropdown dengan bootstrap, list, pagination, breadcrumb dan banyak lagi lainnya. sehingga pada tutorial bootstrap part 13 ini akan di jelaskan tentang cara membuat form dengan bootstrap. bootstrap menyediakan class khusus lagi untuk mendesign form dan pastinya terlihat sangat modern dan bersih. membuat form dengan bootstrap

Pada tutorial ini akan di jelaskan tentang bagaimana cara penulisan syntax, element-element HTML yang kita butuhkan untuk membuat form dengan bootstrap, karena untuk mendapatkan hasil form yang menarik bootstrap telah membuat design form menjadi tiga model. yaitu:

  • Form dengan model vertikal
    form degan model vertikal ini merupakan form default bootstrap.
  • Form dengan model inline
    form dengan 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 <input>, <textarea>, <select> dan element form yang bisa di gunakan lainnya. baca di sini tentang cara membuat form dengan HTML.

Membuat form vertikal dengan bootstrap

Form vertikal bootstrap merupakan bentuk default dari form bootstrap. artinya bentuk form vertikal ini merupakan bentuk yang di gunakan secara default di bootstrap. untuk membuat form dengan bootstrap silahkan perhatikan contoh dan penjelasan berikut ini.

membuat form dengan bootstrap

membuat form dengan bootstrap

contoh form bootstrap di atas merupakan form dengan model default atau vertikal. untuk membuat form dengan bootstrap yang pertama harus di perhatikan adalah pertama tambahkan class “form-group” untuk membalut element sebuah form seperti label dan formnya. dan kemudian pada form berikan class “form-control”.

tentu sangat mudah bukan. karena anda hanya perlu menambahkan class-class yang sudah di sediakan oleh bootstrap untuk membuat form dengan bootstrap. sedikit tambahan lagi, untuk membuat tombol pada form bootstrap kita telah mempelajari tentang cara membuat tombol dengan bootstrap pada tutorial sebelumnya, jadi anda tinggal menyesuaikan sesuai keinginan anda saja.

silahkan baca tutorial bootstrap part 4 :  Membuat tombol dengan bootstrap.

Membuat Form Inline dengan Bootstrap

Cara membuat form inline dengan bootstrap cara nya juga sangat mudah. anda hanya perlu menambahkan class “form-inline” pada tag <form>

maka hasilnya akan seperti berikut

membuat form inline dengan bootstrap

membuat form inline dengan bootstrap

Membuat Form Horizontal dengan bootstrap

membuat form horizontal dengan bootstrap

membuat form horizontal dengan bootstrap

untuk membuat form horizontal seperti di atas anda bisa memperhatikan pada contoh di atas

kita bisa menggunakan class “form-horizontal” pada tag <form>. kemudian pada bagian label dan formnya

di sini untuk membuat form horizontal kita harus menggunakan sistem grid bootstrap untuk mentukan letaknya. mungkin jika anda belum mempelajari tentang system grid bootstrap akan agak membingungkan, untuk tutorial grid system bootstrap akan kita pelajari pada tutorial selanjutnya pengenalan grid system bootstrap untuk membuat halaman website yang responsive pada seluruh device.

See the Pen XXRpPd by Malas Ngoding (@malasngoding) on CodePen.0

sekian tutorial bootstrap part 13 : membuat form dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • membuat form dengan bootstrap
  • cara membuat form dengan bootstrap
  • membuat form bootstrap
  • cara buat form di bootstrap
  • Cara buat form dengan bootstrap
  • membuat form input dengan bootstrap
  • males koding bootstrap
  • cara mengatur ukuran form di bootstrap
  • membuat frame input dan output dengan bootstrap
  • form dwngan bottstrrap




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 4 Comments

Write a Comment

Your email address will not be published. Required fields are marked *