tRikSonic
Tema

HTML fieldset Tag

Terakhir diperbarui : 24 Mei 2018 - 19.28

Penjelasan HTML fieldset :

HTML fieldset Tag - belajar html <fieldset>, element <fieldset> mempunyai definisi sebagai element pembungkus dari kelompok tertentu dari hasil input data pada sebuah form.
background html
Dalam penulisan element <fieldset>, ditulis didalam element <form> dilanjutkan dengan element <fieldset> , <legend> dan element yang terkait dengan element form.

Contoh html element <fieldset> :

<form>
 <fieldset>
 <legend>BIODATA</legend>
   Nama Depan : <input type="text"/> <br/>
   Nama Belakang : <input type="text"/> <br/>
   alamat : <input type="text"/>
 </fieldset>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<form>
 <fieldset>
 <legend>BIODATA</legend>
   Nama Depan : <input type="text"/> <br/>
   Nama Belakang : <input type="text"/> <br/>
   alamat : <input type="text"/>
 </fieldset>
</form>

</body>
</html>

Attributes :

Attribute HTML <fieldset>
Attribute Value Deskripsi
disabled disabled menentukan area pada element menjadi nonaktif.
Attribute ini bersifat boolean, yang berarti nilai dari value ini bisa ditulis ataupun tidak

Contoh :

<form>
 <fieldset disabled="disabled">
 <legend>BIODATA</legend>
   Nama Depan : <input type="text"/> <br/>
   Nama Belakang : <input type="text"/> <br/>
   alamat : <input type="text"/>
 </fieldset>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<form>
 <fieldset disabled="disabled">
 <legend>BIODATA</legend>
   Nama Depan : <input type="text"/> <br/>
   Nama Belakang : <input type="text"/> <br/>
   alamat : <input type="text"/>
 </fieldset>
</form>

</body>
</html>
Attribute Value Deskripsi
form form_id id unik dari attribute fieldset.
Attribute ini digunakan jika element <fieldset> berada diluar element <form>. Nilai dari value ini mengambil ID dari element <form> yang menjadi target.
Catatan :
Penulisan nilai value harus 100% sama dengan ID element <form> yang menjadi target, baik huruf besar / kecil, maupun karakter.

Contoh :

<form id="demo123">
  Nama Depan : <input type="text"/> <br/>
  Nama Belakang : <input type="text"/> <br/>
  Alamat : <input type="text"/>
</form>

<fieldset form="demo123">
<legend>Data Tambahan</legend>
  Umur : <input type="number"/ value="10"> <br/>
  Golongan Darah : <input type="text"/> <br/>
  Status : <input type="text"/>
</fieldset>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<form id="demo123">
  Nama Depan : <input type="text"/> <br/>
  Nama Belakang : <input type="text"/> <br/>
  Alamat : <input type="text"/>
</form>

<br/>

<fieldset form="demo123">
<legend>Data Tambahan</legend>
  Umur : <input type="number"/ value="10"> <br/>
  Golongan Darah : <input type="text"/> <br/>
  Status : <input type="text" placeholder="nikah atau belum nikah"/>
</fieldset>

</body>
</html>
Attribute Value Deskripsi
nameteks menentukan nama attribute fieldset

Contoh :

<form>
 <fieldset name="biodata">
 <legend>BIODATA</legend>
   Nama Depan : <input type="text"/> <br/>
   Nama Belakang : <input type="text"/> <br/>
   alamat : <input type="text"/>
 </fieldset>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<form>
 <fieldset name="biodata">
 <legend>BIODATA</legend>
   Nama Depan : <input type="text"/> <br/>
   Nama Belakang : <input type="text"/> <br/>
   alamat : <input type="text"/>
 </fieldset>
</form>

</body>
</html>

Global Attributes:

Element <fieldset> mencakup Global Attributes HTML.

Event Attributes:

Element <fieldset> mencakup Event Attributes HTML.

Browser Support :

Desktop

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <fieldset>, biasanya mempunyai nilai default :
fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.