HTML select tag | belajar <select> element

HTML Fadlullah Fadul December 3, 2018

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.

Value: autofocus

disabled

Menonaktifkan (tidak dapat diseleksi) <select> element.

Value: disabled

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).

Value: form_id

multiple

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

Value: multiple

name

Menentukkan nama untuk kontrol <select>.

Value: nama untuk kontrol

required

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

Value: required

size

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

Value: nomor

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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>
SHARE
Previous Article Next Article