Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Kotak Pembatas Form Menggunakan Tag Fieldset HTML5

Tag <fieldset> pada HTML5 digunakan untuk membuat sekelompok elemen yang berhubungan pada form dan membuat box pada sekitar elemen-elemen tersebut. Tag <fieldset> merupakan tag baru pada HTML5.


HTML5, sebagai versi terbaru dari bahasa markup standar untuk membuat dan merancang halaman web, telah memperkenalkan sejumlah elemen baru yang memperkaya pengalaman pengguna dan mempermudah pengembangan situs web. Salah satu elemen yang bermanfaat dan sering digunakan dalam pembuatan formulir adalah tag <fieldset>.

Tag <fieldset> HTML5

Tag <fieldset> adalah elemen dalam HTML yang digunakan untuk mengelompokkan sejumlah elemen <input>, <textarea>, <button>, dan elemen formulir lainnya menjadi satu kelompok logis. Ini memungkinkan pembuatan formulir yang lebih terstruktur dan lebih mudah dipahami oleh pengguna.

Sintak:
<fieldset> Konten... </fieldset>

Atribut:
  • disabled: Digunakan untuk menentukan bahwa grup yang terhubung pada elemen form harus disabled.
  • form: Digunakan untuk menentukan bahwa satu atau lebih form yang tertuju pada fieldset.
  • name: Digunakan untuk menentukan nama dari fieldset.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

tag fieldset

</title>

 

<style>

h1, h2, .title

{

text-align:center;}

 

fieldset 

{

width:50%;

margin-left:22%;}

 

h1 

{

color:green;}

</style>

</head>

 

<body>

<h1>

Mari Belajar

</h1>

 

<h2>

Tag Fieldset

</h2>

 

<form>

<div 

class="title">

Artikel video:

</div>

 

<fieldset>

<legend>JAVA:</legend>

 

Title: <input type="text"><br>

Link: <input type="text"><br>

User ID: <input type="text">

</fieldset>

 

<br>

 

<fieldset>

<legend>PHP:</legend>

 

Title: <input type="text"><br>

Link: <input type="text"><br>

User ID: <input type="text">

</fieldset>

</form>

</body>

 

</html>

Output:

Mari Belajar

Tag Fieldset

Artikel video:
JAVA:Title: 
Link: 
User ID: 

PHP:Title: 
Link: 
User ID: 

Cara Menggunakan Tag <fieldset> HTML5

Penggunaan tag <fieldset> sangatlah sederhana. Elemen ini diawali dengan tag pembuka <fieldset> dan ditutup dengan tag penutup </fieldset>. 

Contoh: Berikut adalah contoh penggunaan tag <fieldset> dalam pembuatan formulir sederhana.

<!DOCTYPE html>

<html>

<body>


<form>

<fieldset>


<legend>

Informasi Pribadi

</legend>


<label for="nama">

Nama:

</label>

<input 

type="text" 

id="nama" 

name="nama">


<br><br>


<label for="email">

Email:

</label>

<input 

type="email" 

id="email" 

name="email">


<br><br>


<label 

for="password">

Kata Sandi:

</label>


<input 

type="password" 

id="password" name="password">


<br><br>

</fieldset>


<fieldset>


<legend>

Pilihan

</legend>


<input 

type="checkbox" 

id="pilihan1" name="pilihan1">


<label 

for="pilihan1">

Pilihan 1

</label>


<br>


<input 

type="checkbox" 

id="pilihan2" name="pilihan2">


<label for="pilihan2">

Pilihan 2

</label>


<br>


</fieldset>


<input 

type="submit" 

value="Kirim">


</form>


</body>

</html>


Contoh:

<!DOCTYPE html>

<html>

<body>


<form>


<fieldset>

<legend>

Informasi Pribadi

</legend>

<!-- Elemen formulir terkait dengan informasi pribadi -->

</fieldset>


<fieldset>

<legend>

Alamat Pengiriman

</legend>

<!-- Elemen formulir terkait dengan alamat pengiriman -->

</fieldset>


<fieldset>

<legend>

Pilihan

</legend>

<!-- Elemen formulir terkait dengan pilihan pengguna -->

</fieldset>


<input 

type="submit" 

value="Kirim">


</form>


</body>

</html>


Fungsi <fieldset> HTML5:
  • Mengelompokkan Elemen Formulir: <fieldset> memungkinkan pengelompokan elemen-elemen formulir yang terkait ke dalam satu bagian terpisah di dalam formulir. Ini membantu dalam organisasi dan presentasi yang lebih baik.
  • Tag <legend> untuk Keterangan: Tag <legend> digunakan di dalam <fieldset> untuk memberikan keterangan atau judul bagi kelompok elemen formulir tersebut. Ini membantu pengguna dalam memahami tujuan dari setiap kelompok elemen.
  • Menentukan Batas Kelompok: Selain memberikan judul atau keterangan, <fieldset> juga dapat memberikan batas visual pada kelompok elemen formulir, yang membedakan bagian formulir satu dengan yang lain.
  • Pengaturan Gaya (Styling): Pengembang web juga dapat memanfaatkan tag <fieldset> untuk menerapkan gaya atau styling khusus terhadap kelompok elemen formulir tersebut dengan menggunakan CSS.

Keuntungan Penggunaan Tag <fieldset> HTML:
  • Struktur yang Lebih Terorganisir: Mengelompokkan elemen formulir yang serupa secara visual dan fungsional. Tag <fieldset> memungkinkan pengelompokkan elemen-elemen formulir yang terkait menjadi satu unit yang dapat dibedakan dari bagian formulir lainnya. Ini membantu dalam membuat formulir yang lebih terstruktur, memudahkan navigasi, dan memperjelas hubungan antara elemen-elemen tersebut.
  • Aksesibilitas yang Ditingkatkan: Memberikan informasi tambahan kepada pembaca layar atau pengguna dengan kebutuhan aksesibilitas tentang bagaimana elemen formulir tersebut terkait. Penggunaan <fieldset> membantu dalam meningkatkan aksesibilitas situs web. Penggunaan tag <legend> untuk memberikan judul bagi setiap kelompok elemen memungkinkan pembaca layar atau pengguna dengan kebutuhan aksesibilitas memahami konteks dan struktur formulir dengan lebih baik.
  • Kode yang Lebih Bersih: Mempermudah pembacaan dan pemeliharaan kode HTML. Elemen <fieldset> secara default memiliki garis tepi (border) yang mengelilingi kelompok elemen formulir. Ini memberikan batas visual yang jelas, membedakan antara kelompok elemen satu dengan yang lain dalam formulir. Penggunaan CSS juga memungkinkan untuk menyesuaikan tampilan dari <fieldset> untuk meningkatkan estetika dan keselarasan dengan desain keseluruhan halaman web.
  • Meningkatkan Pembacaan dan Pemeliharaan Kode: Penggunaan <fieldset> membantu dalam memperjelas struktur formulir dalam kode HTML. Hal ini membuat kode menjadi lebih mudah dibaca, dipahami, dan dipelihara oleh pengembang web. Dengan struktur yang terorganisir, perubahan atau penambahan elemen formulir baru dapat dilakukan dengan lebih efisien.
  • Styling dan Kustomisasi: Tag <fieldset> dapat disesuaikan dengan menggunakan CSS untuk memenuhi kebutuhan desain web yang spesifik. Ini memungkinkan pengembang untuk menyesuaikan tampilan elemen <fieldset> sesuai dengan tema atau gaya halaman web.

Tag <fieldset> dalam HTML5 adalah alat yang berguna untuk mengelompokkan elemen formulir dalam halaman web. Meskipun memiliki sejumlah keunggulan, ada beberapa kekurangan yang perlu dipertimbangkan ketika menggunakan tag <fieldset>. Berikut adalah beberapa kekurangan dari penggunaan tag <fieldset>:
  • Keterbatasan Dalam Desain: Elemen <fieldset> secara default memiliki tampilan yang baku dan sulit untuk dimodifikasi secara visual menggunakan properti CSS bawaan. Meskipun garis tepi (border) dan legenda dapat diubah, kebebasan untuk menyesuaikan elemen ini secara detail atau untuk menciptakan tampilan yang sangat berbeda terbatas. Ini dapat menyulitkan penyesuaian tampilan sesuai dengan desain halaman web yang lebih kompleks atau spesifik.
  • Tidak Mendukung Nesting (Penanaman) Secara Langsung: Tag <fieldset> tidak dapat diletakkan di dalam elemen <fieldset> lainnya secara langsung dalam struktur HTML. Ini berarti Anda tidak dapat secara langsung menanamkan (nest) satu kelompok elemen dalam kelompok elemen lainnya menggunakan tag <fieldset>. Keterbatasan ini dapat mempersulit pengelompokkan elemen formulir yang sangat kompleks.
  • Tampilan yang Konsisten Tidak Terjamin di Semua Browser: Meskipun mayoritas browser modern mendukung tag <fieldset>, ada kemungkinan perbedaan dalam tampilan elemen ini di beberapa browser yang lebih kuno atau tidak terkini. Hal ini bisa mencakup perbedaan dalam cara garis tepi (border) atau legenda ditampilkan, yang dapat mengakibatkan pengalaman pengguna yang tidak konsisten.
  • Kurangnya Dukungan Terhadap Penggunaan di Luar Formulir: Tag <fieldset> secara umum digunakan untuk mengelompokkan elemen formulir. Meskipun bisa dimungkinkan untuk memanfaatkannya di luar konteks formulir, tag ini secara konseptual lebih terkait dengan formulir. Ini bisa membuat penggunaan <fieldset> di luar formulir kurang umum atau kurang sesuai.
  • Kompleksitas Aksesibilitas: Meskipun <fieldset> dan <legend> didesain untuk meningkatkan aksesibilitas, penggunaan yang tidak tepat atau tidak memperhatikan panduan aksesibilitas dapat membuat pengalaman pengguna dengan kebutuhan khusus menjadi lebih sulit. Hal ini bisa terjadi jika legenda tidak diposisikan dengan benar, atau jika penggunaan <fieldset> tidak sesuai dengan aturan aksesibilitas yang diatur.

Tag <fieldset> dalam HTML5 adalah alat yang kuat untuk mengelompokkan dan mengorganisir elemen-elemen formulir dalam halaman web. Dengan memanfaatkannya, pengembang dapat membuat formulir yang lebih terstruktur, meningkatkan aksesibilitas, memperjelas kode HTML, serta memberikan batas visual yang jelas antara kelompok elemen formulir. Dengan begitu, pengguna dapat mengisi formulir dengan lebih mudah dan pengembang dapat memelihara dan memperbaiki kode dengan lebih efisien.

Artikel ini didedikasikan kepada: Raras Indah Aningtyas, Salsabila Noviana, Shinta Nur Sabila, Sofian Panuntun, dan Taris Nur Adzhani.

6 komentar untuk "Membuat Kotak Pembatas Form Menggunakan Tag Fieldset HTML5"

  1. Apa yang dimaksud dengan tag fieldset pada html?

    BalasHapus
    Balasan
    1. Fieldset merupakan tag elemen pada html yang digunakan untuk mengelompokkan elemen terkait dalam sebuah formulir. Tag tersebut menggambarkan kota yang terdapat pada sekitar kotak elemen terkait.

      Hapus
  2. Apa fungsi dari tag fieldset pada html?

    BalasHapus
    Balasan
    1. Tag Fieldset digunakan untuk mengelompokkan elemen formulir yang memiliki kesamaan atau saling berkaitan satu sama lain. Dengan menggunakan tag tersebut maka user dapat membuat formulir yang lebih mudah dipahami oleh user.

      Hapus
  3. Bagaimana cara menggunakan tag fieldset pada html?

    BalasHapus
    Balasan
    1. Tag HTML < fieldset > ditemukan pada tag < form > dan digunakan untuk mengelompokkan elemen terkait dalam bentuk HTML. Dengan menggunakan tag < legend > maka dapat dibuat keterangan untuk < fieldset >. Tag ini juga sering disebut sebagai elemen < fieldset >.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -