Fieldset, Legend, Select, Option, Option Group, dan Datalist di HTML
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!