Oke, ini adalah topik baru yang akan saya angkat secara berseri, ya bagi anda yang sudah menjadi master web mungkin menganggap ini adalah sesuatu yang kecil dan remeh, tapi itu kan hanya berlaku bagi yang sudah di level master web bukan? So, lets fun with ourself. Saya tidak akan mengulas tentang semua tag-tag html yang sudah sering dipakai seperti tag heading (h1….h6), table, ul, ol, input, form dan lain sebagainya. Akan tetapi saya akan mengulas beberapa tag yang sebenarnya akan sangat bermanfaat dalam desain web anda, tetapi tag-tag itu seakan terabaikan oleh kita sendiri :p. Tag tersebut adalah tag fieldset dan legend.
Tag fieldset adalah tag yang berfungsi untuk mengelompokkan komponen-komponen masukan (input), sedangkan tag legend adalah tag yang berfungsi untuk memberi keterangan nama dari tag fieldset. Bingung? Sebagai ilustrasi output yang akan dihasilkan dari pembahasan ini adalah sebagai berikut:
Kode html nya adalah sebagai berikut:
<fieldset><legend>Formulir Pendaftaran Peserta</legend> <table> <tbody> <tr> <td> <fieldset><legend>Data Diri Peserta</legend> <table> <tbody> <tr> <td>Nama Lengkap</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> <tr> <td>Tempat/tanggal Lahir</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> <tr> <td>Agama</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> </tbody> </table> </fieldset> </td> </tr> <tr> <td> <fieldset><legend>Hobi Peserta</legend> <table> <tbody> <tr> <td>Hobi Pertama</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> <tr> <td>Hobi Kedua</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> <tr> <td>Hobi Ketiga</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> <tr> <td>Hobi Keempat</td> <td>:</td> <td><input type="text" name="nama" /></td> </tr> </tbody> </table> </fieldset> </td> </tr> </tbody> </table> </fieldset>