Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <fieldset> Pada HTML

previous Previous Page

Elemen <fieldset> pada HTML digunakan untuk mengelompokkan berbagai inputan yang mempunyai keterkaitan yang sama di dalam elemen <form>. Elemen ini bersifat opsional yang bisa digunakan ataupun tidak, karena tidak menampung data yang akan dikirimkan server. Namun dari segi tampilan, akan jauh lebih menarik dan mudah dipahami oleh pengguna.

Elemen <fieldset> merupakan bagian dari elemen HTML <form> yang mana elemen ini menginduk pada elemen tersebut. Di dalam elemen <form> dapat berisi satu atau beberapa buah <fieldset> sesuai dengan kebutuhan.

Contoh Sederhana

Contoh sederhana untuk membuat fieldset di dalam sebuah form :

1.  <fieldset>
2.     <p>
3.     <label for="nama">Nama Anda : </label>
4.     <input type="text" name="nama" id="nama" required>
5.     </p>
6.     <p>
7.     <label for="tanggal_lahir">Tanggal Lahir : </label>
8.     <input type="date" name="tanggal_lahir" id="tanggal_lahir">
9.     </p>
10. </fieldset>

Jika dijalankan akan menghasilkan tampilan :

tag fieldset html

Atribut Khusus

Atribut khusus pada elemen fieldset antara lain :

  • name
    Menetapkan nama elemen fieldset. Nilai : teks
  • disabled
    Menetapkan elemen fieldset menjadi nonaktif dan tidak bisa dipilih atau disorot. Nilai : disabled
  • form
    Menentapkan id elemen form dimana elemen fieldset menginduk. Nilai : id_form

Berikut ini contoh penggunaan elemen <fieldset> pada HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag fieldset HTML</title>
6.     <style>
7.       fieldset{margin:5px;}
8.       input[type=text]{width:220px;}
9.     </style>
10. </head>
11. <body>
12. <form action="proses.php" method="post">
13.    <fieldset>
14.    <p>
15.      <label for="nama">Nama Anda : </label>
16.      <input type="text" name="nama" id="nama" required>
17.    </p>
18.    <p>
19.      <label for="tanggal_lahir">Tanggal Lahir : </label>
20.      <input type="date" name="tanggal_lahir" id="tanggal_lahir">
21.    </p>
22.    </fieldset>
23.    
24.    <fieldset>
25.    <p>
26.      <label for="alamat_kantor">Alamat Kantor : </label>
27.      <input type="text" name="alamat_kantor" id="alamat_kantor">
28.    </p>
29.    <p>
30.      <label for="alamat_rumah">Alamat Rumah : </label>
31.      <input type="text" name="alamat_rumah" id="alamat_rumah">
32.    </p>
33.    <p>
34.      <label for="telp">Telpon : </label>
35.      <input type="number" name="telp" id="telp" pattern="[0-9]" required>
36.    </p>
37.    </fieldset>
38.    
39.    <fieldset>
40.    <input type="reset" value="Reset">
41.    <input type="submit" value="Kirim">
42.    <input type="button" value="Batal">
43.    </fieldset>
44. </form>
45. </body>
46. </html>

Jika dijalankan akan menghasilkan tampailan sebagai berikut :

tag fieldset html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<fieldset>yayayayaya

Global Attributes :

Tag <fieldset> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <fieldset> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <fieldset> pada HTML :

fieldset{
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML