Menggunakan Legend dan Fieldset pada HTML

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.

 

6 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat