papawardi

Cara Membuat Form di Bootstrap

24 Februari 2016 | papawardi

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

Tambahkan role="form" pada elemen <form> (membantu meningkatkan aksesibilitas untuk orang-orang yang menggunakan screen readers)
Bungkus label dan form kontrol dalam elemen <div> dengan class="form-group" (diperlukan untuk mengoptimalkan jarak)
Tambahkan class="form-control" pada elemen tekstual seperti <input>, <textarea> dan <select>

<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>

Kelas <form>

.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:

.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

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>

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>

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.

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>

Ayam Bakar

Bebek Goreng

Burung Dara Goreng

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>

Ayam Bakar

Bebek Goreng

Burung Dara Goreng

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>

Ayam Bakar

Bebek Goreng

Burung Dara Goreng

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>

Ayam Bakar

Bebek Goreng

Burung Dara Goreng

Daftar pilihan

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>

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

.form-control-static

<p>

<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>

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>

Teks bantuan

.help-block

<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>

Gaya validasi

.has-warning

.has-error

.has-success

.control-label

.form-control

.help-block

<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>

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

Input with warning

Input with error

Checkbox with success

Checkbox with warning

Checkbox with error

Kontrol ukuran

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>

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>

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>

col-xs-2

col-xs-3

col-xs-4

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.

INGAT!!!

jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan  sampai ). Jika belum punya template dasar, anda bisa membacanya disini

Author: SUWARDI

Silahkan share jika berkenan

26 komentar:

Anonim04 Januari, 2017 11:56
Mantap..
Lengkap thanks..
BalasHapus
Balasan
Abdan Zam Zam22 Juli, 2019 16:27
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
Unknown24 Maret, 2020 19:05
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.
BalasHapus
Balasan
Dicky Sanjaya24 Maret, 2020 20:34
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!!
BalasHapus
Balasan
Sekar25 Maret, 2020 07:43
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
Sekar25 Maret, 2020 07:49
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 ;)
BalasHapus
Balasan
juniardi marliansyah25 Maret, 2020 12:23
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
BalasHapus
Balasan
fariz al faiq25 Maret, 2020 18:46
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/)
BalasHapus
Balasan
Ade RimaLinda25 Maret, 2020 19:03
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
BalasHapus
Balasan
Unknown25 Maret, 2020 19:18
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
BalasHapus
Balasan
Ismoyo25 Maret, 2020 20:38
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/
BalasHapus
Balasan
Andika Irawan25 Maret, 2020 23:51
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/
BalasHapus
Balasan
Citra pratiwi26 Maret, 2020 09:06
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/
BalasHapus
Balasan
Unknown26 Maret, 2020 10:45
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/

BalasHapus
Balasan
septi27 Maret, 2020 12:24
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;)
BalasHapus
Balasan
Ade RimaLinda28 Maret, 2020 18:34
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
BalasHapus
Balasan
Vonny Ramadhani29 Maret, 2020 21:55
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
BalasHapus
Balasan
Sri dinda pratiwi31 Maret, 2020 21:59
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
BalasHapus
Balasan
Ismoe Iman Muhammad07 April, 2020 11:59
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
BalasHapus
Balasan
Widya Nurullita08 April, 2020 15:11
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
BalasHapus
Balasan
Vonny Ramadhani30 September, 2020 12:10
Baguss kak dengan bantuan artikel kakak aku bisa paham tentang bagaimana caranya membuat form di bootstrap.

Perkenalkan kak nama saya Vony Ramadhani TP Dari ISB Atma Luhur
BalasHapus
Balasan
Vivi SIlvira03 Oktober, 2020 18:57
wiiiih keren artikel Cara Membuat Form di Bootstrap nya ,saya lebih faham tentang ini semoga saya bisa mempraktekannya nanti ,Terima kasih ya min ..
Perkenalkan nama saya Vivi Silvira dari ISB Atma Luhur
BalasHapus
Balasan
Unknown03 Oktober, 2020 23:34
Baguss kak dengan bantuan artikel kakak aku bisa paham tentang bagaimana caranya membuat form di bootstrap.

Perkenalkan kak nama saya sri wulan Dari ISB Atma Luhur
BalasHapus
Balasan
Buah04 Oktober, 2020 20:09
Terimakasih kak atas artikelnya yang sangatembantu dan sangat bermanfaat untuk semua orang.
Perkenalkan kak nama saya Nenglis dari ISB Atma Luhur
BalasHapus
Balasan
indah04 Oktober, 2020 20:21
selamat malam kak,artikel nya keren nanget dan bener" 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 indah Dari STMIK ATMA LUHUR. jangan lupa kunjungi juga website kampus saya ya kak https://www.atmaluhur.ac.id
BalasHapus
Balasan

Tambahkan komentar

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.

papa wardi

Cara Membuat Form di Bootstrap

Form standar

Kelas <form>

Kontrol pendukung

Kontrol statis

Teks bantuan

Gaya validasi

Kontrol ukuran

Author: SUWARDI

Artikel Terkait

26 komentar:

Artikel Populer

Label