Belajar Element HTML: <legend>

Tag <legend> mewakili keterangan untuk elemen <fieldset>.

Elemen <fieldset> digunakan untuk mengelompokkan beberapa kontrol sebuah form dan diberi judul dengan <legend>.

Elemen <legend> ini bisa membuat form dan elemen lainnya lebih mudah dipahami oleh pengguna.

Misalnya, elemen <legend> bisa memberikan elemen <fieldset> dengan judul “Detail Nama” dan elemen lain diberi judul “Detail Alamat”.

Syntax

Tag <legend> ditulis seperti <legend></legend> dengan teks keterangan disisipkan diantara tag pembuka dan penutup.

Seperti ini:

<fieldset>
	<legend>Keterangan disii ...</legend>
	
	...Konten fieldset...
	
</fieldset>
<fieldset>
  <legend>Name Details</legend>
  <p>First Name: <input type="text" style="width:120px;"> Surname: <input type="text" style="width:120px;"></p>
  <p>Preferred Name: <input type="text" style="width:120px;"></p>
</fieldset>
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  <input type="radio" name="gender" value="other"> Other
</fieldset>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <legend> dengan pengaturan CSS:

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}