HTML legend tag | belajar <legend> element

Referensi Belajar HTML legend tag. Tutorial dan panduan mengenai element <legend>...</legend> yang digunakan untuk memberi judul <fieldset> element. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <legend>.


Deskripsi
Penjelasan HTML legend

HTML <legend> element merepresentasikan sebuah judul bagi konten induknya, <fieldset> element secara keseluruhan. Beberapa control dalam sebuah form dapat dikelompokkan didalam fieldset element dan diberi judul dengan <legend>.

Dalam penggunaannya, elemen <legend> ditulis secara langsung (tanpa didahului element lain) sebagai anak element dari <fieldset>.


Global Attributes
Atribut Secara Global (Keseluruhan)

<legend> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<legend> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <legend> element

HTML
<form>
  <fieldset>
    <legend>Data Diri</legend>
    <label for="nama">Nama</label>
    <input type="text" name="name" id="nama">
    <label for="ttl">Tanggal Lahir</label>
    <input type="date" name="bday" id="ttl">
  </fieldset>
</form>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML legend tag</title>
    <style>

    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Data Diri</legend>
        <label for="nama">Nama</label>
        <input type="text" name="name" id="nama">
        <label for="ttl">Tanggal Lahir</label>
        <input type="date" name="bday" id="ttl">
      </fieldset>
    </form>
  </body>
</html>
SHARE