HTML fieldset tag | belajar <fieldset> element

HTML Fadlullah Fadul December 3, 2018

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

Value: disabled

form

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

Value: form_id

name

Menentukkan nama untuk fieldset.

Value: teks

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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>
SHARE
Previous Article Next Article