Menggunakan Legend dan Fieldset pada HTML

06/10/2018    Maykhel David    243     Website

Menggunakan Legend dan Fieldset pada HTML – Hallo semuanya, untuk kalian yang sedeng belajar tentang HTML, pernahkah kalian mendengar tentang adanya tag Legend dan Fieldset?

Tag fieldset adalah tag yang ada pada html yang memiliki fungsi untuk membungkus elemen – elemen input yang memilik kategori yang sama.

Tag legend adalah sebuah tag yang berfungsi untuk memberi atau menjadi caption dari tag fieldset.

Sebagai contoh kita akan membuat sebuah struktur fieldset.

<!DOCTYPE html>
<html>
<head>
    <style>
        body{background:lightgreen}
        fieldset{width:300px;margin:auto}
    </style>
</head>
<body>

<form>
 <fieldset>
  <legend>Pribadi:</legend>
  Nama Lengkap: <input type="text"><br>
  Email: <input type="text"><br>
  Tanggal Lahir: <input type="text">
  Alamat: <input type="text"><br>
  No. Telp: <input type="text">
 </fieldset>
 
  <fieldset>
  <legend>Kerabat:</legend>
  Nama Lengkap: <input type="text"><br>
  Email: <input type="text"><br>
  Tanggal Lahir: <input type="text">
  Alamat: <input type="text"><br>
  No. Telp: <input type="text">
 </fieldset>
</form>

</body>
</html>

 

Dengan baris kode diatas kita memiliki sebuah fieldset untuk memberikan kategori terhadap dua bagian, yaitu ada bagian untuk data pribadi, yang berisi, nama, email, tanggal lahir dan yang lainnya. Serta ada fieldset kedua dengan legend Kerabat yang memiliki isi inputan yang sama.

Untuk memanipulasi tampilan form, kita bisa menggunakan fieldset dan legend, kalian juga bisa menambahkan css yang disesuaikan dengan kebutuhan.

Baiklah, demikian artikel kali ini yang membahas tentang bagaimana cara menggunakan tag legend dan fieldset di html.

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More