Bootstrap - Form Select

Hai那里，未来的网页开发者们！今天，我们将深入Bootstrap表单选择元素的奇妙世界。作为你亲切的邻居电脑老师，我很兴奋能引导你完成这个旅程。如果你之前从未写过一行代码，也不用担心——我们将从最基础开始，逐步学习。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

Bootstrap - Select

apa itu Bootstrap Form Select?

Sebelum kita melompat ke kode, mari kita pahami apa yang dimaksudkan dengan Bootstrap Form Select. Bayangkan Anda di toko es krim, dan Anda memiliki menu untuk memilih. Menu itu seperti elemen pilihan dalam desain web. Itu memungkinkan pengguna untuk memilih satu opsi dari daftar yang banyak. Bootstrap, teman setia kita dalam pengembangan web, membuat elemen pilihan ini terlihat bagus dan bekerja mulus di berbagai perangkat dan browser.

Bootstrap Select Default

mari kita mulai dengan bentuk paling dasar dari Bootstrap Select. Ini adalah penampilannya:

<select class="form-select" aria-label="Default select example">
<option selected>Buka menu pilihan ini</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>

Sekarang, mari kitauraikan ini:

Kita mulai dengan tag <select>, yang memberitahu browser kita sedang membuat menu dropdown.
class="form-select" adalah magik Bootstrap yang menggaya pilihan kita.
aria-label untuk aksesibilitas, membantu pembaca layar tahu tujuannya.
Dalam <select>, kita memiliki tag <option>. Ini adalah pilihan dalam dropdown kita.
Atribut selected pada opsi pertama membuatnya menjadi pilihan default.

Ketika Anda menggunakan kode ini, Anda akan melihat menu dropdown yang elegan dengan empat opsi. Keren, kan?

Contoh: Bahasa Pemrograman Kesukaan

Marilah kita membuat ini lebih menyenangkan dengan contoh dunia nyata. Bayangkan kita membuat survei tentang bahasa pemrograman kesukaan:

<select class="form-select" aria-label="Pilih bahasa pemrograman kesukaan Anda">
<option selected>Pilih bahasa kesukaan Anda</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>

Ini membuat dropdown tempat pengguna dapat memilih bahasa pemrograman kesukaannya. Itu seperti meminta teman Anda mana rasa es krim kesukaannya, tapi untuk pengembang!

Ukuran: Membuat Hal Terbesar (atau Lebih Kecil)

kadang-kadang, Anda mungkin ingin membuat pilihan Anda lebih besar atau lebih kecil. Bootstrap menangani Anda! Ini adalah tiga opsi ukuran:

Contoh: Pilihan Besar

<select class="form-select form-select-lg mb-3" aria-label="Large select example">
<option selected>Buka menu pilihan ini</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>

Kelas form-select-lg membuat pilihan ini lebih besar dari default.

Contoh: Pilihan Default

<select class="form-select mb-3" aria-label="Default select example">
<option selected>Buka menu pilihan ini</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>

Ini adalah ukuran standar, seperti yang kita lihat sebelumnya.

Contoh: Pilihan Kecil

<select class="form-select form-select-sm" aria-label="Small select example">
<option selected>Buka menu pilihan ini</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>

Kelas form-select-sm membuat elemen pilihan ini lebih kecil.

Pikirkan ini seperti minuman kecil, medium, dan besar di restoran cepat saji. Anda pilih ukuran yang cocok dengan desain Anda!

Nonaktif: Ketika Opsi Tidak Ada dalam Menu

Kadang-kadang, Anda mungkin ingin mencegah pengguna berinteraksi dengan elemen pilihan. Mungkin itu tidak relevan bagi mereka, atau mungkin itu bergantung pada pilihan lain yang belum mereka buat. Itu di mana atribut disabled berguna.

Contoh: Pilihan Nonaktif

<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Buka menu pilihan ini (tetapi Anda tidak bisa!)</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>

Menambahkan disabled ke tag <select> mengabu-abukan seluruh dropdown, mencegah interaksi. Itu seperti menempatkan "Tutup" di toko es krim yang kita bicarakan sebelumnya.

Menggabungkan Segala Hal

Sekarang kita telah menutup dasar, mari kita buat formulir yang lebih kompleks menggunakan jenis pilihan yang berbeda:

<form>
<div class="mb-3">
<label for="programmingLanguage" class="form-label">Bahasa Pemrograman Kesukaan</label>
<select class="form-select form-select-lg" id="programmingLanguage">
<option selected>Pilih bahasa kesukaan Anda</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>
</div>

<div class="mb-3">
<label for="experience" class="form-label">Tahun Pengalaman</label>
<select class="form-select" id="experience">
<option selected>Pilih pengalaman Anda</option>
<option value="1">Kurang dari 1 tahun</option>
<option value="2">1-3 tahun</option>
<option value="3">3-5 tahun</option>
<option value="4">5+ tahun</option>
</select>
</div>

<div class="mb-3">
<label for="futureLanguage" class="form-label">Bahasa Yang Anda Ingin Belajar Berikutnya</label>
<select class="form-select form-select-sm" id="futureLanguage" disabled>
<option selected>Pertama-tama, pilih bahasa kesukaan Anda</option>
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="kotlin">Kotlin</option>
<option value="swift">Swift</option>
</select>
</div>
</form>

Formulir ini menggabungkan semua yang kita pelajari:

Pilihan besar untuk memilih bahasa pemrograman kesukaan
Pilihan default untuk tahun pengalaman
Pilihan kecil, nonaktif untuk belajar bahasa berikutnya (imagine ini dinonaktifkan sampai mereka memilih bahasa kesukaan)

Kesimpulan

Dan begitu juga, teman-teman! Anda telah belajar membuat dan menyesuaikan elemen Bootstrap Form Select. Dari dropdown dasar ke opsi berukuran dan nonaktif, Anda sekarang memiliki alat untuk membuat formulir yang user-friendly dan terlihat bagus di semua perangkat.

Ingat, latihan membuat sempurna. Cobalah membuat formulir Anda sendiri, campurkan ukuran yang berbeda, dan eksperimen dengan keadaan nonaktif. Sebelum Anda tahu, Anda akan mendesain formulir seperti seorang ahli!

Selamat coding, dan semoga pilihan Anda selalu stylish dan fungsional!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Kawalan Borang

Tutorial Seterusnya:

Bootstrap - Checkbox & Radio