Bootstrap - Form Select

Halo teman-teman pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari elemen Bootstrap Form Select. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari awal dan naik tingkat per tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu hal yang Anda suka), dan mari kita mulai!

Apa Itu Bootstrap Form Select?

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

Default Bootstrap Select

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 select ini</option>
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
</select>

mari kitauraikan ini:

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

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

Contoh: Bahasa Pemrograman Kesukaan

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

<select class="form-select" aria-label="Select your favorite programming language">
<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 yang mereka sukai, tapi untuk para pemrogram!

Penyesuaian Ukuran: Membuat Hal Terbesar (atau Lebih Kecil)

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

Contoh: Select Besar

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

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

Contoh: Select Default

<select class="form-select mb-3" aria-label="Default select example">
<option selected>Buka menu select 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: Select Kecil

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

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

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

Nonaktif: Ketika Opsi Tidak Ada dalam Menu

Kadang-kadang, Anda mungkin ingin menghindari interaksi pengguna dengan elemen select. Mungkin itu tidak berlaku untuk mereka, atau mungkin itu bergantung pada pilihan lain yang belum mereka buat. Itu di mana atribut disabled berguna.

Contoh: Select Nonaktif

<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Buka menu select 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> mengabukan keseluruhan dropdown, mencegah interaksi. Itu seperti memasang tanda "Tutup" di toko es krim yang kita bicarakan sebelumnya.

Menggabungkan Semua

Sekarang kita telah melihat dasar-dasar, mari kita buat formulir yang lebih kompleks menggunakan jenis select 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 Selanjutnya</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:

• Select besar untuk memilih bahasa pemrograman kesukaan
• Select default untuk tahun pengalaman
• Select kecil, nonaktif untuk belajar bahasa selanjutnya (imagine itu dinonaktifkan sampai mereka memilih bahasa kesukaan)

Kesimpulan

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

Ingat, latihan membuat sempurna. Cobalah membuat formulir Anda sendiri, campurkan jenis-jenis ukuran yang berbeda, dan eksperimen dengan keadaan nonaktif. Dalam waktu yang singkat, Anda akan dapat mendesain formulir seperti seorang pro!

Semangat coding, dan silakan agar select Anda selalu stylish dan fungsional!

Metode	Deskripsi
.form-select	Kelas select dasar Bootstrap
.form-select-lg	Membuat elemen select besar
.form-select-sm	Membuat elemen select kecil
Atribut disabled	Menonaktifkan elemen select
Atribut selected	Mengatur pilihan default
aria-label	Memperbaiki aksesibilitas untuk pembaca layar

Credits: Image by storyset