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

21 komentar

Mantap..
Lengkap thanks..

Balas Hapus

Terima kasih sudah berkunjung kesini

Balas Hapus
This comment has been removed by the author.

Terima kasih atas artikelnya yang bermanfaat kak. Penjelasannya sederhana membuat saya yang pemula ini cepat memahaminya. Terus berkarya ya kak! Saya Aurellita, silahkan kunjungi website kampus saya di https://www.atmaluhur.ac.id jika berkenan. Terimakasih.

Balas Hapus

Terimakasih kak atas artikel yang sangat membantu ini, berkat artikel ini saya dapat mengerti tentang membuat form, oiya nama saya Dicky Sanjaya dari STMIK Atma Luhur dan ini website kampus saya https://www.atmaluhur.ac.id/ CIAYOO!!

Balas Hapus
This comment has been removed by the author.

Terimakasih banyak loh kak, dengan bantuan artikel kakak aku bisa paham tentang bagaimana caranya membuat form di bootstrap. Semangat terus kak untuk mengupdate artikel biar saya bisa belajar.never give up. Semoga Bermanfaat. Nama saya Sekar Widya Lestari Dari STMIK ATMA LUHUR. jangan lupa kunjungi juga website kampus kita ya kak ;) (https://www.atmaluhur.ac.id/) Terimakasih ;)

Balas Hapus

terima kasih untuk artikel nya tentang materi membuat form bootstrap dengan ini saya bisa tau langkah awal cara membuat form bootstrap dan bisa lebih berkembang lebih baik, jangan lupa singgah ke website kampus kita (https://www.atmaluhur.ac.id/) Terimakasih

Balas Hapus

assalamu'alaikum admin, terimakasih artikelnya sangat berguna untuk aku yang baru mau mulai membuat form menggunakan bootstrap, semoga artikel admin sering dikunjingi banyak orang, sangat berguna dan praktis ilmu nya, thanks admin nya:). perkenalkan nama aku FARIZ ALFAIQ dari STMIK ATMA LUHUR (https://www.atmaluhur.ac.id/)

Balas Hapus

Terimakasih kak selalu membantu saya dalam memahami materi baru dengan artikel yang kakak berikan. Semoga kakak selalu memberikan artikel yang bisa berguna untuk kita mudah memahami dan mengerti materi-nateri lainnya. Saya ade rimalinda dari kampus STMIK atma luhur, kunjungi website kampus saya http://atmaluhur.ac.id

Balas Hapus

Wihhh syukur alhmdulilah dapat ilmu yang bermanfaat materinya sangat mudah dimengerti semoga kedepannya lebih baik lagi kak hehe saya Widya Nurullita dari kampus STMIK ATMA LUHUR. Oh yaa kunjungin juga website kampus say http://atma luhur.ac.id

Balas Hapus

wah keren kak,sangat membantu sekali artikel ini dalam pembelajaran cara Membuat Form di Bootstrap secara mudah dan cepat. Terus berkarya kak dan semoga kedepannya artikel kakak bisa lebih berkembang lagi.perkenalkan saya Ismoyo Budiutomo Dari Stmik Atma Luhur.., jangan lupa kunjungi website kampus https://www.atmaluhur.ac.id/

Balas Hapus

keren kk,sangat membantu sekali cara membuat form di bootstrap. sehingga bisa membatu untuk mengikuti mata kuliah saya.perkenalkan saya Andika Irawan Dari Stmik Atma Luhur.., jangan lupa kunjungi website kampus https://www.atmaluhur.ac.id/

Balas Hapus

Wahhh sangat bagus sekali artikel ny kak,sangat membantu sekali penjelasannya yang sangat jelas ini dan sangat membantu yang baru memulai pelajaran tentang query insert php my sql ini kak,nanti saya dan temen-temen akan mempraktekkan yang sudah kakak per jelaskan ,semoga bermanfaat ya kak sukses selalu,ehhh saya mau memperkenalkan diri saya Citra Pratiwi dari kampus STMIK ATMA LUHUR ,jangan lupa kunjungi website saya ya kak https://www.atmaluhur.ac.id/

Balas Hapus

Terimakasih kak sangat membantu saya dalam menerima materi baru, dengan artikel2 yang kakak berikan semoga bermanfaat, di tunggu lagi artikel2 yg lain nya kak, sukses selalu buat kakak. Perkenalkan saya Alfina dari kampus STMIK ATMA LUHUR ,jangan lupa kunjungi website saya ya kak https://www.atmaluhur.ac.id/

Balas Hapus

Terimakasih kak atas artikel yang sangat membantu ini, berkat artikel ini saya dapat mengerti tentang membuat form,perkenalkan nama saya nama saya Septiani dari STMIK Atma Luhur dan ini website kampus saya https://www.atmaluhur.ac.id/ terima kasih;)

Balas Hapus

Terimakasih kak selalu membantu saya dalam memahami materi baru dengan artikel yang kakak berikan. Artikel-artikel kakak juga sangat bermanfaat dan mudah untuk saya mengerti dan pahami. Semoga kakak selalu memberikan artikel yang bisa berguna untuk kita dan memberikan artikel-artikel yang dapat dengan mudah dipahami dan dimengerti. semangat terus kak untuk membuat artikel-artikel lainnya. Saya ade rimalinda dari kampus STMIK atma luhur, Jangan lupa kunjungi website kampus saya https://www.atmaluhur.ac.id

Balas Hapus

Baguss kak dengan bantuan artikel kakak aku bisa paham tentang bagaimana caranya membuat form di bootstrap. Semangat terus kak untuk mengupdate artikel biar saya bisa belajar. Semoga Bermanfaat Nama saya Vony Ramadhani Dari STMIK ATMA LUHUR. jangan lupa kunjungi juga website kampus saya ya kak https://www.atmaluhur.ac.id

Balas Hapus

Wah keren kak artikelnya, sangat membantu sekali, dengan adanya artikel ini saya lebih mudah untuk mempelajarinya, sukses terus buat kakak untuk membuat artikel artikel lain nya, eh perkenalkan diri dong kak, nama saya sri dinda pratiwi dari kampus stmik atma luhur, dan jangan lupa juga ya kak kunjungi website kampus saya https://www.atmaluhur.ac.id

Balas Hapus

Selamat Siang kak,
Wahhh senang rasa nya setelah melihat artikelnya kak,Saya sudah mencobanya dalam tugas perkuliahan dan hasilnya sangat membantu,terimakasih kasih ats artikelnya,semoga kedepannya artikel kakak makin bagus dan berguna serta makin semangat lagi ya kak dalam membuat artikelnya ttg materi seperti ini.Saya Ismoe Iman Muhammad Mahasiswa AtmaLuhur Pangkalpinang,jangan lupa ya kak mampir" ke website kampus saya https://www.atmaluhur.ac.id

Balas Hapus

Selamat sore kak terimakasih atas ilmunya semenjak dirumah saja saya mencoba coba buat dengan meniru cara kakak sangat mudah dimengerti terimakasih atas ilmu nya semoga semakin semangat lagi membuat artikelnya ehhe saya Widya nurullita dari kampus stmik atma luhur pangkalpinang jangan lupa cek website kampus saya juga kak http://atma luhur.ac.Id

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