Cara Pemakaian dan Fungsi Tag Fieldset dan Tag Legend

belajar HTML dan CSS untuk pemula

Sesudah mempelajari tag Label pada tutorial pertama, dalam tutorial kedua ini kita akan mempelajari fungsi dan pemakaian tag fieldset dan tag legend dalam pembuatan form HTML.

Fungsi Tag Legend dan Tag Fieldset

Fungsi tag fieldset dan tag label lebih kepada tampilan form, sebab akan mempermudah dan mempercantik form yang dibuat.

Tag Fieldset berguna untuk mengelompokkan beberapa objek form jadi sebuah kelompok, sedangkan Tag Legend berguna untuk menampilkan judul dari kelompok objek form itu.

Berikut ialah tampilan form HTML yang digolongkan memakai tag Fieldset dan tag Legend:

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

Cara Pemakaian Tag Fieldset dan Tag Legend

Untuk bisa membuat tampilan seperti gambar diatas, kita tinggal menambahkan tag fieldset dan tag legend pada awal form. Format dasar penulisannya yaitu 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 dipakai berpasangan, sebab keduanya saling berhubungan. Tag fieldset berguna untuk menandai sampai dimana kotak fieldset akan dibuat, sedangkan tag legend berguna untuk memberikan judul dari fieldset itu.

Berikut ialah contoh kode HTML untuk pemakaian 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="learnhtml" id="learnhtml" 
value="learnhtml"/>Belajar HTML
<br />
<input type="checkbox" name="learncss" id="learncss" 
value="learncss"/>Belajar CSS
<br />
<input type="checkbox" name="php" id="learnphp" 
value="learnphp"/>Belajar PHP
<br />
<input type="checkbox" name="infanthree" id="infanthree" 
value="infanthree"/>Belajar pemograman di Infanthree
</fieldset>
</form>
</body>
</html>

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

Atribut align

Bila kamu perhatikan, tag legend secara default berada di sisi kiri form, tetapi kamu bisa mengubah settingan ini dengan menambahkan atribut align pada tag legend.

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

Nilai dari atribut align ini dapat salah satu dari: left, center, right, top dan bottom. Kamu dapat mencoba kelima nilai ini, tetapi nilai top dan bottom umumnya tidak di support oleh web browser.

Sebab atribut align ini amat terkait dengan CSS, disarankan kamu memakai CSS untuk mengatur align dari tag legend.

Tag fieldset dan tag legend yang kita pelajari disini lebih berguna untuk tampilan dari form, tetapi form yang tertata dan terkelompok dengan bagus akan mempermudah user dalam memakainya.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *