tRikSonic
Tema
  • Original
  • Translate

HTML option Tag

Terakhir diperbarui : 23 Mei 2018 - 08.09

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>
background html

Attribute HTML <option>

value
Attribute 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>
selected
Attibute selected digunakan sebagai daftar yang terpilih pada hasil yang ditampilkan untuk pertama kali
Contoh :
<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>
label
Attibute label dalam penggunaannya pada html <option> berfungsi sebagai label atau judul dari element <option> itu sendiri
Contoh :
<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>
disabled
Attribute disabled jika digunakan pada html <option> maka element tersebut akan menjadi tidak berfungsi atau dalam keadaan nonaktif
Attribute 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 :

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Default CSS :

Browser yang support dengan element <option>, mempunyai nilai default :
/* tidak ada */
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.