Membuat Form pada Bootstrap

Pada tutorial kali ini, kita akan membuat form pada bootstrap. Kebutuhan akan desain form yang menarik sangat mempengaruhi impresi pengunjung terhadap sistem webiste yang kita bangun. Untuk itu, bootstrap menawarkan beberapa pilihan dalam membuat sebuah form, sehingga kita dapat membuat form dengan berbagai teknik layout yang kita sukai. 

Bootstrap menyediakan tiga pilihan dalam pembuatan form :

• Pembuatan form secara vertikal (default)
• Pembuatan form secara in-line
• Pembuatan form secara horizontal

Bagian dasar Form

---

Untuk membentuk form, kita menambahkan elemen form dengan bentuk role yang ditambahkan kedalamnya.

<form role="form">
......
</form>

Namun penulisannya dapat juga ditulis  :

<form>
......
</form>

Dalam pembuatan form, kita sering menggunakan <div class ="form-group"> yang memiliki tujuan untuk memberikan jarak optimal terhadap margin-bottom dalam membungkus label dan input, seperti script dibawah ini :

<form>
  <div class="form-group">
    <label for="namaanda" class="control-label">Nama</label>
    <input type="text" class="form-control" id="namanda" placeholder="Nama anda">
  </div>
 
  <div class="form-group">
    <label for="namaorangtua" class="control-label">Nama Orangtua</label>
    <input type="text" class="form-control" id="namanda" placeholder="Nama Orangtua">
  </div>
</form>

Sehingga akan ditampilkan output seperti Gambar.1 dibawah ini :

Gambar.1

Jika anda menulinya tanpa menggunkan <div class ="form-group"> seperti contoh script dibawah ini :

<form>
    <label for="namaanda" class="control-label">Nama</label>
    <input type="text" class="form-control" id="namanda" placeholder="Nama anda">
    
    <label for="namaanda" class="control-label">Nama Orangtua</label>
    <input type="text" class="form-control" id="namanda" placeholder="Nama Orangtua">
</form>

Maka akan ditampilkan output yang jaraknya kurang maksimal seperti Gambar.2 dibawah ini:

Gambar.2

Perhatikan script pertama dan kedua, kita menggunakan class="form control". Tujuannya dari penggunaan form control tersebut adalah untuk mengatur atribut style dari input type menjadi lebih menarik, seperti width:100%, border-radius:4px, font-size:14px dsb.

Perhatikan contoh script berikut (tanpa menggunakan class="form control")

<form>
  <div class="form-group">
    <label for="namaanda" class="control-label">Nama</label>
    <input type="text" id="namanda" placeholder="Nama anda">
  </div>
 
  <div class="form-group">
    <label for="namaorangtua" class="control-label">Nama Orangtua</label>
    <input type="text" id="namanda" placeholder="Nama Orangtua">
  </div>
</form>

Maka tampilannya akan menjadi tidak beraturan seperti yang ditunjukkan oleh Gambar.3 dibawah ini :

Gambar.3

Class form control

---

Pada Bootstrap, class form control diterapkan terhadap :

• input
• textarea
• select

Jenis-jenis input pada Bootstrap

---

Bootstrap mendukung semua jenis input yang terdapat dalam HTML5 :

• text
• password
• date
• datetime-local
• week
• time
• month
• number
• email
• url
• search
• tel
• color

Contoh.1

Contoh berikut adalah implementasi dari jenis input untuk text dan password seprti script dibawah ini :

<form>
  <div class="form-group">
    <label for="username" >Username</label>
    <input type="text" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="password" >Password</label>
    <input type="password" class="form-control" id="namanda" placeholder="Password">
  </div>
</form>

Outputnya ditunjukkan oleh Gambar. 4 :

Gambar.4

Contoh.2

Contoh berikut adalah implementasi dari jenis input untuk : date, datetime-local, week, time, month, number dan color seperti script dibawah ini :

<form>
 <div class="form-group">
  <label for="tanggal" >Tanggal</label>
  <input type="date" class="form-control" id="tanggal">
 </div>
 <div class="form-group">
  <label for="tglwaktu" >Tanggal dan Waktu</label>
  <input type="datetime-local" class="form-control" id="tglwaktu">
 </div>
 <div class="form-group">
  <label for="minggu" >Minggu Ke-</label>
  <input type="week" class="form-control" id="minggu">
 </div>
 <div class="form-group">
  <label for="waktu" >Waktu</label>
  <input type="time" class="form-control" id="waktu">
 </div>
 <div class="form-group">
  <label for="bulan" >Bulan</label>
  <input type="month" class="form-control" id="bulan">
 </div>
 <div class="form-group">
  <label for="number" >Number</label>
  <input type="number" class="form-control" id="number">
 </div>
 <div class="form-group">
  <label for="warna" >Warna</label>
  <input type="color" class="form-control" id="warna>
 </div>
</form>

Outputnya ditunjukkan oleh Gambar.5 dibawah ini :

Gambar.5

Sebelumnya   Berikutnya

Referensi

---

1. Tutorialspoint, "Boostrap - Forms", [online], (http://www.tutorialspoint.com/bootstrap/bootstrap_forms.htm, diakses tanggal 22 Januari 2015).
2. Bootstrap, "Forms", [online], (http://getbootstrap.com/css/#forms, diakses tanggal 22 Januari 2015).
3. W3Schools, "Bootstrap Form Inputs", (http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asphttp://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp,diakses tanggal 22 Januari 2015)