Tag select
Tag select membuat daftar dropdown
untuk digunakan dalam formulir HTML.
Setiap item dalam daftar harus disimpan dalam
tag option.
Atribut
| Atribut | Deskripsi |
|---|---|
multiple |
Kehadiran atribut ini membuat multiselect -
daftar dropdown di mana beberapa item dapat dipilih dengan menahan
tombol Ctrl atau menandainya dengan mouse.
Atribut opsional. |
name |
Nama daftar dropdown. Diperlukan untuk mengambil data input di PHP. Agar formulir bekerja dengan benar, nama field input tidak boleh sama satu sama lain (dalam satu formulir). Jika sama - di PHP akan diterima data dari field input yang lebih bawah dalam kode HTML. |
Contoh
Mari kita lihat bagaimana daftar dropdown bekerja:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Contoh
Mari kita buat lebar daftar dropdown
sama dengan lebar elemen terbesar (jika
tidak ditentukan secara eksplisit menggunakan properti CSS
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Contoh . Pilihan Default
Sekarang mari kita coba memilih kota
secara default. Lakukan ini dengan atribut
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Contoh . Multiselect
Sekarang mari kita ubah select biasa menjadi
multiselect dengan atribut multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Perhatikan bahwa nama select, yang ditentukan dalam atribut name,
harus dengan tanda kurung siku di akhir. Ini diperlukan agar di PHP
datang semua nilai yang dipilih (jika tidak, hanya satu yang akan datang - yang terakhir).
Contoh . Beberapa Nilai Default dalam Multiselect
Sekarang, dalam multiselect secara default, mari coba memilih lebih dari satu nilai:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
:
