Penggunaan Dan Penulisan Tag Fieldset Dan Legend Dalam Form Html

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 dipakai untuk mengelompokkan objek form sedangkan tag legend dipakai untuk menampilkan judul pada kelompok objek form.

Berikut ini yaitu tampilan form HTML yang memakai 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 menciptakan tampilan form ibarat gambar diatas, kita dapat menambahkan tag fieldset dan tag legend di dalam objek form. Format penulisannya ibarat 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 dipakai secara berpasangan, alasannya 2 tag ini saling berkaitan. Tag fieldet dipakai untuk memasukkan ojek form ke dalam kotak, sedangkan tag legend dipakai untuk memberi judul pada kotak yang dibentuk 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 dapat 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>

Terlihat pada gambar diatas, judul berada di posisi kiri ini alasannya kita menambahkan atribut align dengan nilai right. Anda dapat mengganti nilai dari atribut align dengan salah satu nilai left, right, center, top dan bottom. Anda dapat 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 memakai CSS untuk mengatur posisi judul pada tag legend.

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