Penggunaan Tag Fieldset dan Tag Legend Dalam Pembuatan Form HTML
Tagfieldset dipakai untk mengelompokkan objek form sedangkan tag legend dipakai untk menampilkan judul pada kelompok objek form.Berikut ini adlah 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 tagfieldset dan tag legend di dalam objek form. Format penulisannya ibarat dibawah ini :<form action="hobi.php" method="post"> <fieldset> <legend>Judul untk kelompok objek</legend> <!--Kelompok objek form--> </fieldset> </form>Tag
fieldset dan legend harus dipakai setips berpasangan, alasannya yakni 2 tag ini saling berkaitan. Tag fieldet dipakai untk memasukkan ojek form ke dalam kotak, sedangkan tag legend dipakai untk 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>
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 yakni 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 untk nilai top dan button tidak didukung oleh WEB broser.Karena atribut
align ini berkaitan dengan CSS, maka Anda sebaiknya memakai CSS untk mengatur posisi judul pada tag legend.Pada article selanjutnya kita akan membahas perihal Penggunaan dan Penulisan Tag Button Dalam Pembuatan Form HTML. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment