Penggunaan dan Penulisan Tag Fieldset dan Legend Dalam Form HTML

By | June 10, 2019
Penggunaan dan Penulisan Tag Fieldset dan Legend Dalam Form HTML 1

Pada artikel kali ini kita kana membahas Penggunaan dan Penulisan Tag Fieldset dan Legend Dalam Pembuatan Form.

Penggunaan Tag Fieldset dan Tag Legend Dalam Pembuatan Form HTML

Tag fieldset digunakan untuk mengelompokkan objek form sedangkan tag legend digunakan untuk menampilkan judul pada kelompok objek form.

Berikut ini adalah tampilan form HTML yang menggunakan tag fieldset dan legend :

Terlihat pada gambar diatas pilihan dari checkbox akan dikelompokkan dalam sebuah kotak yang diberi judul “Hobi Anda”.

Penulisan Tag Fieldset dan Tag Legend Dalam Pembuatan Form HTML

Untuk membuat tampilan form seperti gambar diatas, kita bisa menambahkan tag fieldset dan tag legend di dalam objek form. Format penulisannya seperti dibawah ini :

<form action="hobi.php" method="post">     <fieldset>         <legend>Judul untuk kelompok objek</legend>         <!--Kelompok objek form-->     </fieldset> </form>

Tag fieldset dan legend harus digunakan secara berpasangan, karena 2 tag ini saling berkaitan. Tag fieldet digunakan untuk memasukkan ojek form ke dalam kotak, sedangkan tag legend digunakan untuk memberi judul pada kotak yang dibuat oleh tag fieldset.

Berikut ini penulisan tag fieldset dan legend didalam form :

<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <form action="hobi.php" method="post"> <fieldset> <legend>Hobi Anda</legend> <input type="checkbox" name="berenang" id="berenang"/>Berenang<br/> <input type="checkbox" name="menulis" id="menulis"/>Menulis<br/> <input type="checkbox" name="membaca" id="membaca"/>Membaca </fieldset> </form> </body> </html>

Pada artikel kali ini kita kana membahas  Penggunaan dan Penulisan Tag Fieldset dan Legend Dalam Form HTML

Jika Anda perhatikan pada gambar diatas, tag legend akan menampilkan judul berada di posisi kiri. Anda bisa mengatur posisi judul dengan menambahkan atribut align didalam tag legend.

Berikut ini penulisan atribut align didalam tag legend :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <form action="hobi.php" method="post">     <fieldset>         <legend align="right">Hobi Anda</legend>         <input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>         <input type="checkbox" name="menulis" id="menulis"/>Menulis<br/>         <input type="checkbox" name="membaca" id="membaca"/>Membaca     </fieldset> </form> </body> </html>

Pada artikel kali ini kita kana membahas  Penggunaan dan Penulisan Tag Fieldset dan Legend Dalam Form HTML

Terlihat pada gambar diatas, judul berada di posisi kiri ini karena kita menambahkan atribut align dengan nilai right. Anda bisa mengganti nilai dari atribut align dengan salah satu nilai left, right, center, top dan bottom. Anda bisa mencoba kelima nilai ini, namun untuk nilai top dan button tidak didukung oleh web browser.

Karena atribut align ini berkaitan dengan CSS, maka Anda sebaiknya menggunakan CSS untuk mengatur posisi judul pada tag legend.

Pada artikel selanjutnya kita akan membahas tentang Penggunaan dan Penulisan Tag Button Dalam Pembuatan Form HTML.