Apa itu option pada html?

Question

Saya menggunakan fungsi php ini untuk menghasilkan opsi, dan menyisipkannya ke HTML saya

Table of Contents Show

Tag <select> dan tag <option>
Atribut multiple pada tag <select>
Atribut selected pada tag <option>
Tag optgroup dan atribut label
Apa itu option dalam HTML?
Apa itu select option?
Apa kegunaan dari tag Optgroup?

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

Dan kemudian dalam kode halaman web saya, saya menggunakannya seperti di bawah ini;

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

Jika $ endmin dibuat dari variabel _POST setiap kali halaman dimuat (dan kode ini di dalam formulir yang memposting) maka nilai yang dipilih sebelumnya dipilih secara default.

Sudahkah Anda tahu bagaimana cara membuat menu dropdown pada form HTML? Menu dropdown pada form dibuat menggunakan kombinasi tag <select> dan tag <option>. Sebelumnya saya sudah menjelaskan pada artikel sebelumnya bahwa terdapat beberapa tag yang digunakan untuk membangun sebuah form diantaranya adalah tag <form>, tag <input>, tag <textarea>, dan tag <select>.

Pada tutorial sebelumnya kita sudah membahas tentang penggunaan tag <form>, tag <input> dan tag <textarea>. Nah, pada tutorial ini yang dibahas adalah mengenai tag <select> beserta dengan tag <option>, atribut multiple dan optgroup label pada tag <select> serta atribut selected pada tag <option>. Untuk lebih jelasnya mengenai tag dan atribut tersebut, mari simak tutorial dibawah ini:

Tag <select> dan tag <option>

Tag ini digunakan untuk membuat menu – menu atau daftar pilihan. Anda dapat menentukan jumlah pilihan yang akan ditampilkan dengan menggunakan atribut size. Dengan menggunakan tag ini, pengguna dapat memilih salah satu dari beberapa pilihan yang disediakan.

Pilihan – pilihan yang dibuat pada tag <select> ditulis didalam tag <option>. Tag <option> adalah tag yang berisi daftar pilihan berupa item – item yang nantinya akan diseleksi oleh pengguna. Tag ini diawali dengan tag pembuka <option> dan diakhiri dengan tag penutup </option>. Dibawah ini contoh penulisan dan penggunaan tag <select> di HTML :

<!DOCTYPE html>
<html>
 <head>
 <title>Penggunaan Tag Select pada form HTML</title>
 </head>
 <body>
  <form action="proses_input.php" method="get">
   Pilih Bulan Lahir Anda :
   <select name="bulanlahir">
    <option value="Januari">Januari</option>
    <option value="Februari">Februari</option>
    <option value="Maret">Maret</option>
    <option value="April">April</option>
    <option value="Mei">Mei</option>
  </select><br><br>
  <input type="submit">
 </form>
 </body>
</html>

Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini:

Atribut value di dalam elemen option menjadi nilai yang akan dikirim ke server ketika anda mengklik tombol submit.

Atribut multiple pada tag <select>

Atribut ini digunakan untuk menentukan bahwa pengguna dapat menyeleksi lebih dari satu pilihan dari beberapa pilihan yang disediakan. Atribut ini digunakan pada tag <select>. Penggunaan atribut multiple akan menjadi lebih mudah jika ditambahkan atribut size. Untuk menyeleksi item yang tersedia, klik item sambil menahan tombol ctrl. Berikut dibawah ini contoh penulisan dan penggunaan atribut multiple di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Atribut Multiple</title>
 </head>
 <body>
  <form action="proses_input.php" method="get">
   Pilih Buah Kesukaan Anda :<br>
   <select name="namabuah" multiple>
    <option value="Apel">Apel</option>
    <option value="Manggis">Manggis</option>
    <option value="Jeruk">Jeruk</option>
    <option value="Nanas">Nanas</option>
    <option value="Melon">Melon</option>
   </select><br><br>
  <input type="submit">
 </form>
 </body>
</html>

Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini:

Atribut selected pada tag <option>

Atribut ini digunakan pada tag <option> jadi tag <option> yang memiliki atribut selected akan menampilkan pilihan tag-nya sebagai item yang terpilih (pilihan default). Singkatnya, atribut selected digunakan untuk menentukan item yang terpilih pertama kali ketika halaman sudah web dimuat. Berikut dibawah ini contoh kode penulisan dan penggunaan atribut selected di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Atribut Selected</title>
 </head>
 <body>
  <form action="proses_input.php" method="get">
   Pilih Hewan Kesukaan Anda :<br>
   <select name="namahewan">
    <option value="Kucing">Kucing</option>
    <option value="Ular">Ular</option>
    <option value="Bebek" selected>Bebek</option>
    <option value="Kambing">Kambing</option>
    <option value="Kelinci">Kelinci</option>
   </select><br><br>
   <input type="submit">
  </form>
 </body>
</html>

Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini:

Tag optgroup dan atribut label

Tag <outgroup> ini digunakan untuk mengelompokkan beberapa pilihan atau item (elemen <option>) didalam daftar pilihan. Elemen <optgroup> berada didalam elemen <select> dan elemen <option> terletak di dalam elemen <optgroup>. Didalam tag ini terdapat atribut label yang dapat Anda gunakan untuk melabeli setiap grup dengan nama tertentu (penamaan grup), dimana nilai pada atribut label ini berupa teks.

Berikut dibawah ini contoh penulisan dan penggunaan tag <optgroup> dan atribut label di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Atribut Optgroup</title>
 </head>
 <body>
  <form action="proses_input.php" method="get">
  Pilih Kelas Anda :
   <select>
   <optgroup label="Sekolah Menengah Pertama">
    <option>Kelas VII</option>
    <option>Kelas VIII</option>
    <option>Kelas IX</option>
   </optgroup>
   <optgroup label="Sekolah Menengah Atas">
    <option>Kelas X</option>
    <option>Kelas XI</option>
    <option>Kelas XII</option>
   </optgroup>
   </select><br><br>
   <input type="submit">
  </form>
 </body>
</html>

Ketika kode HTML tersebut dijalankan, tampilannya di browser seperti ini:

Sekarang anda sudah paham bagaimana cara membuat menu dropdown pada form HTML dengan menggunakan beberapa tag dan atribut yang sudah saya jelaskan diatas.

Editor: Muchammad Zakaria

“If you’re doing your best, you won’t have any time to worry about failure.” H. Jackson Brown, Jr.

Apa itu option dalam HTML?

Deskripsi. Penjelasan HTML option HTML <option> element merepresentasikan sebuah opsi (pilihan dari daftar alternatif). Jadi, opsi ditulis lebih dari satu sebagai daftar untuk memilih pilihan yang diinginkan oleh user.

Apa itu select option?

Elemen Select Option adalah elemen yang diperuntukkan untuk pengguna dapat memilih sebuah elemen diantara beberapa pilihan.

Apa kegunaan dari tag Optgroup?

HTML element tag <optgroup> (option group) merupakan tag pada HTML yang digunakan untuk mengelompokkan butir pilihan (option) di dalam suatu daftar pilihan agar menjadi lebih teratur. HTML element tag <optgroup> akan memudahkan pengguna untuk memilih pilihan jika pilihan yang disajikan memiliki jumlah yang banyak.

kode html HTML radio button Checkbox HTML Bootstrap 5