Fungsi tag select pada form html

Apa fungsi tag select pada form html ?. Tag <select> digunakan untuk membuat daftar – daftar item dalam bentuk menu dropdown. Dalam membuat menu ini pun penggunaanya dikombinasikan dengan tag <optgroup> sebagai judul dari item – item yang terkategori, dan tag <option> yang mendefinisikan item – item tersebut.

Sederhananya, tag <select> dideklarasikan dengan cara seperti ini :

<!DOCTYPE HTML>
<html>
<head>
 <title>Tag Select</title>
</head>
<body>
 <select>
  <optgroup label="Germany">
   <option>Berlin</option>
   <option disabled>Munchen</option>
  </optgroup>
  <optgroup label="England">
   <option selected>Arsenal</option>
   <option>Manchester</option>
   <option>London</option>
  </optgroup>
 </select>
</body>
</html>

Dan di bawah ini adalah hasilnya :

fungsi tag select pada form html

Tag select dengan atribut disabled

Anda pun dapat mendisabled pembuatan tag  <select> ini menggunakan atribut disabled.

<!DOCTYPE HTML>
<html>
<head>
 <title>Tag Select</title>
</head>
<body>
 <select disabled="disabled">
  <optgroup label="Germany">
   <option>Berlin</option>
   <option disabled>Munchen</option>
  </optgroup>
 </select>
</body>
</html>

Dan di bawah ini adalah hasilnya :

tag select atribut disabled

Mengatur ukuran tag <select>

Anda juga mengatur ukuran pada tag <select> ini, karena secara default ukurannya adalah 1.

Dengan mengatur ukuran lebih dari 1, anda dapat menampilkan beberapa item yang ada pada tag ini.

Berikut kode sumbernya :

<!DOCTYPE HTML>
<html>
<head>
 <title>Tag Select</title>
</head>
<body>
 <select size="6">
  <optgroup label="Germany">
   <option>Berlin</option>
   <option disabled>Munchen</option>
  </optgroup>
  <optgroup label="England">
   <option selected>Arsenal</option>
   <option>Manchester</option>
   <option>London</option>
  </optgroup>
 </select>
</body>
</html>

Dan di bawah ini adalah hasilnya :

mengatur ukuran tag select

Multiple Select

Anda juga dapat menyeleksi data lebih dari 1, caranya adalah menambahkan atribut multiple pada tag <selected>.

<!DOCTYPE HTML>
<html>
<head>
 <title>Tag Select Atribut Multiple</title>
</head>
<body>
 <select multiple>
  <optgroup label="Sumatra">
   <option value="Aceh">Aceh</option>
   <option value="Palembang">Palembang</option>
   <option value="Lampung">Lampung</option>
  </optgroup>
  <optgroup label="Jawa">
   <option value="Malang">Malang</option>
   <option value="Yogyakarta">Yogyakarta</option>
   <option value="Surabaya">Surabaya</option>
  </optgroup>
  <optgroup label="Kalimantan">
   <option value="Banjarmasin">Banjarmasin</option>
   <option value="Pontianak">Pontianak</option>
  </optgroup>
 </select>
</body>
</html>

Di bawah ini adalah hasil dari kode sumber di atas, untuk memilih lebih dari 1 data, klik data tersebut sambil menekan ctrl.

atribut multiple pada elemen select

Leave a comment

Your email address will not be published. Required fields are marked *