Form HTML Tutorial 2: Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend

0
15

Fungsi Tag Fieldset dan Tag Legend dalam pembuatan Form HTML

Fungsi tag fieldset dan tag label lebih kepada tampilan form, karena akan memudahkan dan mempercantik form yang dibuat.

Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan Tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut.

Berikut adalah tampilan form HTML yang dikelompokkan menggunakan tag Fieldset dan tag Legend:

Tag Fieldset Tag legend, Form HTML, gurukomputer.com, welovevbet.com

Dari gambar diatas dapat dilihat bahwa pilihan dari checkbox yang ada dikelompokkan kedalam kelompok “Agenda hari ini”, dan browser akan menampilkannya dalam sebuah kotak.


Cara Penggunaan Tag Fieldset dan Tag Legend

Untuk dapat membuat tampilan seperti gambar diatas, kita tinggal menambahkan tag fieldsetdan tag legend di awal form. Format dasar penulisannya adalah sebagai berikut:

<form action="daftar.php" method="post">
   <fieldset>
   <legend>Judul pada kelompok objek</legend>
   ...kelompok objek form...
   </fieldset>
</form>

tag fieldset dan tag legend harus digunakan berpasangan, karena keduanya saling berkaitan. Tag fieldset berfungsi untuk menandai sampai dimana kotak fieldset akan dibuat, sedangkan tag legend berfungsi untuk memberikan judul dari fieldset tersebut.

Berikut adalah contoh kode HTML untuk penggunaan tag fieldset dan tag legend:

<!DOCTYPE html>
<html>
  
<head>
   <title>Belajar Tag Fieldset dan Tag Legend HTML</title>
</head>
 
<body>
 
   <form action="daftar.php" method="post">
   <fieldset>
    
   <legend>Agenda Hari ini</legend>
 
     <input type="checkbox" name="belajarhtml" id="belajarhtml"
     value="belajarhtml"/>Belajar HTML
     <br />
 
     <input type="checkbox" name="belajarcss" id="belajarcss"
     value="belajarcss"/>Belajar CSS
     <br />
 
     <input type="checkbox" name="php" id="belajarphp"
     value="belajarphp"/>Belajar PHP
     <br />
 
     <input type="checkbox" name="gurukomputer" id="gurukomputer"
     value="gurukomputer"/>Belajar pemograman
 
   </fieldset>
   </form>
 
</body>
</html>

Hasil tampilan kode diatas akan sama dengan tampilan di awal tutorial ini.


Cara merubah rata text tag legend: atribut align

Jika anda perhatikan, tag legend secara default berada di sisi kiri form, namun anda bisa merubah settingan ini dengan menambahkan atribut align pada tag legend.

<legend align="right">Agenda Hari ini</legend>

Nilai dari atribut align ini bisa salah satu dari: leftcenterrighttop dan bottom. Anda bisa mencoba kelima nilai ini, namun nilai top dan bottom umumnya tidak di support oleh web browser.

Karena atribut align ini sangat berkaitan dengan CSS, sebaiknya anda menggunakan CSS untuk mengatur align dari tag legend.

LEAVE A REPLY

Please enter your comment!
Please enter your name here