Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <select> Pada HTML

previous Previous Page

Elemen <select> pada HTML digunakan untuk melakukan pemilihan atau seleksi terhadap satu atau beberapa deretan pilihan (option) yang diberikan. Elemen ini digunakan bersama satu atau beberapa buah elemen <option> yang merupakan daftar pilihannya dalam bentuk menu drop down. Pada dasarnya elemen <select> digunakan untuk menciptakan daftar atau menu.

Elemen <select> berfungsi untuk menetapkan daftar bagi item-item pilihannya atau wadah bagi item-item tersebut. Item-item di dalam elemen <select> ditetapkan oleh elemen <option>. Nilai atau value data yang berada di dalam elemen <option> ini yang nantinya dikirimkan ke server.

Contoh Sederhana Elemen <select>

Berikut ini contoh sederhana, untuk membuat daftar kota pada elemen <select> :

1.  <label for="kota">Pilihlah kota :</label>
2.  <select name="kota" id="kota">
3.  <option value="batam">Batam</option>
4.  <option value="jakarta">Jakarta</option>
5.  <option value="palembang">Palembang</option>
6.  <option value="surabaya">Surabaya</option>
7.  </select>
8.  

Jika dijalankan hasilnya seperti dibawah ini:

Atribut Khusus Pada Elemen <select>

Atribut khusus yang sering digunakan bagi elemen <select> :

  • name
    Menetapkan nama elemen <select> yang digunakan untuk menandai control elemen untuk di kirim ke server.
  • size
    Menetapkan jumlah opsi yang terlihat pada daftar dari keseluruhan opsi/daftar.
  • multiple
    Menentukan bahwa pengguna dapat memilih lebih dari satu pilihan. Nilai : multiple
  • required
    Menentukan elemen select harus diisi dan tidak kosong sebelum data dikirim ke server saat tombol submit ditekan. Nilai : required
  • autofocus
    Menentukan elemen select agar tersorot pertama kali saat browser dimuat. Nilai : autofocus
  • disabled
    Menetapkan elemen select menjadi nonaktif dan tidak bisa dipilih atau disorot. Nilai : disabled
  • form
    Menetapkan elemen <form> tempat elemen <select> menginduk. Artinya select dapat ditempatkan dimanapun, saat form induknya disubmit / dikirimkan ke server maka data pada elemen <select> akan ikut terkirim bersama data form induknya.
    Nilai : id_form
  • onchange
    Terpicu saat terjadi proses penyeleksian. Nilai : Javascript function()
  • onfocus
    Terpicu saat elemen <select> dalam kodisi tersorot. Nilai : Javascript function()

Berikut ini contoh penggunaan elemen <select> pada halaman HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag select HTML</title>
6.  </head>
7.  <body>
8.     <form action="proses.php" method="post">
9.     <p>
10.    <label for="nama">Nama </label>
11.    <input type="text" name="nama" id="nama" required autocomplete maxlength="50">
12.    </p>
13.    <p>
14.    <label for="kota">Kota </label>
15.    <select name="kota" id="kota" required>
16.      <option value="">--pilih kota--</option>
17.      <option value="batam">Batam</option>
18.      <option value="jakarta">Jakarta</option>
19.      <option value="palembang">Palembang</option>
20.      <option value="surabaya">Surabaya</option>
21.    </select>
22.    </p>
23.    <p>
24.    <label for="usia">Usia </label>
25.    <select name="kota" id="usia" required>
26.      <option value="">--pilih usia--</option>
27.      <option value="17 tahun">17 Tahun</option>
28.      <option value="18 tahun">18 Tahun</option>
29.      <option value="19 tahun">19 Tahun</option>
30.      <option value="20 tahun">20 Tahun</option>
31.      <option value="21 tahun">21 Tahun</option>
32.      <option value="22 tahun">22 Tahun</option>
33.      <option value="23 tahun">23 Tahun</option>
34.      <option value="24 tahun">24 Tahun</option>
35.      <option value="25 tahun">25 Tahun</option>
36.    </select>
37.    </p>
38.    <p>
39.    <input type="submit" value="Kirim">
40.    <input type="reset" value="Reset">
41.    </p>
42.    </form>
43. </body>
44. </html>
45. 
46. 

Jika dijalankan akan menghasilkan tampilan sebagai berikut :

tag <select> html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<select>yayayayaya

Global Attributes :

Tag <select> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <select> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <select> pada HTML :

/* Tidak ada */

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML