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);
}