Cara Membuat Form di Bootstrap

24 February 2016
Pembahasan kali ini mengenai cara membuat form (blangko isian) di Bootstrap. Form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol. Ok, kita langsung ke TKP aja.

Form standar

    Aturan standar untuk membuat form di Bootstrap adalah sebagai berikut:
    1. Tambahkan role="form" pada elemen <form> (membantu meningkatkan aksesibilitas untuk orang-orang yang menggunakan screen readers)
    2. Bungkus label dan form kontrol dalam elemen <div> dengan class="form-group" (diperlukan untuk mengoptimalkan jarak)
    3. Tambahkan class="form-control" pada elemen tekstual seperti <input>, <textarea> dan <select>
    Berikut format pembuatan form standar:
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="form-group">
        <label for="pwd">Kata Sandi:</label>
        <input type="password" class="form-control" id="pwd">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Ingat saya</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    Hasilnya seperti ini:

Kelas <form>

  1. .form-inline
    Kelas ini berguna untuk membentuk form dalam 1 baris. (hanya berlaku pada viewport dengan lebar minimal 768px)
    Formatnya seperti ini:
    <form class="form-inline" role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="pwd">Kata Sandi:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Ingat saya</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
     </form>
    Hasilnya:
  2. .form-horizontal
    Kelas ini berguna untuk membentuk form dalam 1 baris. (hanya berlaku pada viewport dengan lebar minimal 768px)
    Formatnya seperti ini:
    <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="pwd">Kata Sandi:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Ingat saya</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
     </form>
    Hasilnya:

Kontrol pendukung

  1. Inputs
    Hampir seluruh kontrol form berupa bidang masukan berbasis teks. Termasuk dukungan untuk semua jenis HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel dan color. Input akan berjalan dengan baik jika kita menambahkan jenis yang dibutuhkan pada elemen input dengan type. Lebih jelasnya, anda bisa lihat contoh dibawah ini:
    <form role="form">
        <div class="form-group">
          <label for="text">Teks:</label>
          <input type="text" class="form-control">
        </div>
    </form>

    <form role="form">
        <div class="form-group">
          <label for="date">Tanggal:</label>
          <input type="date" class="form-control">
        </div>
    </form>

    <form role="form">
        <div class="form-group">
          <label for="time">Waktu:</label>
          <input type="time" class="form-control">
        </div>
    </form>

  2. Area teks
    Untuk membuat kontrol form dengan beberapa baris teks, gunakan atribut rows. Aturlah berapa jumlah baris yang dibutuhkan.
    <form role="form">
        <div class="form-group">
          <label for="text">Keterangan:</label>
          <textarea class="form-control" rows="3"></textarea>
        </div>
    </form>

  3. Checkbox dan radio
    Dengan checkbox, kita bisa memilih lebih dari 1 pilihan. Sedangkan radio, kita hanya bisa memilih 1 saja dari sekian banyak pilihan.
    Kita juga bisa menonaktifkan pilihan. Tapi untuk menunjukkan "Tidak boleh" pada saat kursor diarahkan pada induk <label>, maka kita perlu menambahkan kelas .disabled pada induk .radio, .radio-inline, .checkbox, atau .checkbox-inline.
    1. Standar
      Contoh checkbox:
      <div class="checkbox">
        <label><input type="checkbox" value="">Ayam Bakar</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" value="">Bebek Goreng</label>
      </div>
      <div class="checkbox disabled">
        <label><input type="checkbox" value="" disabled>Burung Dara Goreng</label>
      </div>

      Contoh radio:
      <div class="radio">
        <label><input type="radio" name="optradio">Ayam Bakar</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="optradio">Bebek Goreng</label>
      </div>
      <div class="radio disabled">
        <label><input type="radio" name="optradio" disabled>Burung Dara GOreng</label>
      </div>

    2. Inline
      Contoh checkbox:
      <div class="checkbox">
        <label class="checkbox-inline"><input type="checkbox" value="">Ayam Bakar</label>
      </div>
      <div class="checkbox">
        <label class="checkbox-inline"><input type="checkbox" value="">Bebek Goreng</label>
      </div>
      <div class="checkbox disabled">
        <label class="checkbox-inline"><input type="checkbox" value="" disabled>Burung Dara Goreng</label>
      </div>

      Contoh radio:
      <div class="radio">
        <label class="radio-inline"><input type="radio" name="optradio">Ayam Bakar</label>
      </div>
      <div class="radio">
        <label class="radio-inline"><input type="radio" name="optradio">Bebek Goreng</label>
      </div>
      <div class="radio disabled">
        <label class="radio-inline"><input type="radio" name="optradio" disabled>Burung Dara GOreng</label>
      </div>

  4. Daftar pilihan
    1. Hanya 1 pilihan
      <select class="form-control">
        <option>Ayam Goreng</option>
        <option>Bebek Goreng</option>
        <option>Burung Dara Goreng</option>
        <option>Nila Bakar</option>
        <option>Pecek Lele</option>
      </select>

    2. Bisa lebih dari 1 pilihan (tahan Ctrl atau Shift (atau geser dengan mouse) untuk memilih lebih dari 1)
      <select multiple class="form-control">
        <option>Ayam Goreng</option>
        <option>Bebek Goreng</option>
        <option>Burung Dara Goreng</option>
        <option>Nila Bakar</option>
        <option>Pecek Lele</option>
      </select>

Kontrol statis

    Apabila kita ingin menambahkan teks biasa di samping label pada form, gunakan saja kelas .form-control-static pada element <p>
    Contoh:
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <p class="form-control-static">email@example.com</p>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Kata Sandi</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword" placeholder="Kata Sandi">
        </div>
      </div>
    </form>


    email@example.com

    dan ini contoh yang inline:
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only">Email</label>
        <p class="form-control-static">email@example.com</p>
      </div>
      <div class="form-group">
        <label for="inputPassword2" class="sr-only">Kata Sandi</label>
        <input type="password" class="form-control" id="inputPassword2" placeholder="Kata Sandi">
      </div>
      <button type="submit" class="btn btn-default">Konfirmasi</button>
    </form>


    email@example.com

Teks bantuan

    Untuk membuatnya, tambahkan saja kelas .help-block
    Contoh:
    <form role="form">
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
          <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

    This is some help text that breaks onto a new line and may extend more than one line.

Gaya validasi

    Untuk menggunakannya, tambahkan .has-warning, .has-error, atau .has-success pada elemen induk dari .control-label, .form-control, dan .help-block
    Contoh:
    <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
      <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </div>
    <div class="form-group has-warning">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
    </div>
    <div class="form-group has-error">
      <label class="control-label" for="inputError1">Input with error</label>
      <input type="text" class="form-control" id="inputError1">
    </div>
    <div class="has-success">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxSuccess" value="option1">
          Checkbox with success
        </label>
      </div>
    </div>
    <div class="has-warning">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxWarning" value="option1">
          Checkbox with warning
        </label>
      </div>
    </div>
    <div class="has-error">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxError" value="option1">
          Checkbox with error
        </label>
      </div>
    </div>

    A block of help text that breaks onto a new line and may extend beyond one line.

Kontrol ukuran

  1. Ukuran tinggi
    <form role="form">
        <div class="form-group">
          <label for="inputsm">input-sm</label>
          <input class="form-control input-sm" id="inputsm" type="text">
        </div>
        <div class="form-group">
          <label for="inputdefault">Default input</label>
          <input class="form-control" id="inputdefault" type="text">
        </div>
        <div class="form-group">
          <label for="inputlg">input-lg</label>
          <input class="form-control input-lg" id="inputlg" type="text">
        </div>
         <div class="form-group">
          <label for="sel3">input-sm</label>
          <select class="form-control input-sm" id="sel3">
            <option>1</option>
            <option>2</option>
          </select>
        </div>   
        <div class="form-group">
          <label for="sel1">Default select list</label>
          <select class="form-control" id="sel1">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
        <div class="form-group">
          <label for="sel2">input-lg</label>
          <select class="form-control input-lg" id="sel2">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
        </form>

  2. Ukuran grup horisontal
    <form class="form-horizontal" role="form">
      <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="lg">
        </div>
      </div>
      <div class="form-group form-group-sm">
        <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="sm">
        </div>
      </div>
    </form>



  3. Ukuran kolom
    <div class="col-xs-2">
      <label for="ex1">col-xs-2</label>
      <input class="form-control" id="ex1" type="text">
    </div>
    <div class="col-xs-3">
      <label for="ex2">col-xs-3</label>
      <input class="form-control" id="ex2" type="text">
    </div>
    <div class="col-xs-4">
      <label for="ex3">col-xs-4</label>
      <input class="form-control" id="ex3" type="text">
    </div>


Akhirnya selesai juga pembahasan kita mengenai cara membuat form di Bootstrap. Semoga bermanfaat bagi semua, terutama saya pribadi. Selanjutnya kita akan membahas penggunaan buttons dan images di Bootstrap. Silahkan baca artikelnya disini.
Semoga sukses.

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 13:00

2 komentar

Mantap..
Lengkap thanks..

Balas Hapus

Terima kasih sudah berkunjung kesini

Balas Hapus

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi