Penjelasan Form di Bootstrap dengan Bahasa yang Lebih Mudah
Apa Itu Form di Bootstrap?
Form di Bootstrap adalah kumpulan elemen HTML yang digunakan untuk menerima input dari pengguna. Bootstrap menyediakan berbagai gaya dan tata letak yang bisa digunakan untuk membuat form yang menarik dan responsif dengan mudah.
Elemen Penting dalam Form Bootstrap
1. Form Control (Input & Textarea)
Bootstrap menyediakan class .form-control untuk mengatur tampilan input teks dan textarea agar terlihat seragam di semua browser.
Contoh Input Form Sederhana:
<input type="text" class="form-control" placeholder="Masukkan teks">
Contoh Input dengan Label:
<label for="email">Email</label>
<input type="email" id="email" class="form-control" placeholder="Masukkan email">
berikut hasilnya:
2. Select (Dropdown Pilihan)
Untuk membuat dropdown pilihan dengan tampilan yang lebih menarik, gunakan .form-select.
Contoh Select Form:
<select class="form-select">
<option>Pilih opsi</option>
<option>Opsi 1</option>
<option>Opsi 2</option>
</select>
berikut hasilnya:
3. Checkbox dan Radio Button
Gunakan .form-check untuk membuat checkbox atau radio button yang lebih rapi.
Contoh Checkbox:
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Saya setuju</label>
Contoh Radio Button:
<input type="radio" class="form-check-input" name="gender" id="male">
<label class="form-check-label" for="male">Laki-laki</label>
berikut hasilnya:
4. Input Group (Gabungan Input dengan Label/Button)
Kita bisa menggabungkan input dengan teks tambahan atau tombol menggunakan .input-group.
Contoh Input dengan Teks Tambahan:
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
Contoh Input dengan Tombol:
<div class="input-group">
<input type="text" class="form-control" placeholder="Cari sesuatu">
<button class="btn btn-primary">Cari</button>
</div>
berikut hasilnya:
5. Floating Labels (Label Mengambang)
Bootstrap memiliki fitur label yang muncul di dalam input dan akan bergeser ke atas saat diketik.
Contoh Floating Label:
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="Email">
<label for="floatingEmail">Email</label>
</div>
Tata Letak Form (Layout Form)
Bootstrap mendukung beberapa jenis tata letak form:
Form Satu Baris (Inline Form)
<form class="row g-3">
<div class="col-auto">
<input type="text" class="form-control" placeholder="Nama">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Kirim</button>
</div>
</form>
Form Grid (Lebih Kompleks dengan Kolom)
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Nama Depan">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Nama Belakang">
</div>
</div>
berikut hasilnya:
Validasi Form
Bootstrap memungkinkan kita untuk menampilkan pesan kesalahan jika input tidak sesuai.
Contoh Validasi Form:
<input type="text" class="form-control is-invalid" placeholder="Masukkan teks">
<div class="invalid-feedback">Kolom ini wajib diisi!</div>
Form yang Dinonaktifkan (Disabled Forms)
Jika ingin membuat input yang tidak bisa diklik atau diisi, tambahkan atribut disabled.
Contoh Form Nonaktif:
<input type="text" class="form-control" placeholder="Tidak bisa diketik" disabled>
Jika ingin menonaktifkan seluruh form sekaligus, gunakan <fieldset disabled>.
Contoh Fieldset Nonaktif:
<fieldset disabled>
<input type="text" class="form-control" placeholder="Tidak bisa diketik">
</fieldset>
berikut hasilnya:
Aksesibilitas Form (Untuk Pengguna Berkebutuhan Khusus)
Agar form lebih mudah digunakan oleh semua orang, termasuk pengguna dengan keterbatasan penglihatan:
Gunakan <label> untuk setiap input
Gunakan atribut aria-describedby untuk memberikan informasi tambahan
Jika label tidak bisa ditampilkan, gunakan .visually-hidden agar tetap terbaca oleh screen reader
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Bootstrap #1 Fundamental Bootstrap
2. Belajar Bootstrap #10 CSS Variables Bootstrap
3. Belajar Bootstrap #11 Optimize Bootstrap
4. Belajar Bootstrap #12 Mengenal sistem kolom di Bootstrap
5. Belajar Bootstrap #13 Panduan lengkap gutters di Bootstrap
6. Belajar Bootstrap #14 Penjelasan sederhana utilities untuk layout di Bootstrap
7. Belajar Bootstrap #15 Penjelasan Z-index dalam Bootstrap
8. Belajar Bootstrap #16 Reboot Bootstrap
9. Belajar Bootstrap #17 Typography di Bootstrap
10. Belajar Bootstrap #18 Gambar di Bootstrap
11. Belajar Bootstrap #19 Table di Bootstrap part 1
12. Belajar Bootstrap #2 Alasan menggunakan Bootstrap
13. Belajar Bootstrap #20 Table di Bootstrap part 2
14. Belajar Bootstrap #21 Bootstrap Figures
15. Belajar Bootstrap #22 Penjelasan Form di Bootstrap
16. Belajar Bootstrap #23 Form Controls di Bootstrap
17. Belajar Bootstrap #24 Penjelasan Bootstrap Select
18. Belajar Bootstrap #25 Checkbox dan Radio Button di Bootstrap
19. Belajar Bootstrap #26 Range input di Bootstrap
20. Belajar Bootstrap #27 Input Group di Bootstrap
21. Belajar Bootstrap #28 Penjelasan Floating Labels di Bootstrap
22. Belajar Bootstrap #29 Layout Form di Bootstrap
23. Belajar Bootstrap #3 Persiapan Sebelum Belajar Bootstrap
24. Belajar Bootstrap #30 Validasi Form di bootstrap
25. Belajar Bootstrap #31 Accordion di Bootstrap
26. Belajar Bootstrap #32 Apa itu Bootstrap Alerts?
27. Belajar Bootstrap #33 Apa itu Badges di Bootstrap?
28. Belajar Bootstrap #34 Apa itu Breadcrumb di Bootstrap?
29. Belajar Bootstrap #35 Penggunaan Tombol (Buttons) di Bootstrap
30. Belajar Bootstrap #36 Button Group di Bootstrap
31. Belajar Bootstrap #37 Cards di Bootstrap part 1
32. Belajar Bootstrap #38 Cards di Bootstrap part 2
33. Belajar Bootstrap #39 Cards di Bootstrap part 3
34. Belajar Bootstrap #40 Apa itu Carousel di bootstrap
35. Belajar Bootstrap #41 Close Button di Bootstrap
36. Belajar Bootstrap #42 Apa itu Collapse di Bootstrap
37. Belajar Bootstrap #43 Dropdowns di Bootstrap part 1
38. Belajar Bootstrap #44 Dropdowns di Bootstrap part 2
39. Belajar Bootstrap #45 List Group di Bootstrap
40. Belajar Bootstrap #46 Modal di Bootstrap
41. Belajar Bootstrap #47 Navs dan tabs di Bootstrap
42. Belajar Bootstrap #48 Navbar di Bootstrap part 1
43. Belajar Bootstrap #49 Navbar di Bootstrap part 2
44. Belajar Bootstrap #5 Menggunnakan Bootstrap lewat unduhan manual
45. Belajar Bootstrap #50 Offcanvas di Bootstrap
46. Belajar Bootstrap #51 Pagination di Bootstrap
47. Belajar Bootstrap #52 Popover di Bootstrap
48. Belajar Bootstrap #53 Progress di Bootstrap
49. Belajar Bootstrap #54 Apa itu Scrollspy
50. Belajar Bootstrap #55 Bootstrap Spinners
51. Belajar Bootstrap #56 Toats di Bootstrap
52. Belajar Bootstrap #57 Tooltips di Bootstrap
53. Belajar Bootstrap #58 Clearfix dalam Bootstrap
54. Belajar Bootstrap #59 Colored Links di Bootstrap
55. Belajar Bootstrap #6 Cara Membuat Container Pada Bootstrap
56. Belajar Bootstrap #60 Ratios di Bootstrap
57. Belajar Bootstrap #61 Position Bootstrap
58. Belajar Bootstrap #62 Visually Hidden Bootstrap
59. Belajar Bootstrap #63 Stretched Link Bootstrap
60. Belajar Bootstrap #64 Text Truncation di Bootstrap
61. Belajar Bootstrap #65 Utility API di Bootstrap
62. Belajar Bootstrap #66 Background di Bootstrap
63. Belajar Bootstrap #67 Border di Bootstrap
64. Belajar Bootstrap #68 Bootstrap Colors
65. Belajar Bootstrap #69 Display Property di Bootstrap
66. Belajar Bootstrap #7 Memahami dan menerapkan grid
67. Belajar Bootstrap #70 Flexbox di Bootstrap
68. Belajar Bootstrap #71 Float Utility di Bootstrap
69. Belajar Bootstrap #72 Bootstrap Interactions
70. Belajar Bootstrap #73 Overflow di Bootstrap
71. Belajar Bootstrap #74 Position dalam Bootstrap
72. Belajar Bootstrap #75 Shadows di Bootstrap
73. Belajar Bootstrap #76 Bootstrap Sizing
74. Belajar Bootstrap #77 Spacing di Bootstrap
75. Belajar Bootstrap #78 Text Utilities di Bootstrap
76. Belajar Bootstrap #79 Vertical Alignment di Bootstrap
77. Belajar Bootstrap #8 Warna Tema dan Cara Penggunaannya
78. Belajar Bootstrap #80 Visibility di Bootstrap
