Membuat Kotak Pembatas Form Menggunakan Tag Fieldset HTML5
Tag <fieldset> HTML5
<fieldset> Konten... </fieldset>
- 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.
<!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>
Mari Belajar
Tag Fieldset
Cara Menggunakan Tag <fieldset> HTML5
<!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>
<!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>
- 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.
- 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.
- 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 pengembang 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.
- Anotasi Ruby HTML5 dan Fungsinya Tag RT
- Membuat Teks Kecil di Tas Huruf Menggunakan Tag Ruby HTML5
- Membuat Kesimpulan Menggunakan Tag Summary HTML5
- Cara Memecah Kalimat dengan Tag WBR HTML5
- Tag Doctype HTML dan Penjelasannya
- Membuat Link HTML Menggunakan Tag Anchor
- Cara Membuat Singkatan HTML Menggunakan Tag Abbr
6 komentar untuk "Membuat Kotak Pembatas Form Menggunakan Tag Fieldset HTML5"
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 -
Apa yang dimaksud dengan tag fieldset pada html?
BalasHapusFieldset 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.
HapusApa fungsi dari tag fieldset pada html?
BalasHapusTag 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.
HapusBagaimana cara menggunakan tag fieldset pada html?
BalasHapusTag 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