Referensi Belajar HTML fieldset tag. Tutorial dan panduan mengenai element <fieldset>...</fieldset>. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <fieldset>.


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

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

Contoh 2

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

HTML
<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.

HTML
<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

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML fieldset tag</title>
    <style>

    </style>
  </head>
  <body>
    <h3>Contoh 1</h3>

    <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>

    <hr />
    <h3>Contoh 2</h3>

    <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>

    <hr />
    <h3>Contoh 3</h3>

    <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>

  </body>
</html>