Dalam pengisian formulir pada sebuah website pasti anda melihat ada beberapa kelompok tertentu. Kelompok tersebut misalnya Informas Pribadi, terus ada kelompok Riwayat Pendidikan, atau Riwayat pekerjaan. Lalu bagaimana cara membuat kelompok tersebut dalam sebuah halaman HTML. Berikut catatannya.
Pembuatan kelompok tersebut adalah dengan menggunakan tag legend dan tag fieldset. Format penulisan umumnya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>ibahasa pemograman</title>
</head>
<h2> Identitas Pelamar Kerja </h2>
<body>
<form action="daftar.php" method="post">
<fieldset>
<legend>Identitas Diri</legend>
Nama : <input id="na" size="12" type="text" />
<br /> <br />
Alamat : <input id="nd" size="12" type="text" />
<br /> <br />
Telepon: <input id="da" size="12" type="text" />
<br /> <br />
</fieldset>
<fieldset>
<legend>Keluarga</legend>
Nama Ayah : <input id="ca" size="12" type="text" />
<br /> <br />
Nama Ibu : <input id="kep" size="12" type="text" />
<br /> <br />
</fieldset>
<fieldset>
<legend>Status</legend>
<input type="checkbox" name="kawin" id="kawin"
value="kawin"/>Kawin
<br /> <br />
<input type="checkbox" name="belumka" id="belumka"
value="belumka"/>Belum / Tidak Kawin
<br /> <br />
</fieldset>
</form>
</body>
</html>
Pembuatan kelompok tersebut adalah dengan menggunakan tag legend dan tag fieldset. Format penulisan umumnya adalah sebagai berikut:
<form action="daftar.php" method="post"> <fieldset> <legend>Judul pada kelompok </legend> ...daftar input, button, teks dll... </fieldset></form>Sebagai contoh penggunaanya bisa dilihat pada contoh kode di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>ibahasa pemograman</title>
</head>
<h2> Identitas Pelamar Kerja </h2>
<body>
<form action="daftar.php" method="post">
<fieldset>
<legend>Identitas Diri</legend>
Nama : <input id="na" size="12" type="text" />
<br /> <br />
Alamat : <input id="nd" size="12" type="text" />
<br /> <br />
Telepon: <input id="da" size="12" type="text" />
<br /> <br />
</fieldset>
<fieldset>
<legend>Keluarga</legend>
Nama Ayah : <input id="ca" size="12" type="text" />
<br /> <br />
Nama Ibu : <input id="kep" size="12" type="text" />
<br /> <br />
</fieldset>
<fieldset>
<legend>Status</legend>
<input type="checkbox" name="kawin" id="kawin"
value="kawin"/>Kawin
<br /> <br />
<input type="checkbox" name="belumka" id="belumka"
value="belumka"/>Belum / Tidak Kawin
<br /> <br />
</fieldset>
</form>
</body>
</html>
Dari tampilan di atas bisa dilihat ada kelompok data. Data pertama Identitas diri, kemudian keluarga dan status. Masing masing kelompok bisa dilihat pada kode dibatasi oleh tag fieldset dan tag legend untuk judulnya. Untuk judul bisa di atur tampilan , mau di tengah (center), kiri (left) dan kanan(right). Caranya tambahkan align="right". pada tag legend. Sesuaikan dengan keinginan mau di center, left atau right sehingga menjadi : <legend align= "center">Status</legend>.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment