Tag select
Tag select mencipta senarai jatuh bawah
untuk digunakan dalam borang HTML.
Item senarai individu mesti disimpan dalam
tag option.
Atribut
| Atribut | Penerangan |
|---|---|
multiple |
Kehadiran atribut ini mencipta multipilih -
senarai jatuh bawah di mana beberapa item boleh dipilih, dengan menekan
kekunci Ctrl atau menandainya dengan tetikus.
Atribut tidak wajib. |
name |
Nama senarai jatuh bawah. Diperlukan untuk mengambil data medan input dalam PHP. Untuk borang berfungsi dengan betul, nama medan input tidak boleh sama antara satu sama lain (dalam satu borang). Jika ia sama - data yang akan sampai dalam PHP adalah data dari medan input yang lebih rendah dalam kod HTML. |
Contoh
Mari lihat bagaimana senarai jatuh bawah berfungsi:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Contoh
Mari buat lebar senarai jatuh bawah
sama dengan lebar elemen terbesar (jika
ia tidak dinyatakan secara jelas menggunakan sifat CSS
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Contoh . Pilihan Lalai
Sekarang mari cuba pilih bandar
secara lalai. Mari lakukan ini menggunakan atribut
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Contoh . Multipilih
Sekarang mari tukar select biasa kepada
multipilih menggunakan atribut multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Perhatikan bahawa nama select, yang ditetapkan dalam atribut name,
perlu dengan kurungan segi empat di hujung. Ini diperlukan supaya dalam PHP
semua nilai terpilih akan sampai (jika tidak, hanya satu - yang terakhir - akan sampai).
Contoh . Beberapa Nilai Lalai dalam Multipilih
Sekarang, dalam multipilih secara lalai, mari cuba pilih lebih daripada satu nilai:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
: