Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <legend> Pada HTML

previous Previous Page

Elemen <legend> pada HTML digunakan untuk memberi judul / caption pada elemen <fieldset>, yang mana elemen <fieldset> merupakan elemen yang berfungsi untuk mengelompokkan berbagi <input> pada <form> agar menjadi lebih rapi dan terorganisir.

Elemen <legend> bukanlah elemen yang dapat berdiri sendiri tapi elemen ini menginduk pada elemen lain yaitu <fieldset>. Jika ditempatkan di luar <fieldset>, browser tidak akan memproses dengan baik, tapi harus ditempatkan di dalam fieldset. Penempatan legend normalnya terletak setelah fieldset dituliskan sebelum inputan lainnya dituliskan, namun anda dapat menuliskan dimana saja asalkan masih berada di dalam sebuah fieldset induknya. Browser akan mengenalinya sebagai sebuah legend (judul / caption) pada sebuah <fieldset>.

Contoh Sederhana

Contoh sederhana <legend> untuk memberikan caption pada <fieldset> :

1.  <fieldset>
2.  <legend>Personal info</legend>
3.  <p>
4.     <label for="nama">Nama Anda : </label>
5.     <input type="text" name="nama" id="nama" required>
6.  </p>
7.  <p>
8.     <label for="tanggal_lahir">Tanggal Lahir : </label>
9.     <input type="date" name="tanggal_lahir" id="tanggal_lahir">
10. </p>
11. </fieldset>
12. 

Jika dijalankan akan menghasilkan tampilan :

tag <legend> html

Berikut ini contoh penggunaan elemen <legend> pada HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag legend HTML</title>
6.     <style>
7.       fieldset{margin:5px;}
8.       input[type=text]{width:220px;}
9.     </style>
10. </head>
11. <body>
12. <form action="proses.php" method="post">
13.    <fieldset>
14.    <legend>Personal info</legend>
15.    <p>
16.      <label for="nama">Nama Anda : </label>
17.      <input type="text" name="nama" id="nama" required>
18.    </p>
19.    <p>
20.      <label for="tanggal_lahir">Tanggal Lahir : </label>
21.      <input type="date" name="tanggal_lahir" id="tanggal_lahir">
22.    </p>
23.    </fieldset>
24.    
25.    <fieldset>
26.    <legend>Additional info</legend>
27.    <p>
28.      <label for="alamat_kantor">Alamat Kantor : </label>
29.      <input type="text" name="alamat_kantor" id="alamat_kantor">
30.    </p>
31.    <p>
32.      <label for="alamat_rumah">Alamat Rumah : </label>
33.      <input type="text" name="alamat_rumah" id="alamat_rumah">
34.    </p>
35.    <p>
36.      <label for="telp">Telpon : </label>
37.      <input type="number" name="telp" id="telp" required>
38.    </p>
39.    </fieldset>
40.    
41.    <fieldset>
42.    <legend>Aksi</legend>
43.    <input type="reset" value="Reset">
44.    <input type="submit" value="Kirim">
45.    <input type="button" value="Batal">
46.    </fieldset>
47. </form>
48. </body>
49. </html>

Jika dijalankan akan menghasilkan tampilan sebagai berikut :

tag <legend> html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<legend>yayayayaya

Global Attributes :

Tag <legend> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <legend> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <legend> pada HTML :

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

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML