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.
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 |
|---|---|---|
name | teks |
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
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
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);
}