HTML menyediakan elemen fieldset untuk membuat pengelompokan object dalam formulir.
dokumen HTML yang diperlukan untuk membuat tampilan tersebut dapat dilihat berikut ini.
Berkas : fieldset.html
klik Di sini Untuk Lihat Hasilnya.
Akhir Berkas
Satu hal yang perlu diketahui, pada dokumen HTML di depan terdapat dua komentar (yaitu berada dalam <!-- dan -->). Cobalah buang tanda tersebut tanpa menghapus yang ada di dalamnya. Lalu, lakukan penyimpanan dan panggil kembali fieldset.html pada browser. Anda akan melihat hasil seperti contoh yang sudah aku kasih tadi..
judul pada setiap kotak hasil fieldset diatas sebenarnya adalah hasil dari.
<legend>Data Pribadi</legend>
dan
<legend>Info Lain-Lain</legend>
dokumen HTML yang diperlukan untuk membuat tampilan tersebut dapat dilihat berikut ini.
Berkas : fieldset.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jadi Hasilnya akan seperti ini:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Info Dalam Bentuk Tab</title>
<style>
body {background-color:#000000;}
form {
border:1px solid gray;
background-color:#000000;
}
fieldset {
background-color:#000000;
}
fieldset {
margin-left:10px;
}
p {color: white;
}
label {
float:left;
width:100px;
}
</style>
</head>
<body>
<h1>Formulir Pendaftaran</h1>
<form method="post" action="prosform.php">
<fieldset>
<!-- <legend>Data Pribadi</legend> --->
<p>
<label for="NamaLengkap">Nama:</label>
<input type="text" name="NamaLengkap" id="NamaLengkap"/>
</p>
<p>
<label for="Email">Alamat Email :</label>
<input type="text" name="Email" id="Email"/>
</p>
<p>
<label for="Password1">Password:</label>
<input type="password" name="Password1" id="Password1"/>
</p>
<p>
<label for="Password2">Password Konfirmasi :</label>
<input type="Password" name="Password2" id="Password2"/>
</p>
</fieldset>
<fieldset>
<!-- <legend>Info Lain-Lain</legend> --->
<p>
<label for="Usia">Usia:</label>
<input type="text" name="Usia" id="Usia"/>
</p>
<p>
<label for="Pekerjaan">Pekerjaan:</label>
<input type="text" name="Pekerjaan" id="Pekerjaan"/>
</p>
</fieldset>
</form>
</body>
</html>
klik Di sini Untuk Lihat Hasilnya.
Akhir Berkas
Satu hal yang perlu diketahui, pada dokumen HTML di depan terdapat dua komentar (yaitu berada dalam <!-- dan -->). Cobalah buang tanda tersebut tanpa menghapus yang ada di dalamnya. Lalu, lakukan penyimpanan dan panggil kembali fieldset.html pada browser. Anda akan melihat hasil seperti contoh yang sudah aku kasih tadi..
judul pada setiap kotak hasil fieldset diatas sebenarnya adalah hasil dari.
<legend>Data Pribadi</legend>
dan
<legend>Info Lain-Lain</legend>
Post a Comment Blogger Facebook Disqus