HTML

#17: Penggunaan Tag Fieldset dan Tag Legend Pada HTML

Mandan Koding15 Oktober 20221

Tag Fieldset

Tag <fieldset> pada HTML di gunakan untuk mengelompokkan elemen-elemen input yang ada di dalam form HTML berdasarkan kelompoknya.

Pengunaan <fieldset> hanya optional saja, akan tetapi < fieldset> memudahkan user untuk mengisi form yang memiliki inputan yang banyak.

Fieldset pada form akan membentuk garis kotak yang mengelilingi elemen input.

Di dalam tag < fieldset > terdapat tag <legend> yang berfungsi untuk membuat caption/judul dari tag <fieldset>.

Berikut contoh penggunaan <fieldset>:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML Fieldset Tag</title>
</head>
<body>

<form>
	
<fieldset>
	<legend>Data Pribadi</legend>
	<p>
	<label for="nama">Nama Lengkap</label>
	<input type="text" name="nama" id="nama">
	</p>
	<p>
		<label>Jenis Kelamin : </label>
		<input type="radio" name="jekel" value="pria" id="jekel1"> 
		<label for="jekel1">Pria</label>
		<input type="radio" name="jekel" value="wanita" id="jekel2"> 
		<label for="jekel2">Wanita</label>
	</p>
	<p>
	<label for="tgl_lahir">Tanggal Lahir</label>
	<input type="date" name="tgl_lahir" id="tgl_lahir">
	</p>
</fieldset>

<fieldset>
	<legend>Data Ayah</legend>
	<p>
	<label for="nama">Nama Ayah</label>
	<input type="text" name="nama" id="nama">
	</p>
	<p>
	<label for=" tgl_lahir ">Tanggal Lahir</label>
	<input type="date" name=" tgl_lahir " id=" tgl_lahir ">
	</p>
	<p>
	<label for="pekerjaan">Pekerjaan</label>
	<input type="text" name="pekerjaan" id="pekerjaan">
	</p>
</fieldset>

<fieldset>
	<legend>Data Ibu</legend>
	<p>
	<label for="nama">Nama Ibu</label>
	<input type="text" name="nama" id="nama">
	</p>
	<p>
	<label for=" tgl_lahir ">Tanggal Lahir</label>
	<input type="date" name=" tgl_lahir " id="tgl_lahir ">
	</p>
	<p>
	<label for="pekerjaan">Pekerjaan</label>
	<input type="text" name="pekerjaan" id="pekerjaan">
	</p>
</fieldset>

</form>
</body>
</html>

Jalankan code di atas dan lihat hasilnya:

Atribut Disabled

Atribut disabled pada tag fieldset akan me non-aktifkan elemen input sehingga tidak dapat diklik dan tidak dapat diisi oleh user.

Perhatikan contoh berikut!

<fieldset disabled>
	<legend>Data Pribadi</legend>
	<p>
	<label for="nama">Nama Lengkap</label>
	<input type="text" name="nama" id="nama">
	</p>
	<p>
		<label>Jenis Kelamin : </label>
		<input type="radio" name="jekel" value="pria" id="jekel1"> 
		<label for="jekel1">Pria</label>
		<input type="radio" name="jekel" value="wanita" id="jekel2"> 
		<label for="jekel2">Wanita</label>
	</p>
	<p>
	<label for="tgl_lahir">Tanggal Lahir</label>
	<input type="date" name="tgl_lahir" id="tgl_lahir">
	</p>
</fieldset>

Jalankan code di atas dan lihat hasilnya:

Atribut Name

Pengunaan atribut name pada tag fieldset ini akan kita barengi dengan penggunaan atribut disabled. Nantinya user bisa memilih form mana yang akan diisi dan mana yang tidak ingin diisi. Caranya yaitu dengan menyisipkan sedikit code javascript di dalamnya tag <legend>

Perhatikan contoh berikut!

<fieldset name="nama" disabled>
	<legend>
	         <input type="checkbox" name="nama"
                     onchange="form.nama.disabled = !checked">Tampilkan nama Anda
	</legend>
	<label for="nama">Nama</label>
	<input type="text" name="nama" id="nama">
</fieldset>

<fieldset name="comment_post" disabled>
	<legend>
		<input type="checkbox" name="comment"
                        onchange="form.comment_post.disabled = !checked">Berikan Komentar!
	</legend>
	<textarea rows="5" cols="25">Berkomentarlah dengan baik dan sopan</textarea>
</fieldset>

Jalankan code di atas dan lihat hasilnya: