Pada dasarnya, formulir adalah kumpulan beberapa bidang / field yang disatukan untuk mencapai tujuan pengiriman (submission). Formulir pendaftaran, formulir login, komentar, dan banyak lagi contohnya. Semua itu terdiri dari beberapa bidang yang dibutuhkan sebelum data dapat dikirimkan dengan menekan tombol.
Layout formulir dapat disesuaikan sesuai keperluan dan desain masing-masing situs (jika menampilkan di situs), begitupun pada Bootstrap. Bootstrap memiliki beberapa class formulir yang dapat dimanfaatkan untuk membangun sebuah form layout.
Membuat Layout Form Bootstrap
Bootstrap form layout terdiri dari 3 layout yaitu Vertical, Horizontal, dan Inline Form. Apapun jenis formnya, standard rules form Bootstrap adalah <div class="form-group"> ini dibutuhkan untuk mengoptimasi jarak pada form. Kemudian dilanjutkan dengan class-class yang dibutuhkan, seperti: form-control, input, dsb.
- Vertical Form
Ini adalah default form dari Bootstrap, jika kamu hanya menggunakan class default maka akan menjadikan sebuah form yang tersusun secara vertikal.
Baca Juga:
Ketika menambahkan elemen form lainnya ke dalam struktur form maka akan terus menambah ke bawah, berikut ini struktur kode vertical form:
<h2>Vertical Form (default) Bootstrap - Posciety</h2>
<form action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Masukkan email..." name="email">
</div>
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" class="form-control" id="nama" placeholder="Masukkan nama..." name="nama">
</div>
<div class="form-group">
<label for="katasandi">Kata Sandi:</label>
<input type="password" class="form-control" id="katasandi" placeholder="Masukkan kata sandi..." name="katasandi">
</div>
<div class="checkbox">
<label><input type="checkbox" name="centang"> Kotak Centang</label>
</div>
<button type="submit" class="btn btn-default">Kirim</button>
</form>
Pastikan kamu mengetahui input type standard HTML agar tidak kesulitan dalam membangun sebuah formulir.
- Horizontal Form
Horizontal form maksudnya adalah label (nama) suatu bidang dan bidangnya akan sejajar, berbeda dengan contoh Vertical Form di atas.
Field akan sejajar dengan label dari field tersebut seperti yang terlihat pada gambar.
<h2>Horizontal Form Bootstrap - Posciety</h2>
<form class="form-horizontal" action="">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Masukkan email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="nama">Nama:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nama" placeholder="Masukkan nama..." name="nama">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="katasandi">Kata Sandi:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="katasandi" placeholder="Masukkan kata sandi..." name="katasandi">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="cetang"> Kotak Centang</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Perbedaannya sangat terlihat jelas, pada tag form terdapat class form-horizontal yang akan secara otomatis membuat formulir grup di dalamnya sejajar horizontal antara label dan field. Pada Vertical Form, hanya menggunakan tag form saja tanpa class (default).
Pastikan kamu mengisi bagian label for=”INI” sama dengan name=”INI” pada input / field, menandakan bahwa si label terkait untuk field yang mana.
- Inline Form
Inline form adalah sebuah formulir yang tidak memiliki blok khusus, ia akan sejajar dalam barisan (row) yang sama, formulir jenis ini biasanya digunakan jika sebuah situs tidak memiliki ruang yang banyak.
<h2>Inline Form Bootstrap - Posciety</h2>
<form class="form-inline" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Masukkan email..." name="email">
</div>
<div class="form-group">
<label for="nama">Nama:</label>
<input type="email" class="form-control" id="nama" placeholder="Masukkan nama..." name="nama">
</div>
<div class="form-group">
<label for="katasandi">Password:</label>
<input type="password" class="form-control" id="katasandi" placeholder="Masukkan kata sandi..." name="katasandi">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Cara membuat Inline Form cukup tambahkan class form-inline di dalam tag form, secara otomatis Bootstrap akan generate bahwa ini adalah struktur yang disimpan dalam satu barisan. Dari kodingan di atas, akan terlihat seperti ini:
Terus menerus akan menambahkan ke kanan dengan jajar kiri, jika melebihi batas, bisa saja melompat ke bawah tapi kurang rapih. Inline Form hanya aktif pada layar lebar minimal 768px, jika lebar di bawah 768px maka akan membuatnya menyusun ke bawah (responsive).
Begitulah cara membuat formulir di Bootstrap, selanjutnya kamu bisa menerapkan di situs web untuk macam-macam keperluan dengan bidang formulir yang berbeda-beda. Pastikan juga kamu membuat label for=”” untuk setiap field, jika tidak, screen reader akan mengalami masalah dengan formulir.
Jika tidak ingin menggunakan label, kamu dapat menghilangkannya tapi screen reader tidak bisa diabaikan begitu saja. Kamu dapat mengatur label menggunakan class sr-only agar screen reader tidak mengalami masalah. Contoh:
<div class="form-group"> <label class="sr-only" for="email">Email:</label> <input type="email" class="form-control" id="email"> </div>
Terapkan class sr-only di dalam label untuk mencegah masalah antara screen reader dan formulir Bootstrap !
Masih bingung ? Lihat: Video tutorial cara membuat form Bootstrap.