Deskripsi
Penjelasan HTML fieldset

HTML <fieldset> element digunakan untuk merepresentasikan pengelompokkan daftar input pada sebuah form.

Daftar inputan dan konten sebuah form dapat dikelompokkan dalam satu group dan diberi nama tertentu menggunakan element <legend> yang ditulis langsung setelah element <fieldset>.

Penggunaan <fieldset> berkaitan dengan element <form> yang digunakan sebagai induk element dari <fieldset> itu sendiri.

Attributes
Atribut HTML Tag <fieldset>

disabled

Menunjukkan control (Inputan) pada form dinon-aktifkan atau tidak dapat diedit (diketik).

form

Menentukkan nama id dari sebuah <form> element yang mana fieldset itu diperuntukkan.

name

Menentukkan nama untuk fieldset.


Global Attributes
Atribut Secara Global (Keseluruhan)

<fieldset> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<fieldset> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <fieldset> element

Contoh 1

Contoh HTML element <fieldset> yang digunakan untuk mengelompokkan beberapa element menjadi satu grup dalam sebuah form

<form>
<fieldset>
 <legend>Tampilan Layar</legend>
 <p><label><input type=radio name=txtHitamPutih value=0 checked> Hitam Keputihan</label>
 <p><label><input type=radio name=txtPutihKehitaman value=1> Putih Kehitaman</label>
 <p><label><input type=checkbox name=lblHitamPutih> Gunakan Hitam Putih</label>
 <p><label>Kontras Layar <input type=range name=lblKontras list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>
</form>

Contoh 2

Contoh penggunaan fieldset dengan sebuah control checkbox yang menginstruksikan untuk mengaktifkan dan menon-aktifkan control inputan.

<fieldset name="memberfields" disabled>
 <legend> <label>
  <input type=checkbox name=member onchange="form.memberfields.disabled = !checked">
  Membership
 </label> </legend>
 <p><label>Nama Anggota: <input name=membername required></label></p>
 <p><label>Nomor Anggota: <input name=membernum required pattern="[-0-9]+"></label></p>
 <p><label>Berlaku Hingga: <input name=memberexp type=date></label></p>
</fieldset>

Contoh 3

Contoh <fieldset> element yang bersarang (nested), didalam sebuah element <fieldset> terdapat element <fieldset> yang lain.

<fieldset name="memberfields" disabled>
 <legend> <label>
  <input type=checkbox name=member onchange="form.memberfields.disabled = !checked">
  Keanggotaan
 </label> </legend>
 <p><label>Nama Anggota: <input name=membername required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=membertype onchange="form.numfields.disabled = !checked">
   Gunakan Nomor Kartu
  </label> </legend>
  <p><label>Nomor Kartu: <input name=membernum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="kodefields" disabled>
  <legend> <label>
   <input type=radio name=membertype onchange="form.kodefields.disabled = !checked">
   Gunakan Kode Kartu
  </label> </legend>
  <p><label>Kode Kartu: <input name=memberkode required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <fieldset>
Code Editor