Bootstrap - Kumpulan Input: Panduan Menyenangkan untuk Pemula

Hai sana, para pengembang web masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini melalui Kumpulan Input Bootstrap. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya telah melihat banyak siswa yang terangsang saat mereka memahami konsep ini. Jadi, mari kita masuk dan membuat formulir web Anda terlihat fantastis!

Apa Itu Kumpulan Input?

Sebelum kita mulai, bayangkan Anda sedang merancang sebuah formulir untuk layanan pengiriman pizza. Anda memerlukan field untuk nama pelanggan, alamat, dan tentu saja, topping pizza yang penting. Kumpulan input adalah seperti saus rahasia yang membuat elemen formulir ini terlihat koheren dan profesional.

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

Contoh: Kumpulan Input 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 bawah.
• Kita menggunakan input-group-text untuk simbol '@' awalan.
• Field input menggunakan kelas form-control untuk gaya.

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

Pemenuhan

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

Contoh: Pemenuhan Kumpulan Input

<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 kumpulan input. Ini memastikan bahwa semua elemen tetap berada di baris yang sama jika memungkinkan, tapi akan memenuhi dengan baik jika layar terlalu sempit.

Ukuran

Seperti Goldilocks, kadang-kadang Anda memerlukan kumpulan input dengan ukuran yang tepat. Bootstrap menawarkan opsi ukuran yang berbeda untuk memenuhi kebutuhan Anda.

Contoh: Kumpulan Input 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 membuat kumpulan input kecil atau besar. Ukuran default tidak memerlukan kelas tambahan.

Checkbox dan Radio

kadang-kadang, input teks sederhana tidak cukup. Anda mungkin ingin menambahkan checkbox atau tombol radio ke kumpulan input Anda. Mari kita lihat bagaimana kita dapat melakukannya!

Contoh: Checkbox di Kumpulan Input

<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 input-group-text div. 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 kumpulan input 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!

Tambahan Tombol

Tombol dapat menambah interaktivitas ke kumpulan input Anda. Mari kita lihat bagaimana menggabungkannya.

Contoh: Tambahan Tombol

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

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="#">Hal lain di sini</a></li>
</ul>
</div>

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

Form Khusus

Bootstrap juga memungkinkan Anda membuat elemen form khusus dalam kumpulan input. Mari kita lihat contoh form pilihan khusus.

Contoh: Form 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 kumpulan input, bergaya konsisten dengan elemen Bootstrap lainnya.

Input File Khusus

Terakhir tapi bukan paling kurang, mari kita lihat bagaimana membuat input file khusus dalam kumpulan input.

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 yang stylish, sempurna untuk memungkinkan pengguna mengunggah file melalui formulir Anda.

Kesimpulan

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

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

Selamat coding, dan semoga formulir Anda selalu user-friendly dan visually appealing!

Credits: Image by storyset