Tanda <select> HTML

Definisi dan penggunaan

<select> Elemen digunakan untuk membuat daftar pilihan.

<select> Elemen sering digunakan di formulir, untuk mengumpulkan masukan pengguna.

Setelah mengirim formulir, perlu menggunakan atribut name untuk mengambil data formulir (jika atribut name dilewati, data di daftar pilihan tidak akan disubmit).

<select> Dalam elemen Tag <option> Definisi opsi yang tersedia di daftar pilihan.

Perlu menggunakan atribut id untuk menghubungkan daftar pilihan dengan label (label).

Petunjuk:Selalu tambahkan <label> tag Dapatkan praktik aksesibilitas terbaik!

Lihat pula:

Panduan HTML DOM:Objek Select

Tutoriel CSS:Atur gaya formulir

Contoh

Contoh 1

Buat daftar pilihan yang mengandung empat opsi:

<label for="cars">Silakan pilih merek mobil:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Coba sendiri

Contoh 2

Contoh <select> Gunakan bersamaan dengan tag <optgroup>:

<label for="cars">Silakan pilih merek mobil:</label>
<select  name="cars" id="cars">
  <optgroup label="Kendaraan Cina">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Kendaraan Jerman">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Coba sendiri

Atribut

Atribut Nilai Deskripsi
autofocus autofocus Dinyatakan bahwa daftar pilihan harus mendapatkan fokus otomatis saat halaman dimuat.
disabled disabled Dinyatakan bahwa daftar pilihan harus dinonaktifkan.
form id formulir Definisi daftar pilihan yang dimiliki formulir.
multiple multiple Dinyatakan dapat memilih beberapa opsi sekaligus.
name name Mendefinisikan nama daftar pilihan.
required required Menentukan bahwa pengguna harus memilih nilai sebelum mengirim formulir.
size Angka Mendefinisikan jumlah opsi yang dapat terlihat dalam daftar pilihan.

Atribut Global

<select> Tanda juga mendukung Atribut Global di HTML.

Atribut Event

<select> Tanda juga mendukung Atribut Event di HTML.

Pengaturan CSS Standar

Tidak ada.

Dukungan Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan