Tutorial HTML <option>
HTML option Tag - belajar html option. Element
<option> mempunyai definisi sebagai daftar list pilihan yang digunakan oleh element html <select>. Dalam penulisannya pada html option ditulis sebagai anak element dari <select>, <datalist>, dan <optgroup>
Attribute HTML <option>
valueAttribute
value pada html option digunakan untuk menentukan nilai atau data asli sebagai kontrol dari suatu fungsi, misal dalam penggunaan javascript, kontrol data pengiriman ke server data dan lain sebagainya.Jika attribute value tidak disebutkan maka secara default akan mengambil data teks yang ada didalam element
<option>Contoh dengan mengikutsertakan attribute
value<b>Pilih Provinsi :</b>
<select>
<option value="jabar">Jawa Barat</option>
<option value="kalteng">Kalimantan Tengah</option>
<option value="sulsel">Sulawesi Selatan</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<b>Pilih Provinsi :</b>
<select id="select" onchange="demo();">
<option value="jabar">Jawa Barat</option>
<option value="kalteng">Kalimantan Tengah</option>
<option value="sulsel">Sulawesi Selatan</option>
</select>
<script>
function demo() {
var element = document.getElementById("select").value;
alert(element + " Terpilih");
}
</script>
</body>
</html>
Contoh dengan tanpa mengikutsertakan attribute
value<select>
<option>Jawa Barat</option>
<option>Kalimantan Tengah</option>
<option>Sulawesi Selatan</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<b>Pilih Provinsi :</b>
<select id="select" onchange="demo();">
<option>Jawa Barat</option>
<option>Kalimantan Tengah</option>
<option>Sulawesi Selatan</option>
</select>
<script>
function demo() {
var element = document.getElementById("select").value;
alert(element + " Terpilih");
}
</script>
</body>
</html>
selectedAttibute
selected digunakan sebagai daftar yang terpilih pada hasil yang ditampilkan untuk pertama kaliContoh :
<select>
<option>Jawa Barat</option>
<option selected="selected">Kalimantan Tengah</option>
<option>Sulawesi Selatan</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <select> <option>Jawa Barat</option> <option>Kalimantan Tengah</option> <option>Sulawesi Selatan</option> </select> <hr/> <select> <option>Jawa Barat</option> <option selected="selected">Kalimantan Tengah</option> <option>Sulawesi Selatan</option> </select> Kalimantan Tengah, terpilih dan ditampilkan pada pertama kali. </body> </html>
labelAttibute label dalam penggunaannya pada html
<option> berfungsi sebagai label atau judul dari element <option> itu sendiriContoh :
<select>
<option label="Provinsi Jawa Barat" value="jabar">
Jawa Barat
</option>
<option label="Provinsi Kalimantan Tengah" value="kalteng">
Kalimantan Tengah
</option>
<option label="Provinsi Sulawesi Selatan" value="sulsel">
Sulawesi Selatan
</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <p> <b>Catatan</b> : sampai artikel ini diterbitkan attribute Label belum support untuk browser Firefox. </p> <select> <option label="Provinsi Jawa Barat" value="jabar"> Jawa Barat </option> <option label="Provinsi Kalimantan Tengah" value="kalteng"> Kalimantan Tengah </option> <option label="Provinsi Sulawesi Selatan" value="sulsel"> Sulawesi Selatan </option> </select> <hr/> <h3>untuk test browser support</h3> <p>Gunakan browser yang berbeda untuk melihat hasil</p> <select> <option label="Provinsi Jawa Barat" value="jabar"></option> <option label="Provinsi Kalimantan Tengah" value="kalteng"></option> <option label="Provinsi Sulawesi Selatan" value="sulsel"></option> </select> </body> </html>
disabledAttribute
disabled jika digunakan pada html <option> maka element tersebut akan menjadi tidak berfungsi atau dalam keadaan nonaktifAttribute ini bersifat boolean, yang berarti attribute ini bisa ditulis valuenya dan juga bisa tidak disebutkan valuenya.
Contoh :
<select>
<option>Jawa Barat</option>
<option>Kalimantan Tengah</option>
<option>Sulawesi Selatan</option>
<option disabled="disabled">Luar Angkasa</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <select> <option>Jawa Barat</option> <option>Kalimantan Tengah</option> <option>Sulawesi Selatan</option> <option disabled="disabled">Luar Angkasa</option> </select> Daftar pilahan <b>Luar angkasa</b> tidak bisa dipilih </body> </html>
Global Attributes:
Element
<option> mencakup Global Attributes HTML.
Event Attributes:
Element
<option> mencakup Event Attributes HTML.
Browser Support :
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Default CSS :
Browser yang support dengan element
<option>, mempunyai nilai default :/* tidak ada */