Tutorial Form HTML Part 2: Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend
Halo Kawan-kawan,
Pada Tutorial Form HTML Part 2 ini, kita akan belajar Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend.
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.
Untuk melihat kegunaan Tag Fieldset dan Tag Legend ini, kawan-kawan dapat menuliskan kode dibawah dan melihat hasilnya di web broser.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Fieldset dan Tag Legend HTML</title>
</head>
<body>
<form action="daftar.php" method="post">
<fieldset>
<legend>Skill Untuk Membuat Desgn Web:</legend>
<input type="checkbox" name="skillhtml" id="skillhtml"
value="skillhtml"/> Skill HTML
<br />
<input type="checkbox" name="skillcss" id="skillcss"
value="skillcss"/> Skill CSS
<br />
<input type="checkbox" name="skilljavascript" id="skilljavascript"
value="skilljavascript"/> Skill Javascrip
</fieldset>
<fieldset>
<legend align="right">Agenda Yang Dipelajari 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="javascrip" id="belajarjavascrip"
value="belajarjavascrip"/>Belajar Javascrip
<br />
<input type="checkbox" name="nusantaracoding" id="nusantaracoding"
value="nusantaracoding"/>Belajar pemograman di Nusantara Coding
</fieldset>
</form>
</body>
</html>
Hasil Code:
Dari contoh diatas dapat dilihat bahwa tag fieldset dan tag legend harus ditulis sebagai berikut dalam tag form:
<form action="daftar.php" method="post">
<fieldset>
<legend>Judul pada kelompok objek</legend>
...kelompok objek form...
</fieldset>
</form>
Dan dari gambar diatas dapat dilihat bahwa pilihan dari checkbox yang ada dikelompokkan kedalam kelompok “Skill Untuk Membuat Web Browser:” dan “Agenda Yang Dipelajari Hari ini:”, dan browser akan menampilkannya dalam sebuah kotak.
Dari contoh ini dapat ditarik kesimpulan: Tag fieldset berfungsi untuk menandai sampai dimana kotak fieldset akan dibuat, sedangkan tag legend berfungsi untuk memberikan judul dari fieldset tersebut.
Cara merubah rata text tag legend: atribut align
Jika anda perhatikan, tag legend secara default berada di sisi kiri form, namun kita 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: left, center, right, top dan bottom. Anda bisa mencoba kelima nilai ini, namun nilai top dan bottom umumnya tidak di support oleh web browser.
Contoh dari checkbox tampa atribut align dapat dilihat pada checkbox pada kelompok “Skill Untuk Membuat Desgn Web:”, sedangkan contoh dari checkbox dengan atribut align dapat dilihat pada checkbox pada kelompok “Agenda Yang Dipelajari Hari ini:”
Karena atribut align ini sangat berkaitan dengan CSS, sebaiknya anda menggunakan CSS untuk mengatur align dari tag legend.
Tag fieldset dan tag legend yang kita pelajari disini lebih berfungsi untuk tampilan dari form, namun form yang tertata dan terkelompok dengan baik akan memudahkan user dalam menggunakannya.
Pada tutorial berikutnya kita akan membahas tentang fungsi dan cara penggunaan tag button di dalam form HTML.