Pada kesempatan kali ini saya akan menjelaskan fungsi tag legend di HTML. Perlu teman-teman ketahui sebelumnya, <legend> adalah salah satu tag HTML yang dapat merepresentasikan suatu judul untuk konten induknya, Beberapa control dalam sebuah form dapat dikelompokkan didalam element tag <fieldset> dan diberi judul dengan <legend>. Namun dalam penggunaannya, element tersebut ditulis secara langsung “tanpa diawali dengan element lainnya” sebagai anak element dari tag <fieldset> tersebut. tag <legend> tersebut mencakup global attributes, yang artinya dimana tag tersebut dapat disisipkan semua attribute yang termasuk ke dalam global attribute yang secara umum berlaku untuk semua tag di HTML.
Selain itu tag <legend> tersebut mencakup event attribute, yang artinya dimana attribute tersebut akan dijalankan ketika ada interaksi dari user atau di dalam suatu peristiwa kejadian. Penggunaan tag <legend> tersebut harus digunakan secara bersamaan karena dari kedua tag tersebut saling adanya keterkaitan. Dan fungsi untuk tag <fieldset> yaitu untuk mengelompokan beberapa objek di form.
Jadi, untuk teman-teman yang ingin membuat judul di suatu form yang dikelompokan, dapat menggunakan tag <legend>, berikut teman-teman bisa ikuti contoh yang saya buat disini.
Berikut Contohnya :
- Teman-teman bisa buat folder project terlebih dahulu, dimana untuk folder tempat penyimpanan file yang akan dibuat selanjutnya
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html, yang tersimpan di folder yang sebelumnya sudah teman-teman buat
- Jika sudah, teman-teman bisa tuliskan kode seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fungsi Tag legend Di HTML - Dumet School</title>
<meta name="description" content="DUMET School adalah tempat kursus website di Jakarta, Depok, Bogor, Bekasi dan Tangerang terbaik 2017." />
</head>
<body>
<form>
<fieldset>
<legend>Data Diri Calon Siswa</legend>
<label for="nama_lengkap">Nama Lengkap</label>
<input type="text" name="nama_lengkap" id="nama_lengkap" required="">
<label for="no_telp">Nomor Telpon</label>
<input type="text" name="no_telp" id="no_telp" required="">
<label for="email">Email</label>
<input type="email" name="email" id="email" required="">
<label for="tgl_lahir">Tanggal Lahir</label>
<input type="date" name="tgl_lahir" id="tgl_lahir" required="">
<label for="alamat">Alamat</label>
<textarea name="alamat" required=""> </textarea>
</fieldset>
</form>
</body>
</html>
- Jika sudah, teman-teman bisa save file tersebut dan lihat hasilnya pada browser teman-teman
Sampai disini penjelasan saya mengenai fungsi tag legend di HTML, semoga bermanfaat.