Referensi Belajar HTML select tag. Tutorial dan panduan mengenai element <select>...</select> yang digunakan untuk menyeleksi opsi (daftar pilihan). Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <select>.


Deskripsi
Penjelasan HTML select

Select berarti memilih. HTML <select> element merepresentasikan sebuah kontrol yang digunakan untuk menyeleksi (memilih) deretan opsi (daftar pilihan) yang diberikan baik satu ataupun lebih dari satu pilihan.

Penggunaan element <select> dapat ditulis bersamaan dengan element <option> yang berisi daftar pilihan (opsi) yang dapat ditulis beberapa item sebagai daftar pilihan yang akan diseleksi oleh user.

Attributes
Atribut HTML Tag <select>

autofocus

Menetapkan bahwa kontrol (element <select>) akan mendapatkan fokus (berada padanya) ketika halaman selesai dimuat.

disabled

Menonaktifkan (tidak dapat diseleksi) <select> element.

form

<select> element yang menyertakan attribute form dengan value nama id dari sebuah <form> element, menunjukkan element <select> tersebut dibuat untuknya (<form> dengan id tersebut).

multiple

Menentukkan bahwa user boleh menyeleksi lebih dari satu value (pilihan) dari daftar yang disediakan.

name

Menentukkan nama untuk kontrol <select>.

required

Menetapkan bahwa user harus memilih satu atau lebih opsi yang diberikan pada kontrol <input>. Harus diisi dan tidak boleh diabaikan.

size

Menentukkan ukuran jumlah opsi yang dapat dilihat dari daftar yang diberikan.


Global Attributes
Atribut Secara Global (Keseluruhan)

<select> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<select> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <select> element

Contoh 1
HTML
<select>
  <option value="pos">POS Indonesia</option>
  <option value="jne">JNE</option>
  <option value="tiki">TIKI</option>
  <option value="wahana">Wahana</option>
</select>

Contoh 2

Ketika tidak ada pilihan awal yang diberikan, maka dapat menggunakan alternatif keterangan tambahan. Pada contoh ini juga menggunakan attribute required yang mengharuskan user untuk memilih salah satu.

HTML
<select name="kurir" required>
  <option value="">Pilih Jasa Kurir</option>
  <option value="pos">POS Indonesia</option>
  <option value="jne">JNE</option>
  <option value="tiki">TIKI</option>
  <option value="wahana">Wahana</option>
</select>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML select tag</title>
    <style>

    </style>
  </head>
  <body>
    <form action="voting_kurir.php" method="get">
      <p>Jasa kirim/Kurir apa yang Anda gunakan?</p>
      <label>Kurir:
        <select>
          <option value="pos">POS Indonesia</option>
          <option value="jne">JNE</option>
          <option value="tiki">TIKI</option>
          <option value="wahana">Wahana</option>
        </select>
      </label>
    </form>
  </body>
</html>