Bootstrap - Input Groups: Panduan Ramah untuk Pemula

Hai teman-teman, pengembang web masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini melalui Bootstrap's Input Groups. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun-tahun, saya telah melihat banyak siswa bercahaya saat mereka mengerti konsep ini. Jadi, mari kita masuk dan membuat formulir web Anda terlihat fantastis!

Apa Itu Input Groups?

Sebelum kita mulai, bayangkan Anda sedang mendesain sebuah formulir untuk layanan pengiriman pizza. Anda butuh field untuk nama pelanggan, alamat, dan tentu saja, topping pizza yang penting. Input groups seperti saus rahasia yang membuat elemen formulir ini terlihat kohesif dan profesional.

Dalam Bootstrap, input groups memungkinkan Anda menambahkan prefiks, sufiks, atau elemen lain ke kontrol formulir. Mereka meningkatkan daya tarik visual dan fungsionalitas formulir Anda, membuatnya lebih user-friendly dan intuitif.

Contoh: Input Group Dasar

Mari kita mulai dengan contoh sederhana:

<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>

Dalam kode ini:

• Kita membuat sebuah kontainer dengan kelas input-group.
• Kelas mb-3 menambahkan margin di bagian bawah.
• Kita menggunakan input-group-text untuk simbol '@' prefiks.
• Field input menggunakan kelas form-control untuk gaya.

Ini menciptakan field input yang elegant dengan simbol '@', sempurna untuk memasukkan username atau alamat email!

Pemaketan

kadang-kadang, input groups Anda mungkin terlalu panjang untuk satu baris. Jangan khawatir; Bootstrap telah menangani Anda dengan pemaketan otomatis.

Contoh: Pemaketan Input Group

<div class="input-group flex-nowrap">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-text">.com</span>
</div>

Di sini, kita menambahkan flex-nowrap ke input group. Ini memastikan bahwa semua elemen tetap di baris yang sama jika memungkinkan, tapi akan lipat secara indah jika layar terlalu sempit.

Ukuran

Seperti Goldilocks, kadang-kadang Anda memerlukan input groups berukuran tepat. Bootstrap menawarkan berbagai opsi ukuran untuk memenuhi kebutuhan Anda.

Contoh: Input Groups Dengan Ukuran Berbeda

<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Kecil</span>
<input type="text" class="form-control">
</div>

<div class="input-group mb-3">
<span class="input-group-text">Default</span>
<input type="text" class="form-control">
</div>

<div class="input-group input-group-lg">
<span class="input-group-text">Besar</span>
<input type="text" class="form-control">
</div>

Dengan menambahkan input-group-sm atau input-group-lg, Anda dapat menciptakan input groups kecil atau besar. Ukuran default tidak memerlukan kelas tambahan.

Checkbox dan Radio

kadang-kadang, input text sederhana tidak cukup. Anda mungkin ingin menambahkan checkbox atau tombol radio ke input groups. Mari kita lihat bagaimana kita bisa melakukan itu!

Contoh: Checkbox di Input Group

<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" placeholder="Checkbox di sini">
</div>

Dalam contoh ini, kita menempatkan checkbox di dalam div input-group-text. Kelas form-check-input menggaya checkbox kami, sedangkan mt-0 menghapus margin atas.

Input Ganda

Mengapa puas dengan satu input saat Anda bisa memiliki banyak? Mari kita buat input group dengan beberapa field.

Contoh: Input Ganda

<div class="input-group">
<span class="input-group-text">Nama depan dan belakang</span>
<input type="text" class="form-control" placeholder="Nama depan">
<input type="text" class="form-control" placeholder="Nama belakang">
</div>

Ini menciptakan dua field input berdampingan, sempurna untuk mengumpulkan nama lengkap pengguna!

Tombol Tambahan

Tombol dapat menambah interaktivitas ke input groups. Mari kita lihat bagaimana mencakupnya.

Contoh: Tombol Tambahan

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username penerima">
<button class="btn btn-outline-secondary" type="button">Tombol</button>
</div>

Di sini, kita menambahkan tombol di sebelah field input. Ini dapat digunakan untuk aksi seperti mengirimkan formulir atau memicu pencarian.

Tombol Dengan Dropdown

Ingin memberikan lebih banyak opsi ke pengguna Anda? Mari kita tambahkan dropdown ke tombol addon.

Contoh: Tombol Dengan Dropdown

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Cari...">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Opsi
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Ini menciptakan tombol dropdown di sebelah field input, menawarkan opsi tambahan ke pengguna.

Form Khusus

Bootstrap juga memungkinkan Anda menciptakan elemen form khusus dalam input groups. Mari kita lihat contoh form pilihan.

Contoh: Pilihan Khusus

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Opsi</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Pilih...</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>
</div>

Ini menciptakan dropdown pilihan khusus dalam input group, dengan gaya konsisten dengan elemen Bootstrap lainnya.

Input File Khusus

Terakhir tapi bukan yang paling kurang, mari kita lihat bagaimana menciptakan input file khusus dalam input group.

Contoh: Input File Khusus

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Unggah</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>

Ini menciptakan field input file gaya khusus, sempurna untuk memungkinkan pengguna mengunggah file melalui formulir Anda.

Kesimpulan

Dan itu adalah dia, teman-teman! Kita telah mengembara melalui dunia Bootstrap Input Groups, dari contoh dasar hingga konfigurasi yang lebih kompleks. Ingat, kunci untuk menguasai konsep ini adalah latihan. Cobalah menggabungkan elemen berbeda, mainkan dengan ukuran dan gaya, dan terutama, bersenang-senanglah dengan itu!

Saat kita mengakhiri, saya teringat tentang seorang siswa yang pernah berkata kepadaku, "Bootstrap seperti LEGO untuk desain web!" Dan tahu apa? Mereka sungguh benar. Anda sekarang memiliki semua piece-pice ini - itu waktunya untuk membangun sesuatu yang menakjubkan!

Selamat coding, dan semoga formulir Anda selalu ramah pengguna dan visually appealing!

Metode	Deskripsi
Input Group Dasar	Menambahkan prefiks atau sufiks ke kontrol formulir
Pemaketan	Memastikan input groups lipat indah pada layar yang kecil
Ukuran	Memungkinkan ukuran kecil, default, atau besar input groups
Checkbox dan Radios	Menggabungkan checkbox atau tombol radio ke input groups
Input Ganda	Menggabungkan beberapa field input dalam satu group
Tombol Tambahan	Menambahkan tombol interaktif ke input groups
Tombol Dengan Dropdown	Menggabungkan dropdown menu dengan tombol di input groups
Form Khusus	Memungkinkan elemen form khusus dalam input groups
Input File Khusus	Menciptakan field input file gaya khusus dalam input groups

Credits: Image by storyset