HTML elemen tag <select> merupakan tag pada HTML digunakan untuk melakukan pemilihan dan seleksi terhadap satu pilihan dari beberapa deretan pilihan (option) yang diberikan. HTML element tag <select> merupakan elemen induk bagi HTML element tag <option>. HTML element tag <select> merupakan elemen yang bertanggungjawab atas data yang akan dikirimkan menuju server. Data yang akan dikirimkan akan ditampung melalui atribut name. Kemudian sisi server akan menggunakan nama (name) dari element ini sebagai variabel datanya.
HTML elemen tag <select> digunakan bersama satu atau beberapa buah element <option>. Element <option> merupakan daftar pilihan yang disajikan dalam bentuk menu drop down. Pada dasarnya element tag <select> digunakan untuk menciptakan daftar atau menu.
HTML elemen tag <select> berfungsi untuk menetapkan daftar bagi item-item pilihan dalam bentuk HTML element tag <option>. Nilai (value) data pada element tag <option> digunakan sebagai nilai data yang dikirimkan menuju server.
Contoh Sederhana Element Tag <select>
HTML elemen tag <select> dapat diciptakan pada halaman HTML paling sedikit dengan menyertakan atribut name. Atribut name adalah hal yang sangat penting sebagai nama varibel yang akan ditangkap pada sisi server.
Berikut ini contoh sederhana, untuk membuat daftar kota dengan menggunakan HTML element tag <select> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag SELECT</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag SELECT</h1>
<form action="#" method="post">
<label for="kota">Pilihlah kota :</label>
<select name="kota" id="kota">
<option value="batam">Batam</option>
<option value="jakarta">Jakarta</option>
<option value="palembang">Palembang</option>
<option value="surabaya">Surabaya</option>
</select>
</form>
</body>
</html>
Jika dijalankan hasilnya seperti dibawah ini:
Berikut ini contoh penggunaan HTML element tag <select> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag SELECT</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag SELECT</h1>
<form action="#" method="post">
<p>
<label for="nama">Nama : </label>
<input type="text" name="nama" id="nama" required autocomplete maxlength="50">
</p>
<p>
<label for="kota">Kota : </label>
<select name="kota" id="kota" required>
<option value="">--pilih kota--</option>
<option value="batam">Batam</option>
<option value="jakarta">Jakarta</option>
<option value="palembang">Palembang</option>
<option value="surabaya">Surabaya</option>
</select>
</p>
<p>
<label for="usia">Usia : </label>
<select name="kota" id="usia" required>
<option value="">--pilih usia--</option>
<option value="17 tahun">17 Tahun</option>
<option value="18 tahun">18 Tahun</option>
<option value="19 tahun">19 Tahun</option>
<option value="20 tahun">20 Tahun</option>
<option value="21 tahun">21 Tahun</option>
<option value="22 tahun">22 Tahun</option>
<option value="23 tahun">23 Tahun</option>
<option value="24 tahun">24 Tahun</option>
<option value="25 tahun">25 Tahun</option>
</select>
</p>
<p>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan sebagai berikut :
Atribut Khusus Pada Elemen <select>
Atribut khusus yang sering digunakan bagi elemen <select> :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <select> | ya | ya | ya | ya | ya |
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 :
CSS
1
/* Tidak ada */
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
