Sebelumnya kita sudah banyak mempelajari dengan cara memasukkan kolom isian alias input pada form. Dari sekian banyak data yang terdapat di dalam form membuat form terlihat tidak beraturan. Kini kita akan membahas cara untuk mengatur agar tampilan kolom isian pada form terlihat lebih rapi. Tutorial HTMl – Pengelompokan Data ini akan membahas cara untuk mengelompokkan data sesuai dengan jenis data.

Tutorial HTML – Pengelompokan Data – Bagian 15 – 13 (Bahasa Indonesia)

Terkadang sebuah form terdiri dari banyak kolom isian. Tampilan form tersebut menjadi sangat panjang dan terlihat tidak rapi. Data di dalam form juga terkadang terdiri dari beberapa jenis data yang digabungkan, contohnya: data pribadi, data pekerjaan, data perbankan, data preferensi dan lain sebagainya.

Pada tutorial ini kita akan menggunakan tag fieldset dan legend. Tag fieldset merupakan tag yang disediakan untuk memberikan batasan pada suatu tampilan sedangkan tag legend digunakan untuk memberikan nama atau penjelasan pada bagian yang dibatasi oleh tag fieldset. Tag fieldset dan legend merupakan suatu pasangan. Tag legend harus dituliskan di dalam tag fieldset.

Kita akan mengelompokkan data pada form registrasi menjadi 3 bagian, yaitu: data pribadi, kuesioner dan syarat dan ketentuan. Silahkan perhatikan kode HTML berikut ini:

 

Form registrasi di atas dipecah menjadi 3 bagian data. Form di atas akan terlihat seperti berikut ini.

Tutorial HTML - Pengelompokan Data - 1

Kita bisa memberikan pengelompokan data dengan lebih mudah menggunakan tag fieldset dan legend. Tutorial pengelompokan data ini tidak terlalu sulit karena cara penggunaan tag fieldset dan legend tidak memiliki variasi.

Selanjutnya, kita akan melanjutkan ke tutorial form bagian terakhir. Tutorial selanjutnya akan melengkapkan pengetahuan kita mengenai cara upload gambar, foto, dokumen atau berkas lainnya.

Tutorial HTML – Upload File/Unggah Berkas – Bagian 15 – 14 (Bahasa Indonesia)