Belajar HTML: Fieldset dan Legend

Daftar Isi

Kali ini saya mau merangkum apa yang baru saya pelajari lagi tentang dasar-dasar kode pemrograman HTML. Kode yang akan saya bahas kali ini adalah <fieldset> dan <legend>. Untuk kamu yang belum tahu atau kurang familiar dengan kedua elemen tersebut, silahkan baca tulisan saya berikut untuk menguliknya.

Apa itu Fieldset dan Legend?

1. Fieldset

Fieldset adalah elemen HTML yang berfungsi untuk mengelompokkan beberapa elemen dalam satu kolom. Fieldset akan membuat garis yang membatasi antar satu fieldset dengan yang lain.

Secara semantik, fieldset merupakan elemen yang mendukung elemen <form>. Contohnya adalah seperti ini:

<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Meskipun begitu, browser tetap dapat memproses elemen fieldset meskipun tidak berada di dalam elemen <form>.

2. Legend

Elemen <legend> merupakan elemen pendukung untuk elemen <fieldset>. Elemen ini berfungsi sebagai caption yang menjelaskan isi yang ada di dalam fieldset.

Elemen <legend> secara semantik harus berada di dalam elemen fieldset. Jika tidak, maka browser tidak dapat me-render elemen ini sebagaimana mestinya.

Pada saat elemen ini ada di dalam elemen fieldset, maka browser akan me-render sebagai caption dari fieldset yang menjadi induknya. Lalu, browser akan menempatkan konten yang ada di dalam legend di pojok kiri atas fieldset.

Catatan: Elemen legend akan tetap ditempatkan di pojok kiri atas dari fieldset meskipun ditempatkan setelah elemen lain di dalam elemen fieldset.

Default CSS

Berikut adalah CSS bawan dari elemen <fieldset> dan <legend> yang digunakan oleh mayoritas browser besar yang ada.

1. Fieldset

fieldset{display:block;margin-left:2px;margin-right:2px;border:2px groove (internal value);padding:.35em .75em .625em}

2. Legend

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

Atribut HTML

Berikut adalah atribut yang bisa digunakan untuk elemen <fieldset>. Sedangkan untuk elemen <legend> tidak ada atribut khusus yang bisa digunakan. Tentu saja kedua elemen juga dapat menggunakan Atribut HTML Umum / Global.

1. Fieldset

Tabel Atribut HTML Fieldset

Atribut	Nilai	Keterangan	Contoh
disabled	disabled	Membuat element tidak berfungsi atau nonaktif.	<fieldset disabled='disabled'>
form	id form yang terkait	Menginformasikan browser bahwa fieldset tersebut merupakan bagian dari elemen tertentu.	<fieldset form='form-login'>
name	text	Nama khusus untuk elemen.	<fieldset name='Login Info'>
Atribut Umum	-	Elemen ini juga bisa menggunakan atribut-atribut umum untuk HTML.	-

Kamu bisa menggunakan beberapa atribut sekaligus selama tidak ada atribut yang sama dalam satu elemen.

Contoh Penerapan

Perhatikan bagaimana browser memperlakukan elemen <legend> yang ada di dalam contoh fieldset kedua. Meskipun saya taruh di bagian bawah setelah beberapa elemen lain, elemen legend tetap diposisikan ke bagian kiri atas dari elemen fieldset ini.

Meski begitu, jika kamu menerapkan elemen legend dengan metode yang dicontohkan pada Contoh 2, maka kamu akan menerima pesan error pada saat kamu memeriksa format HTML kamu di W3C. Kurang lebih seperti ini:

Itu terjadi karena contoh kedua tidak mengikuti semantik yang seharusnya. Elemen legend harus ada di urutan pertama dalam elemen fieldset. Itu adalah urutan yang benar. Meski begitu, saya ingin memberikan contoh bagaimana browser sebenarnya memperlakukan elemen legend.

Catatan

Ada beberapa catatan yang ingin saya bagikan berdasarkan hasil percobaan yang saya lakukan saat mempelajari kedua elemen ini.

1. Elemen <legend> dapat diisi dengan elemen HTML lain. Namun, saya sarankan untuk tetap mengutamakan teks yang ada di dalam elemen ini.
2. Elemen <fieldset> juga dapat diisi dengan elemen apapun tanpa batasan.

Penutup

Itulah rangkmuan yang saya dapat tuliskan untuk elemen <fieldset> dan <legend>. Lebih dan kurangnya akan saya tambahkan ketika saya menemukan informasi baru tentang kedua elemen ini.

Jika kamu mempunyai informasi tambahan yang menurutmu penting untuk ditambahkan untuk artikel ini, silahkan sampaikan melalui kolom komentar di bawah. Jika urgensimu ternyata benar, maka akan saya perbaharui tulisan ini.

Baca juga tulisan saya lainnya tentang Belajar HTML yang saya buat sebagai kurikulum belajar pribadi. Bisa kamu akses disini: Ringkasan Materi Belajar HTML.

Terima kasih dan sampai jumpa di tulisan saya lainnya.