HTML element tag <option> merupakan tag pada HTML yang digunakan untuk menciptakan pilihan dalam bentuk menu drop down. Pilihan yang dapat dipilih oleh pengguna adalah satu. HTML element tag <option> mirip dengan input type radio. Namun element tag <option> tertata dan teroganisir lebih rapi serta cara mendapatkan data yang terkirim pada sisi server jauh lebih mudah.
HTML element tag <option> adalah anakan sekaligus pasangan dari element tag <select> yang keduanya tidak bisa dipisahkan apalagi berdiri sendiri. Element tag <option> merupakan butir pilihan dari suatu daftar dimana pengguna dapat memilih satu pilihan yang disajikan. Nilai yang dikandung pada element tag <option> adalah nilai data yang akan dikirim menuju server. Sedangkan variabel datanya berada pada atribut name pada element tag <select>.
Teks pilihan merupakan butir pilihan dituliskan di antara tag pembuka <option> dan tag penutup </option>. Teks tersebut adalah tampilan bagi pengguna dan bukan merupakan data bagi keperluan pengiriman data ke server. Data yang akan dikirim dituliskan di dalam atribut value pada tag pembukanya.
Penggunaan Element Tag <option>
Element tag <option> dapat dibuat setelah element <select> diciptakan. Element ini adalah butir pilihan yang dapat dipilih oleh pengguna. Berikut ini contoh sederhana element tag <option> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag OPTION</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag OPTION</h1>
<form action="#" method="post">
<select name="makanan" id="makanan" required>
<option value="ayam bakar">Ayam Bakar</option>
<option value="nasi goreng">Nasi Goreng</option>
<option value="ayam penyet">Ayam Penyet</option>
<option value="sate kambing">Sate Kambing</option>
</select>
</form>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan :
Berikut contoh lengkap penggunaan element tag <option> :
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
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag OPTION</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag OPTION</h1>
<form action="#" method="post">
<p>
<label for="minuman">Pilih Minuman Favoritmu : </label>
<select name="minuman" id="minuman" required>
<option value="black cofee" selected>Black Cofee</option>
<option value="es sirup">Es Sirup</option>
<option value="es dawet">Es Dawet</option>
<option value="es buah">Es Buah</option>
<option value="coca cola">Coca Cola</option>
<option value="fanta">Fanta</option>
</select>
</p>
<p>
<label for="tempat_wisata">Pilih Tempat Wisata Favoritmu :</label>
<select name="tempat_wisata" id="tempat_wisata" required>
<option value="pantai ancol jakarta" selected>Pantai Ancol Jakarta</option>
<option value="ciater lembang">Ciater Lembang</option>
<option value="coastarina beach batam">Coastarina Beach Batam</option>
<option value="pantai kuta bali">Pantai Kuta Bali</option>
<option value="raja ampat papua">Raja Ampat Papua</option>
<option value="danau toba sumut">Danau Toba Sumut</option>
<option value="borobudur magelang">Borobudur Magelang</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 :
Di dalam suatu daftar pilihan kadang berisi butir pilihan yang sudah dikelompokkan berdasarkan kriteria tertentu. Untuk mengelompokkan butir-butir pilihan tersebut anda bisa menggunakan elemen HTML <optgroup> bersama dengan elemen <option>.
Atribut Khusus
Atribut yang terpenting pada elemen <option> adalah atribut value, yang mana atribut ini digunakan sebagai nilai yang digunakan sebagai nilai atau data yang akan dikirimkan server.
Berikut atribut khusus pada elemen <option> :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <option> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <option> 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 <option> 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 <option> pada HTML :
CSS
1
/* Tidak ada */
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
