Fieldset, Legend, Select, Option, Option Group, dan Datalist di HTML

Fieldset, Legend, Select, Option, Option Group, dan Datalist di HTML
Photo by Mediamodifier / Unsplash

Mau bikin form di HTML yang rapi dan fungsional? Yuk, kenalan dengan elemen-elemen penting ini: <fieldset>, <legend>, <select>, <option>, <optgroup>, dan <datalist>.

1. <fieldset> dan <legend>

<fieldset> dipakai buat ngelompokkin elemen-elemen dalam form yang saling terkait. Biar lebih jelas, tambahin <legend> sebagai judul kelompok tersebut.

Contoh:

<form>
  <fieldset>
    <legend>Informasi Pribadi</legend>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

2. <select> dan <option>

Buat bikin dropdown list, gunakan <select>. Di dalamnya, tambahkan beberapa <option> sebagai pilihan yang bisa dipilih pengguna.

Contoh:

<label for="kota">Pilih Kota:</label>
<select id="kota" name="kota">
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
  <option value="surabaya">Surabaya</option>
</select>

3. <optgroup>

Kalau punya banyak pilihan dalam <select>, kamu bisa kelompokkan mereka pakai <optgroup> biar lebih terstruktur. Jangan lupa tambahin atribut label buat judul kelompoknya.

Contoh:

<label for="buah">Pilih Buah:</label>
<select id="buah" name="buah">
  <optgroup label="Buah Tropis">
    <option value="mangga">Mangga</option>
    <option value="pisang">Pisang</option>
  </optgroup>
  <optgroup label="Buah Subtropis">
    <option value="apel">Apel</option>
    <option value="anggur">Anggur</option>
  </optgroup>
</select>

4. <datalist>

Kalau mau kasih saran input ke pengguna saat mereka ngetik, pakai <datalist>. Hubungkan dengan <input> lewat atribut list.

Contoh:

<label for="browser">Pilih Browser Favorit:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Dengan memahami dan menggunakan elemen-elemen ini, form di website kamu bakal jadi lebih terstruktur dan user-friendly. Selamat mencoba!