Select HTML: Dropdown, option, optgroup dan multiple

Cara membuat dropdown di HTML

Dropdown adalah elemen <select> dengan satu <option> untuk setiap pilihan. value setiap opsi adalah yang dikirim form; teks di antara tag-nya adalah yang dilihat pembaca. Pilih salah satu lalu tekan Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Form ini mengirim language=js: name milik select dan value opsi yang dipilih. selected mengatur pilihan default; tanpanya, opsi pertama yang dipilih. Kalau sebuah opsi tidak punya value, teksnya yang dikirim.

Hubungkan label ke select dengan for dan id (atau dengan membungkusnya) supaya mengklik label memfokuskan dropdown dan screen reader mengumumkannya.

Atribut select dan option

Opsi placeholder dengan required

Select selalu punya nilai, jadi tanpa placeholder, opsi sungguhan pertama tetap dikirim walaupun pembaca tidak pernah menyentuh dropdown-nya. Opsi pertama yang kosong memperbaikinya, dan required menghentikan pengiriman sampai opsi sungguhan dipilih:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Tekan Continue sebelum memilih: browser menolak dan memintamu memilih sebuah item. Placeholder-nya punya value="", yang dianggap kosong oleh required, dan disabled supaya tidak bisa dipilih lagi begitu sebuah negara dipilih.

Mengelompokkan opsi dengan optgroup

<optgroup label="..."> memberi judul di atas sekumpulan opsi. Judul itu tidak bisa dipilih:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Grup tidak bisa disarangkan: sebuah daftar hanya punya satu tingkat judul, tidak lebih. disabled pada <optgroup> menonaktifkan semua opsi di dalamnya.

Pilihan ganda

multiple membuat pembaca bisa memilih beberapa opsi, dan mengubah dropdown menjadi list box. Tahan Ctrl (Cmd di Mac) untuk menambahkan opsi satu per satu, atau Shift untuk memilih rentang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Form ini mengirim skills=html dan skills=css: nama yang sama sekali untuk setiap opsi yang dipilih. Banyak orang tidak tahu gerakan Ctrl+klik, jadi untuk beberapa opsi saja, sekumpulan checkbox lebih mudah dipakai.

Membaca dan mengatur nilai di JavaScript

select.value membaca dan mengatur nilai opsi yang dipilih, dan event change terpicu saat pembaca memilih opsi lain. Penggunaan yang umum adalah dropdown kedua yang opsinya bergantung pada dropdown pertama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) membuat sebuah opsi. select.selectedIndex adalah posisi opsi yang dipilih, dan select.selectedOptions berisi opsi-opsi yang dipilih, yang merupakan cara membaca select multiple.

Styling select

Daftar dropdown yang terbuka digambar oleh browser dan sistem operasi, dan hanya sedikit bagiannya yang bisa diatur gayanya. Kotak tertutupnya bisa: appearance: none menghapus panah bawaan, dan sebuah background image memasang panahmu sendiri di tempatnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Padding tambahan di sisi akhir memberi ruang untuk panah, supaya teks opsi yang panjang tidak tertimpa panahnya. font: inherit sama pentingnya di sini seperti pada tombol: secara default select memakai font form browser yang kecil. Opsi-opsi di daftar yang terbuka tetap berpenampilan bawaan. Chrome juga bisa mengatur gaya daftar yang terbuka kalau kamu memilihnya dengan appearance: base-select; browser yang belum mendukungnya menampilkan daftar bawaan. Kendali penuh di semua browser butuh widget kustom yang dibuat dengan ARIA, dan itu jauh lebih sulit dibuat dengan benar daripada kelihatannya.

select, radio button atau datalist?

Kesalahan umum

• Tanpa placeholder pada pilihan yang wajib. Opsi sungguhan pertama tetap dikirim walaupun pembaca tidak pernah memilihnya.
• Placeholder dengan nilai sungguhan, seperti value="none". required menganggapnya pilihan yang valid. Pakai value="".
• Opsi tanpa value saat teksnya panjang atau diterjemahkan. Server menerima teks yang terlihat, yang berubah sesuai bahasanya.
• multiple untuk beberapa opsi saja. Checkbox lebih mudah dipakai.
• Mendengarkan click pada opsi. Pakai change pada <select>; event ini juga terpicu untuk perubahan lewat keyboard.
• Tanpa label. Select yang hanya punya placeholder tidak punya nama lagi begitu sebuah opsi dipilih.