Belajar Element HTML: <option>

Tag <option> mewakili opsi dalam elemen <select> atau sebagai bagian dari daftar saran dalam elemen <datalist>.

Tag <option> dapat digunakan sebagai anak dari elemen <select>, <datalist>, dan <optgroup>.

Syntax

Tag <option> ditulis seperti <option></option> dengan konten elemen dimasukkan diantara tag pembuka dan penutup.

Atribut value biasanya digunakan untuk memberikan nilai yang dapat dirujuk oleh script apapun yang memproses form.

Seperti ini:

<select name="Kota">
	<option value="jakarta">Jakarta</option>
	<option value="surabaya">Surabaya</option>
	<option value="malang">Malang</option>
</select>
<select name="country">
  <option value="Argentina">Argentina</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Brazil">Brazil</option>
  <option value="Chile">Chile</option>
  <option value="Colombia">Colombia</option>
  <option value="Ecuador">Ecuador</option>
  <option value="Guyana">Guyana</option>
  <option value="Paraguay">Paraguay</option>
  <option value="Peru">Peru</option>
  <option value="Suriname">Suriname</option>
  <option value="Uruguay">Uruguay</option>
  <option value="Venezuela">Venezuela</option>
</select>

value

Menentukan nilai <select> jika opsi ini dipilih.

Required.

"south-africa"

Nilai ini akan dikirim ke server ketika formulir dikirimkan.

<select>
  <option value="south-africa">South Africa</option>
</select>

label

Menentukan label untuk opsi.

"Republic of South Africa"

Label akan menggantikan opsi teks bagian dalam.

<select>
  <option value="south-africa" label="Republic of South Africa">South Africa</option>
</select>

disabled

Menonaktifkan opsi.

No value required.

Opsi tetap terlihat tetapi tidak dapat dipilih lagi.

<select>
  <option>Monday</option>
  <option>Tuesday</option>
  <option disabled>Wednesday</option>
  <option disabled>Thursday</option>
  <option>Friday</option>
  <option>Saturday</option>
  <option>Sunday</option>
</select>

selected

Memilih opsi ketika halaman web dimuat.

No value required.
<select>
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
  <option selected>Friday</option>
  <option>Saturday</option>
  <option>Sunday</option>
</select>